WeChat 애플릿이 WeChat 인증 창을 호출합니다.

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 open-type="getUserInfo" bindgetuserinfo="你自己定义函数"></button>

<block wx:if="{{!hasUserInfo}}">
    <image src=&#39;../../images/icon/wechat.png&#39;></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
    }
}

re2는 승인 창이 팝업 할 수 없습니다. 여기서주의를 기울여야합니다. 한 번만 나타납니다! !

　WeChat 애플릿 개발 도구에서는 모든 캐시를 지워야 합니다

　

3.사용자가 승인되면 버튼이 표시되지 않습니다

app.js는 사용자가 인증 버튼을 클릭할 때가 아니라 사용자의 개인 정보를 획득하지만 이 프로세스는 비동기식입니다.

{{!hasUserInfo}}의 실제 값을 기준으로 승인 버튼의 모양이 판단되는 것을 볼 수 있습니다. 이 값은 app.js가 정보를 얻었는지 여부에 따라 할당될 수 있습니다.

<block wx:if="{{!hasUserInfo}}">
    <image class="userAvatar" src=&#39;../../images/icon/wechat.png&#39;></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에 콜백 함수가 있는 것을 확인했습니다. 이 함수는 비동기 문제를 해결하는 데 사용됩니다. 　추천 튜토리얼: "WeChat 미니 프로그램"

위 내용은 WeChat 애플릿이 WeChat 인증 창을 호출합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!