微信小程序的登录与授权

微信小程序的登录与授权

• 最近学习了微信小程序,为了确保自己的学习效果,在此写下博客进行记录,如果有不足之处,希望大家给予指正与指导
• 在学习微信小程序的登录与授权之前,我们一定要先有个概念:这两者之间是没有联系的,微信小程序的登录可能是用户看不到的,但是小程序的授权一定是能够看到的.

微信小程序的登录

• 逻辑:用户打开小程序 ===> 代码查看本地是否拥有openid(有就直接使用) 没有 ===> 调用微信的登录接口,获取code码(code码拥有5分钟的有效期)发送至后台 ===> 后台访问微信服务器获取用户openid(由于本人水平有限,后台相关不尽兴赘述) ===> 返回给前端 ===>前端拿到openid,储存在本地进行使用
• js代码如下

// 微信登陆
var uid = wx.getStorageSync("uid");
if(!uid){
    wx.login({
        success(res) {
            // 成功返回 code 用户登录凭证（有效期五分钟）
            if (res.code) {
                // 将 code 码发送给后台
                wx.request({
                    url: 'http://xxxxxx',//后台API
                    data: {
                        code: res.code
                    },
                    success: function (res){
                        console.log(res);
                        wx.setStorageSync("uid",'res.data.data.id');
                    }
                })
            } else {
                console.log('登录失败！' + res.errMsg)
            }
        }
    })
}

• 这里需要提及的一点是,一个微信号的openid是唯一的

微信小程序用户信息的获取

• 逻辑:用户打开小程序 ===> 查看本地是否拥有用户信息
                                    ===> 有 直接使用
                                    ===> 没有 调用查看用户是否授权
                                                         ====>已授权 ===> 不显示button弹窗组件(这里指的是授权按钮) ===>调用API获取用户信息存到本地 ===>用户离开小程序一段时间内再次回来,直接从本地调用数据,增加用户的体验
                                                        ===>用户未授权 ===> 显示button组件,调用授权弹窗(获取用户信息,储存到本地)===>用户离开小程序再次进入后直接从本地调用数据

• js代码如下

onload: function (){
    var that = this;//这里的this指向page,如果调用wx的API,this指向会发生改变,所有提前使用变量进行保存
    var userInfo = wx.getStorageSync("userInfo");//从本地获取用户数据
    if(userInfo){	//如果本地有直接调用
      this.setData({
        userInfo: userInfo
      })
    }else{
      // 查看是否授权
      wx.getSetting({
        success(res) {
          // 如果已经授权,查看是否是获取用户信息授权 res.authSetting['scope.userInfo'] 这里需要注意要是用读取对象属性的另一种方式即使用"[]",因为'scope.userInfo'是一个属性名
          if (res.authSetting['scope.userInfo']) {
            // 已经授权，可以直接调用 getUserInfo 获取头像/昵称/性别/地址
            wx.getUserInfo({
              success: function (res) {
                // 设值
                that.setData({
                  userInfo: res.userInfo
                })
                // 存储到本地
                wx.setStorageSync("userInfo", res.userInfo)
              }
            })
          }else{
            // 未授权,显示button授权按钮
            that.setData({
              isShow: true
            })
          }
        }
      })
    }
}

• wxml代码如下

<!-- 需要使用 button 来授权登录 -->
<button wx:if="{{canIUse && isShow}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" class="btn">授权登录</button>
<view wx:elif="{{!canIUse && isShow}}">请升级微信版本</view>
<!-- 需要注意:在页面的js的page下的data中配置canIUse: wx.canIUse('button.open-type.getUserInfo'),表示能否使用button组件调用微信的开放功能,具体详见官方API -->

只需获取头像用户名的需求

• 面对这种需求,可以使用小程序内置的<open-data /> 组件

<!-- 如果只是展示用户头像昵称，可以使用 <open-data /> 组件 -->
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>