本文给大家带来的是微信小程序商城个人用户信息修改页面设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--pages/member/account/account.wxml-->
<view class="container greybg">
<view class="account-wrap">
<view class="hd">
用户名：
<span class="uname">joek2222</span>
</view>
<view class="accoutn-bind">
<view class="item">
<view class="left">
<i class="icon ion-ios-telephone-outline"></i>
<view class="t">登录手机</view>
</view>
<button class="btn">修改手机</button>
</view>
<view class="item">
<view class="left">
<i class="icon ion-ios-email-outline"></i>
<view class="t">登录邮箱</view>
</view>
<button class="btn">修改邮箱</button>
</view>
<view class="item">
<view class="left">
<i class="icon ion-ios-locked-outline"></i>
<view class="t">登录密码</view>
</view>
<button class="btn">修改密码</button>
</view>
</view>
</view>
</view>
|
二、js页面代码如下：
// pages/member/account/account.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
|
.jpg)
.jpg)
