(四)运行微信小程序:在主页加入表单组件实现提交功能

我们在上个小练习的基础上,继续在主页添加功能——使用表单组件form。

根据微信官方文档:

https://developers.weixin.qq.com/miniprogram/dev/component/form.html

当需要获取用户提交的信息时,可以使用表单组件form。当用户点击表单中formType为submit的组件时,系统会将表单组件中的value值进行提交。

1. 修改index.wxml文件。

在上个小练习的index.wxml文件的第5行和第6行之间即“内容为:{{result}}”和“”之间换行,然后插入以下内容。



slider



Submit

(四)运行微信小程序:在主页加入表单组件实现提交功能_第1张图片  

2. 修改index.js文件。

(1) 在上个小练习的index.js文件的第19行和第20行之间即data的“}”后面加上分隔符“,”,然后换行,插入以下内容。

formSubmit:function(e){
console.log('form发生了submit事件,携带数据为:',e.detail.value)
this.setData({
allValue:e.detail.value
})
}

注意:如果选择了ts模板,使用的是index.ts文件,那这里”function(e)”需要改成”function(e:any)”,否则编译会报错。

即index.js文件的后半部分为以下内容。

data: {
result:"等待扫描"
},
formSubmit:function(e){
console.log('form发生了submit事件,携带数据为:',e.detail.value)
this.setData({
allValue:e.detail.value
})
}
})

(2) 编译成功后,在微信开发者工具界面滑动小程序的滑块到某个数值,单击“Submit”。

可以看到,在调试器的Console窗口,显示“form发生了submit事件”,这与我们滑动滑块的数据大小是一致的。

(四)运行微信小程序:在主页加入表单组件实现提交功能_第2张图片

(四)运行微信小程序:在主页加入表单组件实现提交功能_第3张图片

如果还需要加其他表单组件,可以参考文献:https://www.jianshu.com/p/d16ac0569dc1

你可能感兴趣的:(微信小程序,微信,java,javascript)