微信小程序 “万利商城”实战之十六：“我的”页面设置功能编码实现

设置功能用来保存用户的基本信息，比如电话地址等，便于用户购买商品时将这些信息保存到数据库的订单表中，

从而为发货环节提供收货信息，先看页面效果图：

setting.wxml代码如下：

<!--pages/member/setting.wxml-->
<view class="container"> 

  <view class="memberInfo1">
    <form class="form1" bindsubmit="formSubmit">  
      <text class="text1">昵称：</text>
      <input class="input1" name="name" type="text" />
      <text class="text1">电话：</text>
      <input class="input1" name="tel" type="text" />
      <text class="text1">收货地址：</text>
      <input class="input1" name="addr" type="text" />
      <text class="text1">邮件：</text>
      <input class="input1" name="mail" type="text" />
      <button class="button1" formType="submit">保存</button> 
    </form>
  </view>

</view>

对应的wxss文件如下：

.memberInfo1
{
  width: 96%;
  box-sizing: border-box;
} 
.form1{
  width: 100%; 
}
.input1
{
  height:80rpx;
  background-color: #f0f0f0;
  padding-left: 10rpx;
}

.button1
{
  margin-top: 60rpx;
  height: 80rpx;
  line-height: 80rpx;
}

页面定义了几个输入控件供用户输入数据，在button中定义了一个submit类型的按钮，

用户点保存按钮时触发form的bindsubmit事件，页面执行对应的formSubmit函数，代码如下：

formSubmit: function (options) {
    let formobj = options.detail.value;
    let name = formobj.name;
    let tel = formobj.tel;
    let addr = formobj.addr;
    let mail = formobj.mail;

    wx.request({
      url: 'http://www.tm.com/webapi/memberinfo',
      data:{
        'name':name,
        'tel':tel,
        'addr':addr,
        'mail':mail,
      },
      method:'POST',
      success:function(){
        wx.showToast({
          title: '保存成功!',
        })
      }
    })
  },

在此函数中用let formobj = options.detail.value;获取form中各控件的值集合，然后传递到Web服务器，

服务端保存到数据库后返回到小程序，最后提示用户保存成功。