微信小程序获取手机号详细过程（新版本2.21.2）（旧版本兼容）

新版本2.21.2以后获取微信小程序手机号

首先你要确保自己的基础库版本是2.21.2，我选择的是当前最新的

在button的文档描述

在代码开始前给大家讲讲注意事项（不需要直接往下看）

然后接下来是项目代码
WXML

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button>

样式的话自己按需要设置

通过微信小程序官方api获得回调内容

已经会出现这个页面了
注意如果是个人小程序是不会出现回调的，但是依旧会弹出这个允许拒绝页面下面是回调内容
长这个样子

JS

  //点击获取手机号码按钮
  getPhoneNumber(e) {
    wx.request({
      url: 'url',
      data:{
        code:e.detail.code,
      },
      success: (res)=>{
        this.setData({
          mobilePhone: res.data.purePhoneNumber,
        })
      }
    })
  },

不需要做wx.login的处理，只需要将code传给后端即可

老版本兼容获取手机号

WXML

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button>

首先我们需要调用wx.login获取到code码
用于调用后端接口获取session_key
JS

//获取js_code
wx.login({
  success (res) {
    console.log(res.code);
  }
})

wx.login一般用于onshow或者onload的生命周期里面，因为如果放在调用函数里面，获取手机号的过程会有稍稍顿挫的缓慢感，所以需要提前调用wx.login，你也可以放在app.js里面的onlanuch

sessionkey的有效期是三天，我们需要后端接口去获取，提交code给后端，返回sessionkey

  onLoad(options) {
    wx.login({
      success: (res) => {
        wx.request({
          url: '后端提供api url',
          data: { code: res.code },
          success: function (res) {
            console.log(res)
            that.setData({
              sessionkey: res.data.session_key,
              openid: res.data.openid
            })
          }
        })
      }
    })
  },

然后通过button回调获取encryptedData ,iv

非完整代码

  getPhoneNumber(e) {
	let appId = 开发者appid
	let sessionKey = 获取的sessionkey
	let encryptedData = encryptedData
	let iv = iv
  },

有了以上信息我们就可以解密了，如果后端做一个接口，我们在下方调用传递接口数据即可

  getPhoneNumber(e) {
	let appId = 开发者appid
	let sessionKey = 获取的sessionkey
	let encryptedData = e.detail.encryptedData
	let iv = e.detail.iv
        wx.request({
          url: 'url',
          data: { 
          appId : 'appid',
		sessionKey,
		encryptedData,
		iv,
 },
          success: function (res) {
			    console.log(res)
          }
        })
  },

如果后端没有写接口，我们也可以解密，不涉及到安全问题，因为你获取的操作都是在用户端实现的
手机号码解密使用的是 CryptoJS 包，点击下载CryptoJS 包
WXBizDataCrypt.js文件

/**
 * Created by rd on 2017/5/4.
 */
// 引入CryptoJS  路径依个人导入情况变动
var Crypto = require('./cryptojs-master/cryptojs.js').Crypto;
var app = getApp();
function RdWXBizDataCrypt(appId, sessionKey) {
  this.appId = appId
  this.sessionKey = sessionKey
}
RdWXBizDataCrypt.prototype.decryptData = function (encryptedData, iv) {
  // base64 decode ：使用 CryptoJS 中 Crypto.util.base64ToBytes()进行 base64解码
  var encryptedData = Crypto.util.base64ToBytes(encryptedData)
  var key = Crypto.util.base64ToBytes(this.sessionKey);
  var iv = Crypto.util.base64ToBytes(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)
  }
  return decryptResult
}

module.exports = RdWXBizDataCrypt

将文件规范放在utils里面
然后需要使用的页面就

let WXBizDataCrypt = require('路径自己改/utils/WXBizDataCrypt')

完整使用代码

let WXBizDataCrypt = require('路径自己改/utils/WXBizDataCrypt')
Page({
  onLoad(options) {
    wx.login({
      success: (res) => {
        wx.request({
          url: 'url',
          data: { code: res.code },
          method: 'POST',
          header: {
            'content-type': 'application/json'
          },
          success: function (res) {
            console.log(res)
            that.setData({
              sessionkey: res.data.session_key,
              openid: res.data.openid
            })
          }
        })
      }
    })
  },
  getPhoneNumber(e) {
    let appId = 开发者appid
    let sessionKey = 获取的sessionkey
    let encryptedData = e.detail.encryptedData
    let iv = e.detail.iv
    let pc = new WXBizDataCrypt(appId,sessionKey)
    let res = pc.decryptData(encryptedData ,iv)
    console.log(res)
    },
})