本文给大家带来的是微信小程序五洲到家编辑用户名简单功能设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--pages/editname/editname.wxml-->
<view class="edit-box">
<view class="edit-dec">请在输入框编辑用户名</view>
<input value="{{userName}}" focus="true" confirm-type="提交" bindconfirm="submit"/>
</view>
|
二、wxss样式文件代码如下：
/* pages/editname/editname.wxss */
.edit-box .edit-dec{
font-size: 24rpx;
color: #222;
margin: 30rpx 0 20rpx 20rpx;
}
.edit-box input{
border: 1px #efefef solid;
height: 88rpx;
line-height: 88rpx;
display: block;
background-color: #efefef;
padding-left: 20rpx;
font-size: 28rpx;
}
|
三、js页面代码如下：
// pages/editname/editname.js
//获取app实例
var util = require('../../utils/util.js');
var ports = require('../../utils/ports.js');
var appInstance = getApp();
Page({
data:{
userName: ''
},
judge: function(){
if(!appInstance.globalData.userInfo.hasData){
wx.navigateBack({
delta: 2
});
}
},
submit(e){
var _self = this;
util.getToken().then(token => {
util.wxRequest({
method: 'POST',
url: ports.updateNickName,
header:{ 'X-Auth-Token': token, 'content-type': 'application/x-www-form-urlencoded' },
data: {
nickname: e.detail.value
}
}).then((res) => {
appInstance.globalData.userInfo.nickname = e.detail.value;
wx.showToast({
title: '修改成功',
icon: 'success',
duration: 1000,
success: function(){
setTimeout(function(){
wx.navigateBack({
delta: 1
});
}, 1000);
}
})
});
});
},
onLoad:function(options){
this.judge();
this.setData({
userName: appInstance.globalData.userInfo.nickname
});
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})
|
.jpg)
.jpg)
