微信小程序表單

【轉】微信小程序六（數據請求 表單的創建 提交 與接收）

好了 開始正題了，本節小小研究了下 微信小程序的表單創建與提交

先看看效果

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

以及相關表單 的信息 ， 之后將分解講解 對應的小功能。