原生小程序实现登录授权与封装统一调用接口

一。登录思路

先通过 wx.login 返回 res.code 到后台接口换取 openId, sessionKey, unionId。然后通过 wx.getUserInfo 获取用户信息

如果要获取用户敏感信息则要 wx.getUserInfo 返回的数据传到后台进行解析(我这边是用大佬封装好的api进行解析 )。

 

二。代码

1。小程序封装统一请求接口

function Request(url, param, method, isJson) {
  const resUrl = wx.getStorageSync('url') + url;
  return new Promise((resolve, reject) => {
    wx.request({
      url: resUrl,
      data: param,
      header: {
        'content-type': isJson ? 'application/json' : 'application/x-www-form-urlencoded'
      },
      method: method,
      dataType: 'json',
      responseType: 'text',
      success: function (res) {
        // console.log("返回结果------")
        // console.log(res)
        resolve(res.data)
      },
      fail: function (err) {
        // console.log("请求失败:" + err.errMsg)
        wx.showToast({
          title: '请求失败',
          icon: 'none',
          duration: 2000,
          mask: true
        })
      }
    })
  }).then((resData) => {
    return resData;
  })
}
module.exports = {
  Request: Request
}
 
2。创建一个api包专门区别放调用后台接口,我这个是api包里的user.js
const requests = require("../utils/request.js")
module.exports = {
  // 登录
  wxLogin: (data) => {
    return requests.Request("/wx/login/wx-login.json", { jsCode: data }, 'post', true);
  },

  //获取用户信息
  getUserInfo: (data) => {
    return requests.Request("/wx/login/get-user-info.json", data, 'post', true);
  },

  //获取用户手机号
  getUserPhone: (data) => {
    return requests.Request("/wx/login/get-user-phone.json", data, 'post', true);
  }
}
 
3.修改下app.js
const userRequest = require("/api/user.js")
App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    wx.setStorageSync('url', "http://localhost:8087");

    this.getUserInfo();
  },
  onShow() { },
  getUserInfo() {
    let that = this;
    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        userRequest.wxLogin(res.code).then((res) => {
          if (res.code === "SUCCESS") {
            wx.setStorageSync('sessionKey', res.data.sessionKey);
            that.globalData.userInfo = res.data.wxUser;
            // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
            // 所以此处加入 callback 以防止这种情况
            if (that.userInfoReadyCallback) {
              that.userInfoReadyCallback(res.data.wxUser)
            }
          } else {
            wx.showToast({
              title: '登录失败',
              icon: 'none',
              duration: 2000,
              mask: true
            })
          }
        });
      }
    })
  },
  globalData: {
    userInfo: null
  }
})
 
4.别的页面调用
onLoad: function () {
    let that = this;
    wx.getSetting({
      success: function (res) {
        if (res.authSetting['scope.userInfo']) {
          //用户授权了
          that.setData({
            isShowAuth: false
          })
          that.initData();
        } else {
          //用户还没授权,弹出授权窗
          that.setData({
            isShowAuth: true
          })
        }
      }
    })
  }
 
5.
GG-伏沙金
posted @ 2020-10-14 18:29  伏沙金  阅读(539)  评论(0编辑  收藏  举报