Mini program guides user authorization ideas and project implementation methods (with code)

What this article brings to you is about the ideas and project implementation methods for mini programs to guide user authorization (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .

User information authorization

For users who are not authorized by the mini program, the official cancels the direct call of the wx.getUserInfo method. The first authorization must actively trigger the custom button before the official authorization component can be activated

The information that can be obtained is: nickname, avatar, gender, country, province, city, gender, language

Things and steps

1. wx.getSetting to check whether it is authorized

2. Authorized to use wx.getUserInfo to obtain user information, save

3. Unauthorized to display a custom page with button, bindGetUserInfo will return user information, and the button will call WeChat official authorization

<button>允许用户授权</button>

4. Authorization is completed and user information is saved

Project implementation

1.app.js----I put it after the login method

// 查看是否授权,保存授权状态
    wx.getSetting({
        success: function(res) {
            if (res.authSetting['scope.userInfo']) {
                wx.setStorageSync('isAuthorize', 'true');
                wx.getUserInfo({
                    success: function(res) {
                        wx.setStorageSync('userInfo', res.rawData);
                    }
                })
            } else {
                wx.setStorageSync('isAuthorize', 'false');
            }
        }
    })

2.main .wxml------Project main page

<!-- 小程序授权组件 -->
<authorize></authorize>

3, main.js------onload to determine whether to display a custom button

// 已授权隐藏弹框，未授权显示弹框
this.authorize = this.selectComponent("#authorize");
if (wx.getStorageSync('isAuthorize')=='true'){
    this.authorize.hideDialog()
}

4,main .json-----Main page configuration parameters

"usingComponents": {
    "authorize": "自定义授权组件的路径"
}

5. authorize.js------Customize the page/pop-up component with button authorize, only the js part is posted here

/*authorize.js*/
Component({
    options: {
        multipleSlots: true
    },

    data: {
        isHide: false,
        canIUse: wx.canIUse('button.open-type.getUserInfo')
    },

    methods: {

        //隐藏弹框
        hideDialog() {
            this.setData({
                isHide: true
            })
        },
        // 授权信息保存
        bindGetUserInfo(e){
            wx.setStorageSync('isAuthorize', 'true');
            wx.setStorageSync('userInfo', JSON.stringify(e.detail.userInfo));
            this.hideDialog()
        }

    }
})

This way the entire authorization is completed!

The above is the detailed content of Mini program guides user authorization ideas and project implementation methods (with code). For more information, please follow other related articles on the PHP Chinese website!