1. 程式人生 > >小程式引導使用者授權獲取使用者資訊的方法

小程式引導使用者授權獲取使用者資訊的方法

現在使用 wx.getUserInfo 是不會在出現獲取使用者資訊彈框的 官方文件上面是要引導使用者授權 但是具體方法沒有詳細列出,只是說使用

這裡我將說一下引導使用者授權的詳細方法  先上圖

以下所有的程式碼僅供參考,app.js中程式碼量太大我都是區域性複製出來的

第一步

先要製作一個頁面,把這個頁面當做你小程式一開啟展示給使用者的頁面  在app.json 檔案中把  這個頁面路徑寫在 pages 下第一行  。

<view class="container">
    <view class="login-icon">
        <image class="login-img" src="/images/bg2.png" style="width:{{windowWidth+'px'}};height:{{windowHeight+'px'}}"></image>
    </view>
    <!--按鈕-->
    <view class="loginBtnView">
        <text>申請獲取以下許可權</text>
        <text>獲取你的公開資訊(暱稱.頭像等)</text>
        <button class="loginBtn" bindgetuserinfo='getUserInfo'  open-type='getUserInfo'>授權登入</button>
    </view>
</view>

 

第二部在app.js獲取code。 具體如下

    //獲取使用者資訊,
     // 小程式一開啟先會執行app.js中的onLaunch函式 定義userinfo變數儲存所有使用者資訊的 獲取user這個快取的內容
    onLaunch(options) {
        var _this=this
        var userinfo = wx.getStorageSync('user');
        // 如果不存在 呼叫getUserInfo()函式獲取code值
        if (!userinfo) {
            this.getUserInfo();
        } else {
            // 如果存在 全域性變數userInfo = wx.getStorageSync('user');快取值中的內容
            this.globalData.userInfo = JSON.parse(userinfo);
        }
   
    },
//此函式是為了判斷使用者有沒有獲取 臨時登入憑證code 通過code才能在獲取 session_key 和 openid 等。
    getUserInfo: function (cb) {
        var that = this
        if (this.globalData.userInfo.code) {
            typeof cb == "function" && cb(this.globalData.userInfo)
        } else {
            wx.login({
                success: function (res) {
                    //獲取code 並把它儲存到globalData中
                    var code = res.code;
                    _this.globalData.code = code
                }
            });
        }
    },

第三步 就是在 第一步建的的這個頁面中來響應 授權 具體如下:

var app = getApp();
Page({

    /**
     * 頁面的初始資料
     */
    data: {
 
    },

    /**
     * 生命週期函式--監聽頁面載入
     */
    onLoad: function(options) {
        // 當code獲取到後 就可以直接跳轉到你的小程式主頁了 我的小程式主頁是pages下的index
        if (app.globalData.userInfo.code) {
            wx.redirectTo({
                url:'/pages/index',
            })
        }
    },

    /**
     * 獲取使用者資訊
     */

    getUserInfo(res) {
        app.globalData.userInfo = res.detail.userInfo;
        app.globalData.userInfo.iv = res.detail.iv;
        app.globalData.userInfo.encryptedData = res.detail.encryptedData;
        app.globalData.userInfo.signature = res.detail.signature;
        app.globalData.userInfo.code = app.globalData.code;
        // 把獲取的使用者資訊放在本地快取中
        wx.setStorageSync('user', JSON.stringify(app.globalData.userInfo));
    },

這裡我把 我的app.js 中globalData的內容給大家看下 。只要是小程式經常用到的變數都可以儲存到裡面

好了以上就是引導使用者授權獲取使用者資訊的步驟,有什麼不清楚的,或者更好的方法可以留言