微信小程序开发—

WeChat小程序交流（QQ群：769977169）

效果图

代码示例

1、xxx.wxml

<form bindsubmit='submitClick' bindreset='resetClick'><switch name="status" bindchange='switchClick'>{{switchTitle}}</switch> <input name="userName" placeholder='请输入帐号' type='text' maxlength="20" confirm-type="next"></input><input name="userPassword" placeholder='请输入密码' password='true' maxlength="20" confirm-type="done"></input> <checkbox-group name="citys" bindchange="checkClick"><block wx:for="{{checkData}}"><checkbox value='{{item.name}}' checked="{{item.status}}">{{item.name}}</checkbox></block></checkbox-group> <slider name="progress" bindchange='sliderClick'></slider>  <radio-group name="gender" bindchange="radioClick"><block wx:for="{{radioData}}"><radio value='{{item.name}}' checked='{{item.status}}'>{{item.name}}</radio></block></radio-group>  <picker name="protect" bindchange="pickerClick" value='{{pickerIndex}}' range='{{pickerData}}'>{{pickerData[pickerIndex]}}</picker>  <button form-type='submit'>提交</button><button form-type='reset'>重置</button>
</form>

2、xxx.wxjs

// pages/modules/Form/form.js
Page({/*** 页面的初始数据*/data: {switchTitle:"关",checkData: [{name: "深圳", status: true}, {name: "广州", status: false}, {name: "东莞", status: false}, {name: "惠州", status: false}],radioData: [{name:"男", status:true},{name:"女", status:false}],pickerData: ["中国人寿", "中国平安", "太平洋人寿", "华夏人寿"],pickerIndex: 0,},switchClick: function (event) {var status = event.detail.value;    this.setData({switchTitle: (status ? "开" : "关"),});},checkClick: function (event) {console.log(event.detail.value);},sliderClick: function (event) {console.log(event.detail.value);},radioClick: function (event) {console.log(event.detail.value);},pickerClick: function (event) {console.log(event.detail.value);this.setData({pickerIndex: event.detail.value,});},submitClick: function (event) {var status = event.detail.value.status;var userName = event.detail.value.userName;var userPassword = event.detail.value.userPassword;var citys = event.detail.value.citys;var cityText = "";for (var index in citys) {var text = citys[index];cityText += ", " + text;}var progress = event.detail.value.progress;var protect = this.data.pickerData[event.detail.value.protect];console.log("你的信息已经对外" + (status ? "公开" : "屏蔽") + "\n当前登录帐号：" + userName + ", 密码是：" + userPassword + "\n你所工作过的城市有：" + cityText + "\n你的专业技能评分是：" + progress + "分" + "\n你的保障是：" + protect);},resetClick: function (event) {console.log(event.detail.value);}
}

注意：form表单里的其他组件，必须设置name属性，否则无法获取对应组件信息。

微信小程序开发——form表单相关推荐

微信小程序表单提交php存储,微信小程序实现form表单本地储存数据
本文实例为大家分享了微信小程序实现form表单本地储存数据的具体代码,供大家参考,具体内容如下效果图: 主要利用小程序的getStorage来实现异步本地储存. 小程序目录结构如下: 新建项目前,为 ...
微信小程序开发之表单验证（WxValidate使用）
微信小程序的开发框架个人感觉大体上跟VUE是差不多的,但是他的表单组件没有自带的验证功能,因此开发小程序的表单验证时候一般有两种方法,一是自己裸写验证规则,但是需要比较扎实的正则表达式基础,一种是利用 ...
微信小程序中form 表单提交和取值实例详解
2019独角兽企业重金招聘Python工程师标准>>> 我们知道,如果我们直接给 input 添加 bindinput,比如:<input bindinput="on ...
微信小程序提交form表单内容
wxml <form catchsubmit="confirmPublish"><view class="cu-form-group margin-to ...
微信小程序的动态表单，实现房屋租赁的多租客录入
0 前言本文将介绍如何使用微信小程序编写动态表单,最终实现房屋租赁系统中多租客录入的业务. 在阅读本文前,您需要对微信小程序的开发有一个初步的了解,以便更容易的学会开发动态表单. 作者主页:Desi ...
微信小程序开发推进表_推进软件测试程序的最佳实践
微信小程序开发推进表 Software testing process is used to assess evaluate a product to see if it really meets t ...
微信小程序之获取表单数据
前言:微信小程序中很多地方运用到了表单,很多时候我们需要把表单中的内容提取出来返回给后台,这里我随便写了一点注意点: 1.所有的input textarea button全部包含在form表单元素 ...
微信小程序+SpringMVC图文表单提交（包括前后端代码）
文章目录前言一.基本功能说明二.小程序前端三.SpringMVC后端总结前言本项目使用微信小程序+SpringMVC搭建.这里展示的是其中表单提交的部分(图片和文字).本文包括前后端关键 ...
微信小程序之from表单提交数据到PHP后台
主要内容:实现微信小程序与PHP后台之间的数据传递本文通过from表单提交到后台存入数据库来展现需要注意的有: 勾选代码如下: demo1.wxml <!--pages/demo1/dem ...

微信小程序开发——form表单

微信小程序开发——form表单相关推荐

最新文章

热门文章