一、页面效果

二、json文件

//获取应用实例
const app = getApp()
Page({/*** 页面的初始数据*/data: {array: ['速美', '现代', '淮安'],mode: 'scaleToFill',src: '../../images/1.png',userInfo: {},hasUserInfo: false,canIUse: wx.canIUse('button.open-type.getUserInfo'),userName: '',mobile: ''},userNameInput: function(e) {this.setData({userName: e.detail.value})},mobileInput: function(e) {this.setData({mobile: e.detail.value})},btnclick: function() {var userName = this.data.userName;var mobile = this.data.mobile;var phonetel = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;var name = /^[u4E00-u9FA5]+$/;if (userName == '') {wx.showToast({title: '请输入用户名',icon: 'succes',duration: 1000,mask: true})return false} else if (mobile == '') {wx.showToast({title: '手机号不能为空',})return false} else if (mobile.length != 11) {wx.showToast({title: '手机号长度有误！',icon: 'success',duration: 1500})return false;}var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;if (!myreg.test(mobile)) {wx.showToast({title: '手机号有误！',icon: 'success',duration: 1500})return false;}return true;},//事件处理函数bindPickerChange: function(e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({index: e.detail.value})},bindViewTap: function() {wx.navigateTo({url: '../logs/logs'})},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {if (app.globalData.userInfo) {this.setData({userInfo: app.globalData.userInfo,hasUserInfo: true})} else if (this.data.canIUse) {// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况app.userInfoReadyCallback = res => {this.setData({userInfo: res.userInfo,hasUserInfo: true})}} else {// 在没有 open-type=getUserInfo 版本的兼容处理wx.getUserInfo({success: res => {app.globalData.userInfo = res.userInfothis.setData({userInfo: res.userInfo,hasUserInfo: true})}})}},getUserInfo: function(e) {console.log(e)app.globalData.userInfo = e.detail.userInfothis.setData({userInfo: e.detail.userInfo,hasUserInfo: true})},// 表单提交数据formSubmit: function(e) {console.log(e.detail.value)// 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事件');},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function() {},/*** 生命周期函数--监听页面显示*/onShow: function() {},/*** 生命周期函数--监听页面隐藏*/onHide: function() {},/*** 生命周期函数--监听页面卸载*/onUnload: function() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function() {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function() {},/*** 用户点击右上角分享*/onShareAppMessage: function() {}
})

三、wxml页面

<view class="container"><view class="userinfo"><button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button><block wx:else><image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text></block></view><form bindsubmit="formSubmit" bindreset="formReset"><view class="section"><image style="width: 30px; height: 30px;" mode="{{mode}}" src="../../images/mine.png"></image><input name="mine" placeholder="姓名" maxlength='12'value="" bindinput ="userNameInput" /></view><view class="section"><image style="width: 30px; height: 30px;" mode="{{mode}}" src="../../images/phone.png"></image><input name="phone" placeholder="手机号" maxlength='11'value="" bindinput ="mobileInput" /></view><view class="section"><image style="width: 30px; height: 30px;" mode="{{mode}}" src="../../images/city.png"></image><input name="city" placeholder="城市" /></view><view class="section"><image style="width: 30px; height: 30px;" mode="{{mode}}" src="../../images/address.png"></image><input name="address" placeholder="地址" /></view><view class="section"><image style="width: 30px; height: 30px;" mode="{{mode}}" src="../../images/style.png"></image><picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">风格：{{array[index]}}</picker><!-- <input name="style" placeholder="风格" /> --></view><view class="section"><image style="width: 30px; height: 30px;" mode="{{mode}}" src="../../images/area.png"></image><input name="area" placeholder="面积" /></view><view class="btn-area"><button formType="reset" class='btn-left'>取消</button><button formType="submit" class='btn-right' bindtap='btnclick' >确定</button></view></form>
</view>