微信小程序表单
【转】微信小程序六(数据请求 表单的创建 提交 与接收)
好了 开始正题了,本节小小研究了下 微信小程序的表单创建与提交
先看看效果
1. 表单页面
<view id="adduser"> <form bindsubmit="formSubmit" bindreset="formReset"> <view class="section"> <view class="section__title">姓名:</view> <view class='form-group'> <input type="text" class="input-text" name="username" placeholder="请输入姓名" /> </view> </view> <view class="section section_gap"> <view class="section__title">年龄:</view> <view class='form-group'> <slider name="age" show-value ></slider> </view> </view> <view class="section section_gap"> <view class="section__title">性别:</view> <view class='form-group'> <radio-group name="gender"> <label><radio value="1"/>男</label> <label><radio value="0"/>女</label> </radio-group> </view> </view> <view class="section"> <view class="section__title">地区选择:</view> <view class='form-group'> <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> <view class="picker"> <input type="hidden" disabled="true" name="addr" value="{{array[index]}}"/> </view> </picker> </view> </view> <view class="section section_gap"> <view class="section__title">爱好:</view> <view class='form-group'> <checkbox-group name="hobby"> <label><checkbox value="羽毛球"/>羽毛球</label> <label><checkbox value="游泳"/>游泳</label> </checkbox-group> </view> </view> <view class="section section_gap"> <view class="section__title">是否显示:</view> <view class='form-group'> <switch name="isshow"/> </view> </view> <view class="section btn-area"> <button formType="submit">提交</button> <button formType="reset">清空</button> </view> </form> <!-- 黑框提示并消失 --> <toast hidden="{{toast1Hidden}}" bindchange="toast1Change"> {{notice_str}} </toast> <!-- 确认框 及 提示框 --> <view class="page__bd"> <modal title="确认" confirm-text="确定" cancel-text="取消" hidden="{{modalHidden}}" mask bindconfirm="confirm_one" bindcancel="cancel_one"> 确认提交么? </modal> <modal class="modal" hidden="{{modalHidden2}}" no-cancel bindconfirm="modalChange2" bindcancel="modalChange2"> <view> 提示 </view> <view> 清空成功 </view> </modal> </view> </view>
2. js 代码
var app = getApp(); Page({ data:{ // text:"这是一个页面" array:["中国","美国","巴西","日本"], toast1Hidden:true, modalHidden: true, modalHidden2: true, notice_str: '', index:0 }, toast1Change:function(e){ this.setData({toast1Hidden:true}); }, //弹出确认框 modalTap: function(e) { this.setData({ modalHidden: false }) }, confirm_one: function(e) { console.log(e); this.setData({ modalHidden: true, toast1Hidden:false, notice_str: '提交成功' }); }, cancel_one: function(e) { console.log(e); this.setData({ modalHidden: true, toast1Hidden:false, notice_str: '取消成功' }); }, //弹出提示框 modalTap2: function(e) { this.setData({ modalHidden2: false }) }, modalChange2: function(e) { this.setData({ modalHidden2: true }) }, bindPickerChange: function(e) { console.log('picker发送选择改变,携带值为', e.detail.value) this.setData({ index: e.detail.value }) }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 }, formSubmit: function(e) { var that = this; var formData = e.detail.value; wx.request({ url: 'http://test.com:8080/test/socket.php?msg=2', data: formData, header: { 'Content-Type': 'application/json' }, success: function(res) { console.log(res.data) that.modalTap(); } }) }, formReset: function() { console.log('form发生了reset事件'); this.modalTap2(); } })
3. 部分样式
#adduser{ background: #f5f5f5; } .section__title{ float: left; width:30%; } .form-group{ float: right; width: 70%; } .section{ clear: both; width:90%; margin: 2rem auto; } .input-text{ border: 1px solid #ddd; } .button{ border: 1px solid #1aad19; border-radius: 2px; } .picker{ padding: 13px; background-color: #FFFFFF; }
4. 服务器端
<?php var_dump($_REQUEST);
本节 集合了
表单 https://mp.weixin.qq.com/debug/wxadoc/dev/component/form.html?t=1476197486816
数据请求 https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html?t=1476197484427
提示框 https://mp.weixin.qq.com/debug/wxadoc/dev/component/toast.html?t=1476197486420
确认和非确认框 https://mp.weixin.qq.com/debug/wxadoc/dev/component/modal.html?t=1476197489278
以及相关表单 的信息 , 之后将分解讲解 对应的小功能。
孜孜不倦,必能求索;风尘仆仆,终有归途。