微信小程序之六（表单基本功能）

先看看效果

1. 表单页面

[html] view
plain copy

 





<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 代码

[javascript] view
plain copy

 





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();  

  }  

})  

tabBar里面的pagePath跳转 wx.switchTab
pages里面的pages跳转 wx.redirectTo

3. 部分样式

[css] view
plain copy

 





#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] view
plain copy

 





<?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

以及相关表单 的信息 ， 之后将分解讲解 对应的小功能。