微信小程序登录

直接通过wx.login生成的code+wx.getUserProfile的用户信息进行后台查找登录

登录流程图

image.png

// 1，先获取用户信息，必须通过tap事件触发获取
<view class="button-auth" @tap="onGetUserProfile">允许微信授权公开信息</view>
uni.getUserProfile({
                        desc: '获取信息用于登录',
                        lang: 'zh_CN',
                        success: function(res) {
                            console.log('success', res.userInfo)
              self.userInfo = {...self.userInfo, ...res.userInfo}
                        },
                        fail: function(error) {
                            console.log('error', error)
                        },
                        complete: function(com) {
                        }
                    })

通过vuex封装 方便调用，事件必须通过tap方式触发

image.png

在和wx.login方法的code数据合并去后台获取登录用户数据

uni.login({
                    provider: 'weixin',
                    success: function(loginRes) {
                        const code = loginRes.code
                        console.log('login', loginRes, code)
                        self.$api.getOpenIdByCode(code, self.userInfo).then(resp => {
                            console.log('xxxxxxx', resp)
                        })
                    },
                    fail: function(err) {
                        // 登录授权失败
                        // err.code是错误码
                        console.log('login 授权失败', err)
                    }
                });

通过获取手机号进行登录

参考官方介绍
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html
1.先小程序去获取认证
设置--基本设置--微信认证（通过了才能够获取手机号的权限）

image.png
2.通过上面认证后才有下面获取手机权限

<button class="button-auth" open-type="getPhoneNumber"
                    @getphonenumber="onLogoInByWeixin">允许获取微信绑定手机号</button>

onLogoInByWeixin(e){
      // 将加密的e.detail.code
    传递给后台服务：getuserphonenumber 将加密手机号处理明码手机号，然后后台查询相关手机号的账号信息
https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/phonenumber/phonenumber.getPhoneNumber.html#%E8%AF%B7%E6%B1%82%E5%9C%B0%E5%9D%80
}