微信小程序踩坑日记1——调用微信受权窗口

0. 引言

　　微信小程序为了优化用户体验，取消了在进入小程序时立马出现受权窗口。须要用户主动点击按钮，触发受权窗口。

　　那么，在我实践过程当中，出现了如下问题。

1. 没法弹出受权窗口
2. 但愿在用户已经受权的状况下，不显示按钮

1. 具体实现

　　app.js的onLaunch()函数中，添加获取用户我的信息的代码段。实如今用户已经受权的状况（例如第二次打开小程序时）下，自动获取用户我的信息，而不须要用户的受权。

// 获取用户信息
wx.getSetting({
    success: res => {
        if (res.authSetting['scope.userInfo']) {
            console.log("app: " + "用户已经受权")
            // 已经受权，能够直接调用 getUserInfo 获取头像昵称，不会弹框
            wx.getUserInfo({
                success: res => {
                    // 能够将 res 发送给后台解码出 unionId
                    this.globalData.userInfo = res.userInfo
                    console.log(this.globalData.userInfo)
                    this.globalData.hasUserInfo = true
                    // 因为 getUserInfo 是网络请求，可能会在 Page.onLoad 以后才返回
                    // 因此此处加入 callback 以防止这种状况
                    if (this.userInfoReadyCallback) {
                        this.userInfoReadyCallback(res)
                    }
                },
                fail: (res) => {
                    console.log("app: " + "获取用户信息失败")
                }
            })
        }else {
            console.log("app: " + "用户暂时未受权")
        }
    }
})

　　me.wxml中添加受权按钮（具体的页面根据你们的实际状况）。这里的button组件必须按照以下的形式。

<button open-type="getUserInfo" bindgetuserinfo="你本身定义函数"></button>

<block wx:if="{{!hasUserInfo}}">
    <image src='../../images/icon/wechat.png'></image>
    <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">微信受权登陆</button>
</block>

　　效果这样，具体的样式根据你们的喜爱更改

 

　　me.js中添加以下变量和方法，在用户以前没有受权的状况下，须要用户主动点击按钮。

data: {
    userInfo: null,
    hasUserInfo: false
},
getUserInfo: function(e) {
    console.log("me: " + "用户点击受权")
    if(e.detail.userInfo){
        this.setData({
            userInfo: e.detail.userInfo,
            hasUserInfo: true
        })
        app.data.userInfo = this.userInfo
        app.data.hasUserInfo = true
    }
}

2. 没法弹出受权窗口

　　

　　这里必定要注意

　　受权窗口只会在用户第一次受权时出现，也就是，只会出现一次！！

　　在微信小程序开发工具里，须要咱们清除全部缓存

　　

3. 已经受权的状况下，不显示按钮

　　因为用户已经受权的时候，app.js会获取用户我的信息（而不是在用户点击受权按钮时获取），可是这个过程是异步的。

　　能够看到咱们的受权按钮的出现时根据{{!hasUserInfo}}的真值来判断，这个值能够经过app.js是否获取了信息来赋值。

<block wx:if="{{!hasUserInfo}}">
    <image class="userAvatar" src='../../images/icon/wechat.png'></image>
    <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">微信受权登陆</button>
</block>

　　可是，可能出现用户已经受权了，可是app.js获取我的信息时过慢，然而咱们的受权按钮却错误的觉得app.js没有获取到信息，因此将受权按钮渲染了出来。

　　这时，咱们但愿，在app.js判断用户已经受权且获取到信息后，告诉咱们的受权按钮。

　　咱们在me.js中添加以下代码段。

onLoad: function() {
    // 获取我的信息
    if(app.globalData.userInfo){
        this.setData({
            userInfo: app.globalData.userInfo,
            hasUserInfo: true
        })
    }else{
        // 在app.js没有获取到信息时，判断app.js的异步操做是否返回信息
        app.userInfoReadyCallback = res => {
            this.setData({
                userInfo: app.globalData.userInfo,
                hasUserInfo: true
            })
        }
    }
}

　　为何这里会有个app.userInfoReadyCallback函数呢，咱们注意到在app.js的wx.getSetting里有一段回调函数，这个函数就是用来解决异步的问题。