关于小程序授权问题

最近在做一个直播的小程序，前前后后一个月，踩了不少坑，有时间一个一个整理下，方便自己以后查阅。

小程序中设计直播、社区，所以登陆和授权肯定是第一步，万丈高楼平地起，关于登陆小程序官方文档给出了自己的一套流程，文档传送门小程序登陆。

关于登陆

1. 调用 wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。
2. 调用 code2Session 接口，换取 用户唯一标识 OpenID 和 会话密钥 session_key。

以上是小程序文档关于登陆的介绍，实际项目中我和后端对接首先将code发动到后台拿到openId, sessionKey, unionId 然后得到后台回传给我的一个memberid记录当前用户编号，然后再讲用户的基本信息传到后台的member表。具体可看如下代码：

wx.login({
    success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        let code = res.code
        ajax.request({
            method: "POST",
            url: "weixin/getsessionkey",
            data: {
                code: code
            },
            success: (res) => {
                this.globalData.memberid = res.memberid
                wx.setStorageSync("memberid", res.memberid)
                if (this.globalData.userInfo === null) {
                } else {
                    let userInfo = this.globalData.userInfo
                    ajax.request({
                        method: "POST",
                        url: "member",
                        data: {
                            id: this.globalData.memberid,
                            nickname: userInfo.nickName,
                            headimgurl: userInfo.avatarUrl,
                            city: userInfo.city,
                            country: userInfo.country,
                            sex: userInfo.gender
                        },
                        success: (res) => {
                                    
                       }
                   })
                }
            }
        })
    }
})

关于授权

以前小程序的授权比较简单，开发者可以使用 wx.authorize 在调用需授权 API 之前，提前向用户发起授权请求。但是后来据说是为了更好的用户体验，让用户主动触发授权申请更优雅一点，于是便出现了现在这个蛋疼的授权体验，我要拿到用户需要用户主动触发，如果多个页面多个地方需要获取用户的昵称或者头像比较蛋疼，都要做判断！！！

好吧，上有政策下有对策，每个都去写判断肯定是不可能的，脑瓜子不行也没有大神的脑回路怎么办呢？找度娘求一卦，于是自己给自己加戏，搞了个welcome页面，用户进来如果没授权就跳到welcome页面，如下图：

点击开始使用弹出授权请求，如果这个用户和你死磕，就是不同意，咋整？小样，想给自己加戏，no，no，no，不可能给你加戏的，于是便出现了如下操作：

用户拒绝授权之后直接强行提示重新授权，好吧！可能用户体验不是很好，但是咱们毕竟是个直播＋社区类型的，你说你头像和昵称都不给我，那咱们怎么愉快的玩耍，是吧？强行给自己找理由，哈哈！！！具体代码实现如下：

//app.js中
    // 获取用户信息
    wx.getSetting({
        success: res => {
        // 已经授权
            if (res.authSetting['scope.userInfo']) {
                // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
                wx.getUserInfo({
                    success: res => {
                        if (res.userInfo) {
                            wx.switchTab({
                                url: '/pages/live/live',
                            })
                        }
                        // 可以将 res 发送给后台解码出 unionId
                        this.globalData.userInfo = res.userInfo
                        // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
                        // 所以此处加入 callback 以防止这种情况
                        if (this.userInfoReadyCallback) {
                            this.userInfoReadyCallback(res)
                        }
                    }
                })
            } else {
                // 未授权
                wx.reLaunch({
                    url: '/pages/welcome/welcome',
                })
            }
        }
    })

// welecome.wxml中
<view class="welcome">
    <image class="logo" src='./images/0.jpg'></image>
    <text class="text">{{defaultText}}</text>
    <button type="primary" open-type="getUserInfo" bindgetuserinfo="getUserInfoTap">
    {{defaultButton}}
    </button>
</view>

//welcome.js中
// 是否授权
    getUserInfoTap (event) {
        // 点击同意
        if (event.detail.userInfo) {
            app.globalData.userInfo = event.detail.userInfo
            let userInfo = app.globalData.userInfo
            let memberid = app.globalData.memberid
            ajax.request({
                method: "POST",
                url: "member",
                data: {
                    id: memberid,
                    nickname: userInfo.nickName,
                    headimgurl: userInfo.avatarUrl,
                    city: userInfo.city,
                    country: userInfo.country,
                    sex: userInfo.gender
                },
                success: (res) => {
                    console.log(res)
                }
            })
            wx.reLaunch({
                url: '/pages/live/live',
            })
        } else {
            this.setData({
                defaultText: '为保证您的正常使用,请进行授权!',
                defaultButton: '重新授权'
            })
        }
    }

上面两端代码即可解决新版小程序中的授权问题，不过在跳到live主页中时，可能由于异步请求的原因，memberid并没有第一时间更新，这里有一个小小的坑，就是让memberid在wx.login中用wx.setStorageSync("memberid", res.memberid)存一次，然后在首页onLoad的时候去读取wx.getStorageSync("memberid")就好了。

当然相对来说用户体验可能不如以前好，如果有大神有更好的办法，欢迎留言，如有错误，欢迎指正！！！