[移动开发]小程序 ---- （获取手机号码）

小程序 ---- （获取手机号码）

一、获取session_key

验证登录状态，获取openid和session_key。

由于目前小程序没有提供API可以调用获取手机号码，所以如果想要获取手机号码只能是，就先要在app.js检测用户登录状态，如果没有登录或者状态过期了，就跳转到login页面，引导用户点击button调用按钮的API，即open-type=“getPhoneNumber” bindgetphonenumber=“getPhoneNumber”

app.js如下

let that = this;
// 验证登录
wx.checkSession({
  success: (res) => {},
  fail: () => {
    wx.login({
      success: res => {
        if (res.errMsg == 'login:ok') {
          wx.request({
            url: `https://api.weixin.qq.com/sns/jscode2session?appid=你的小程序appid&secret=你的小程序secret&js_code=${res.code}&grant_type=authorization_code`,
            method: 'GET',
            success: (result) => {
              // 这里可以把数据存在Storage里面，也可以这样直接用，我们选择后者
              that.globalData.userinfo.openid = result.data.openid;
              that.globalData.userinfo.session_key = result.data.session_key;
              wx.navigateTo({
                url: '/pages/login/index',
              })
            }
          })
        }
      }
    })
  }
})

login.wxml如下：

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">登录</button>

二、解析手机号码

看一下官方的用法获取到的数据：

这里拿到两个数据，用户手机号码就隐藏在这两串数据里面，我们参考一下官方的说明，看要如何进行解密

获取的结果：

参考官方的说明，发现都是Base64_Decode，故我们选择crypto.js进行数据分析：

点击下载crypto.js，然后将文件放置在文件夹里面，路径如下：

封装解密的crypto.js文件，放置于utils文件夹里面：

crypto.js的代码如下：

var Crypto = require('./cryptojs/cryptojs.js').Crypto;
var app = getApp();
function CRYPOT(appId, sessionKey) {
    this.appId = appId
    this.sessionKey = sessionKey
}
CRYPOT.prototype.decryptData = function(encryptedData, iv) {
    // base64 decode ：使用 CryptoJS 中 Crypto.util.base64ToBytes()进行 base64解码
    var encryptedData = Crypto.util.base64ToBytes(encryptedData)
    // console.log(sessionKey)
    var key = Crypto.util.base64ToBytes(this.sessionKey);
    var iv = Crypto.util.base64ToBytes(iv);
    // console.log(encryptedData,key,iv)
    // 对称解密使用的算法为 AES-128-CBC，数据采用PKCS#7填充
    var mode = new Crypto.mode.CBC(Crypto.pad.pkcs7);
    try {
        // 解密
        var bytes = Crypto.AES.decrypt(encryptedData, key, {
            asBpytes: true,
            iv: iv,
            mode: mode
        });
        var decryptResult = JSON.parse(bytes);

    } catch (err) {
        console.log(err)
    }
    if (decryptResult.watermark.appid !== this.appId) {
        console.log(err)
    }
    return decryptResult
}
module.exports = CRYPOT

login.js如下：

getPhoneNumber(e) {
  if (e.detail.errMsg == 'getPhoneNumber:ok') {
    let phone = e.detail.encryptedData;
    let iv = e.detail.iv;
    const CRYPOT= require('../../utils/crypot.js');
    const cp = new CRYPOT('你的小程序appid', app.globalData.userinfo.session_key);
    const data = cp .decryptData(phone, iv);
    app.globalData.userinfo.phone = data.phoneNumber;
    // 这里request是自己封装的网络请求模块，下面会分享出来，用wx.request也可以
    request('/login',{phoneNum: data.phoneNumber},'GET')
    .then(res => {
      wx.setStorageSync('token', res.data.data)
      wx.showToast({
        title: '登录成功',
      })
      setTimeout(()=> {
        wx.navigateBack({
          delta: 1,
        })
      },1000)
    })
  } else {}
},

以上就可以获取用户手机号码进行登录了，下面分享request.js。

这里哔哔两句，公司的辣鸡后端这些都不做，要前端做，踏马了个巴子的，无了个大语！

exports.request = function (requestMapping, data, requestWay, contentType) {
  wx.showLoading({
    title: '请稍后',
  })
  return new Promise(function (resolve, reject) {
    wx.request({
      url: 'http://159.75.41.107:8082' + requestMapping,
      data: data,
      header: {
        'content-type': contentType || "application/x-www-form-urlencoded", // 默认值
        'token': wx.getStorageSync('token')
      },
      timeout: 3000,
      method: requestWay,
      success(res) {
        //console.log(res)
        if (res.data.success == false || res.data.statusCode == 404) {
          reject(res)
        } else {
          resolve(res)
        }
      },
      fail: (e) => {
        wx.showToast({
          title: '连接失败',
          icon: 'none'
        })
      },
      complete: () => {
        wx.hideLoading()
      }
    })
  })
}