大家好,我是小陈,一名大一的编码爱好者,,,,,刚刚结束了大一的学习生活,也总结出了一点编码的经验,希望与大家一起分享.我是学习物联网的,总感觉大一的课程枯燥无味,所以索性自学了一点微信小程序的开发,只是一点点,(注意:非大神),把自己的学习成果分享在博客中,与大家一起讨论学习,也欢迎大家指正批评.
------------------------------------------------------------------------------------------------------------------------------
<view>标签:相当于web中的div标签,块级元素,会换行.
<text>标签:相当于web中的span标签,行内元素,不会换行.
<form>标签:表格标签.
<picker>标签:选择标签.
<input>标签,输入标签
三元运算符
话不多说,上代码.....................................................
data里的数据可以用于前端的使用,在赋值时必须用到this.setData
后端对于前端的信息进行了检索用到了if else,我这里只是使用了检索是否为空,还可以更深入挖掘,比如电话规定多少位(自行百度)
wx.showtoast({}),进行提醒,目前有icon属性(图表显示)和title属性(文字提示)
最后一点,如何提交信息到数据库,wx.cloud.database().collection('').add()方法进行提交
wxml
<form bindsubmit="publish">
<view>
<text>姓名:</text>
<input bindinput="xingming" name="xingming"></input>
</view>
<view>
<text>电话:</text>
<input bindinput="dianhua" name="dianhua"></input>
</view>
<view>
<text>地址:</text>
<picker name="address" range="{{list1}}" value="{{list1[list2]}}" bindchange="gaibian">
<view>{{list1[list2]?list1[list2]:'请输入'}}</view>
</picker>
</view>
<button form-type="submit">提交数据到数据库</button>
</form>
js
let xingming1
let dianhua1
let address1
Page({
data: {
list1: ['铁西区', '皇姑区', '辽宁省']
},
// 姓名
xingming(e) {
console.log('姓名:', e.detail.value)
xingming1 = e.detail.value
},
//电话
dianhua(e) {
console.log('电话', e.detail.value)
dianhua1 = e.detail.value
},
//地址栏的改变函数
gaibian(e) {
console.log('选中的序列', e.detail.value)
this.setData({
list2: e.detail.value
})
},
//提交触发函数
publish(e) {
console.log('提交的数据', e.detail.value)
if (!xingming1) {
wx.showToast({
icon: 'error',
title: '姓名为空',
})
} else if (!dianhua1) {
wx.showToast({
icon: 'error',
title: '电话为空',
})
} else if (!e.detail.value.address) {
wx.showToast({
icon: 'error',
title: '地址为空',
})
} else {
wx.cloud.database().collection('goods')
.add({
data: e.detail.value
})
.then(res => {
console.log('提交成功', res)
})
.catch(err => {
console.log('提交失败')
})
}
}
})看样图
击请输入后
填写信息后
此为比较简单的页面提交,非常粗鲁的前端,并没有用到wxss,所以页面后期还可进行美化.
前端的姓名电话都比较好理解,定义各自的属性名字,定义bindinput监测输入框是否有变动,比较难理解的是picker标签(我当时也理解了很时间),他定义的属性有name,range,value,bindchange(监测轮播的选择界面是否有有变化),name记录属性,range记录的是你所要选择的范围,list在js中定义,而定义的方法所用到的e.detail.value中所返回的值并不是你所设定的所选择数组的具体的值,而是返回的是数组位列的值,比如arr[1]=你,他返回的并不是你所定义的'你',它返回的是'1',所以定义value的值为{{list[list1]}},这个value定义的值是信息表单提交的值,它对应的是name,如果你不定义value的值,你提交所返回的他的值为0,1,2,3依次类推.在此重新定义value值,才能正确的提交数据到后台.
说在最后的话
最最重要的是逻辑,逻辑可以把一切方法串联在一起,如果你还有时间,比如你在大学,一定要把理论课学一学,比如离散,Xx概论,如果你只会写代码的话,你根本就不会创造,跟培训机构培养出来的码农真的没有区别,学习相关的理论专业课会让你更加的深入理解,写出代码才会更容易,才会写出更简洁的代码
好好学专业课!好好学专业课!好好学专业课(下学期的主要任务)
欢迎留言,评论,批评
多谢多谢