WeChat 登录页面

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()
                    }
                })
            }
        }
    },

})