微信小程序~wx.getUserInfo逐渐废弃，小程序登录过程将如何优化？

Posted 2020-11-01 ￡AP︶ㄣOL◢◤LO

很多的时候我们在做小程序应用的时候，希望用户在使用小程序前进行登录授权，之前登录后通过wx.getUserInfo直接弹出授权的登录方式官方的意思是将不再支持，而是让用户通过下面的方式授权用户信息

<button open-type="getUserInfo" bindgetuserinfo="getUserInfoAction">授权用户信息</button>

这样的话当小程序在使用前一定需要用户登录，或者已经进行到需要用户登录的操作时；这样的话就需要一个button授权页面。这种改变，感觉个人还是喜欢默认弹层的的授权方式，这个方式可能一时不适应吧，有种排斥。

下面是通过button授权的方式做的一个登录：这里我只是展示了login.js 与 index.js 过程，需要代码的留言或者进群

login.js

const ajax = require("../../common/ajax.js")
const tips = require("../../common/tips.js")
Page({
  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this;
    
  },
  getUserInfoAction(res){
    let that = this;
    const encryptedData = res.detail.encryptedData;
    const iv = res.detail.iv;

    if (encryptedData && iv){
      // console.log("允许")
      that.login().then((login)=>{

        const params = {
          "code": login.code,
          "encryptedData": encryptedData,
          "iv": iv,
          "type": "small_wechat"
        }

        ajax.posts(params, "api/passport/thirdSign").then((res) => {
         
          let userinfo = {
            avatar: res.data.data.avatar,
            nickname: res.data.data.nickname,
            token: res.data.data.token,
            user_id: res.data.data.user_id
          }
          wx.setStorageSync("userinfo", userinfo);

          // console.log(wx.getStorageSync("userinfo"));
          if (wx.getStorageSync("userinfo")){
            wx.redirectTo({
              url: ‘/page/index/index‘
            })
          }
          

          
        }).catch((errMsg) => {
          tips.showToast("网络连接失败", "none")
          console.log(errMsg)
        })

      }).catch((errMsg) => {
        console.log("登录:" + errMsg)
      })

    }else{
      // console.log("拒绝")
      tips.showToast("请授权公开信息,登录小程序", "none")
    }

  },
  login(){
    // 登录
    let promise = new Promise((resolve, reject) => {
      wx.login({
        success: function (res) {
          if (res.code) {
            resolve(res)
          } else {
            tips.showToast("登录失败", "none")
          }
        },
        fail: function (err) {
          reject(err)
        }
      })

    })
    return promise;
  }
})

index.js

const tips = require("../../common/tips.js")
Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this;
    if (!wx.getStorageSync("userinfo")) {
      //是否登录
      that.isloginindex()
    }

  },
  isloginindex() {
    //是否进入首页
    if (wx.getStorageSync("userinfo")) {
      console.log("登录")
    } else {
      //无信息
      console.log("否登录")
      wx.redirectTo({
        url: ‘/page/login/login‘
      })
    }
  }
})

 

 通过button open-type="getUserInfo"的方式授权登录小程序流程，还没有想到一个更好的办法，目前是这么干的；如果有不对或者更好方式的欢迎指正或者一起交流