微信小程序开发之——个人中心-个人资料修改(7)

一 概述

• 个人资料修改对应的页面为：pages/modify/modify
• 页面搭建
• 页面逻辑

二 页面搭建

2.1 布局文件(modify.wml)

<form bindsubmit="formSubmit" report-submit="true">
<!--姓名-->  
<view class="section">
  <view class="section-title">姓名：</view>
  <view>
    <input type="text" name="username" value="{{username}}" placeholder="请输入姓名"/>
  </view>
</view>
<!--性别--> 
<view class="section">
  <view class="section-title">性别：</view>
  <view>
    <radio-group name="gender">
      <label><radio value="男" checked="{{gender=='男'?'checked':''}}"/>男</label>
      <label><radio value="女" checked="{{gender=='女'?'checked':''}}"/>女</label>
    </radio-group>
  </view>
</view>
<button form-type="submit" type="primary">保存</button>
</form>

2.2 页面样式文件(modify.wxss)

page{
  font-size: 32rpx;
}
.section{
  padding: 40rpx;
  border-bottom: 1px solid gray;
}
.section:last-child{
  border: none;
}
.section-title{
  width: 20%;
  float: left;
}
label{
  padding: 0 20rpx;
}

三 页面逻辑—modify.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    username: '',
    gender: '男'
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      //收到数据后使用decodeURIComponent()解码
      username: decodeURIComponent(options.username),
      gender: decodeURIComponent(options.gender)
    })
  },
  //保存按钮
  formSubmit:function(e){
    //表单返回的所有数据
    var formData=e.detail.value;
    //获取上一个页面的对象
    var pages=getCurrentPages()
    var prevPage=pages[pages.length-2]
    //调用上一个页面的setData()方法，把数据存储到上一个页面中去
    prevPage.setData({
      username:formData.username,
      gender:formData.gender
    })
    //返回上一个页面
    wx.navigateBack()
  }
})

四 源码

• 源码
• 物流查询服务器