微信小程序开发之——个人中心-个人资料修改(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()}
})

四源码

源码
物流查询服务器

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

微信小程序开发前台篇（四）修改首页默认路径
微信小程序的默认首页在app.json中的第一个路径就是默认的首页路径调整前首页路径pages/index/index {"pages": ["pages/index ...
微信小程序开发之——个人中心-订单物流查询(8)
一概述订单服务器搭建订单物流查询页面对应的页面为pages/order/order 二订单服务器搭建 2.1 配置及模块安装 2.1.1 初始化项目,自动创建package.json配置文件 ...
微信小程序开发之——个人中心-介绍(1)
一概述个人中心展示图个人中心各个页面展示及功能介绍二个人中心页面介绍 2.1 展示 2.2 页面构成 2.2.1 首页说明: 首页包含:昵称,星座,兴趣,QQ,电话点击头像:跳转个人中心 ...
微信小程序开发之——个人中心-个人中心(5)
一概述个人中心对应的页面为:pages/person/person 页面搭建页面逻辑二页面搭建 2.1 布局文件(person.wml)  <view c ...
微信小程序开发之——个人中心-收货地址(9)
一概述个人详情页对应的页面为:pages/address/address 页面搭建页面逻辑二页面搭建 2.1 布局文件(address.wml) <view class="l ...
微信小程序开发之——个人中心-首页(4)
一概述首页对应的页面为pages/index/index 首页页面搭建页面逻辑-点击头像完成页面跳转二首页页面搭建 2.1 布局文件(index.wml) <view class=&q ...
微信小程序开发之——个人中心-个人详情页(6)
一概述个人详情页对应的页面为:pages/detail/detail 页面搭建页面逻辑二页面搭建 2.1 布局文件(detail.wml) <view class="info ...
微信小程序开发之——个人中心-API(2)
一概述页面跳转方法:wx.switchTab/wx.navigateTo/wx.redirectTo/wx.reLaunch 从本地相册或照相机拍照:wx.chooseImage 选择用户地址:w ...
微信小程序开发工具将已存在的Git项目在新开发者下拉取推送
微信小程序开发工具将已存在的Git项目在新开发者下拉取推送前言流程完事前言最近有同事离职了,交接了一个微信小程序的项目下来,源码放在了公司内部的GIT上面,当我下载下来维护之后发现,在微信 ...

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

一概述

二页面搭建

2.1 布局文件(modify.wml)

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

三页面逻辑—modify.js

四源码

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

最新文章

热门文章

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

一 概述

二 页面搭建

2.1 布局文件(modify.wml)

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

三 页面逻辑—modify.js

四 源码

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

最新文章

热门文章

一概述

二页面搭建

三页面逻辑—modify.js

四源码