1、修改app.js
// app.js App({ onLaunch() { // 登录 wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId if (res.code) { // console.log(res.code) wx.request({ url: this.globalData.url + 'api/sys_Login/Login_WeChat', data: { code: res.code }, header: { "content-type": "application/json" }, method: 'POST', success: res => { // console.log(res.data); this.globalData.userInfo = res.data; wx.setStorage({ key: 'userInfo', data: res.data, }) //网络请求可能会在Page.onLoad()之后返回,加入callback if (this.userInfoCallback){ this.userInfoCallback(res.data); } } }) } else { console.log('登录失败！') } } }) }, globalData: { url: 'http://127.0.0.1:8888/', userInfo: null, } })
2、修改personcenter.wxml
<view class="container"> <form catchsubmit="formSubmit"> <view class="userinfo"> <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"> <image class="avatar" src="{{userInfo.avatarUrl}}" mode='aspectFit'></image> </button> <input class="nick-name-input" type="nickname" placeholder="点击获取微信名" name="input" value="{{userInfo.nickname}}" bindblur="changeNickName" /> </view> <view class="usermotto"> <button type="primary" formType="submit" >登陆</button> </view> </form> </view>
3、修改personcenter.wxss
.userinfo {
margin-top: 200rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.avatar-wrapper {
background-color: white;
}
.avatar {
overflow: hidden;
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.nick-name-input {
margin: 20rpx;
text-align: center
}
.usermotto {
margin-top: 200rpx;
}
4、修改personcenter.js
var app = getApp(); Page({ data: { userInfo: null, }, onLoad() { // 获取后台返回的用户信息 if (app.globalData.userInfo == null) { // callback 未获取信息回调 app.userInfoCallback = userInfo => { if (userInfo != null) { this.setData({ userInfo: app.globalData.userInfo }); } } } else { this.setData({ userInfo: app.globalData.userInfo }); } }, // 用户修改昵称 changeNickName(e) { let name = e.detail.value; if (name.length === 0) return; // this.setData({ // ['userInfo.nickname']: e.detail.value.input // }) }, // 用户选中自定义头像的回调 onChooseAvatar(e) { const { avatarUrl } = e.detail // 获取到的avatarUrl（临时地址）：http://tmp/ZENIKXqaUC20a19f3c2fd621b82c7662b952e000d532.jpeg console.log(avatarUrl); this.setData({ ['userInfo.avatarUrl']: avatarUrl, }) }, // 获取token getToken() { wx.request({ url: app.globalData.url + 'api/sys_Login/wx_token', data: { openid: app.globalData.userInfo.openid }, success: res => { // console.log(res) wx.setStorage({ key: 'token', data: res.data, }) wx.navigateTo({ url: '../workplant/workplant' }) } }) }, // 登录 formSubmit(e) { this.setData({ ['userInfo.nickname']: e.detail.value.input }) // console.log(this.data.userInfo) if (e.detail.value.input == "") { wx.showToast({ title: '需要微信名登录', icon: 'error', duration: 3000 }) return } else { if (app.globalData.userInfo.nickname == wx.getStorageSync("userInfo").nickname) {// console.log("昵称未变更") this.getToken() } else { // console.log("昵称已变更") wx.request({ url: app.globalData.url + 'api/sys_Login/User_WeChat', data: { openid: app.globalData.userInfo.openid, session_key: "", nickname: this.data.userInfo.nickname }, header: { "content-type": "application/json" }, method: 'POST', success: res => { // console.log(res.data); wx.setStorage({ key: 'userInfo', data: res.data, }) this.getToken() } }) } } }, })
转自 https://www.cnblogs.com/shiliumu/p/16929979.html
