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

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

从而为发货环节提供收货信息，setting.wxml代码如下：

 1 <!--pages/member/setting.wxml-->
 2 <view class="container"> 
 3 
 4   <view class="memberInfo1">
 5     <form class="form1" bindsubmit="formSubmit">  
 6       <text class="text1">昵称：</text>
 7       <input class="input1" name="name" type="text" />
 8       <text class="text1">电话：</text>
 9       <input class="input1" name="tel" type="text" />
10       <text class="text1">收货地址：</text>
11       <input class="input1" name="addr" type="text" />
12       <text class="text1">邮件：</text>
13       <input class="input1" name="mail" type="text" />
14       <button class="button1" formType="submit">保存</button> 
15     </form>
16   </view>
17 
18 </view>

对应的wxss文件如下：

 1 .memberInfo1
 2 {
 3   width: 96%;
 4   box-sizing: border-box;
 5 } 
 6 .form1{
 7   width: 100%; 
 8 }
 9 .input1
10 {
11   height:80rpx;
12   background-color: #f0f0f0;
13   padding-left: 10rpx;
14 }
15 
16 .button1
17 {
18   margin-top: 60rpx;
19   height: 80rpx;
20   line-height: 80rpx;
21 }

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

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

 1 formSubmit: function (options) {
 2     let formobj = options.detail.value;
 3     let name = formobj.name;
 4     let tel = formobj.tel;
 5     let addr = formobj.addr;
 6     let mail = formobj.mail;
 7 
 8     wx.request({
 9       url: 'http://www.tm.com/webapi/memberinfo',
10       data:{
11         'name':name,
12         'tel':tel,
13         'addr':addr,
14         'mail':mail,
15       },
16       method:'POST',
17       success:function(){
18         wx.showToast({
19           title: '保存成功!',
20         })
21       }
22     })
23   },

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

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

标签：编码,tel,name,formobj,微信,页面设置,let,mail,addr
来源： https://www.cnblogs.com/pfm33/p/13994825.html