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

来源：互联网发布：java版手机qq2013 编辑：程序博客网时间：2024/06/07 01:57

先看看效果

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

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

0 0