小程序： getPhoneNumber功能详解，获取手机号登录 2019
##内容
1.效果图
2.前端页面组件书写
3.JS内组件用法
4.接口文件内容
1.效果图：
2.小程序前端页面
使用小程序button按钮，按照官方文档写的，无需修改。官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/button.html
3. 小程序js写法，此处代码直接复制即可，根据自己需求修改
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
//通过绑定手机号登录
getPhoneNumber: function (e) {
var ivObj = e.detail.iv
var telObj = e.detail.encryptedData
var codeObj = "";
console.log(e);
var that = this;
//------执行Login
wx.login({
success: res => {1
wx.request({
url: that.globalData.API_URL + '/index/login/login', //接口地址
data: {
code: res.code,
encryptedData: telObj,
iv: ivObj
},
header: {
'content-type': 'application/json' // 默认值
},
success: function (res) {
phoneObj = res.data.phoneNumber;
openid = res.data.openid;
console.log("手机号=", phoneObj)
wx.setStorage({ //存储数据并准备发送给下一页使用
key: "phoneObj",
data: res.data.phoneNumber,
})
}
})
//-----------------是否授权，授权通过进入主页面，授权拒绝则停留在登陆界面
if (e.detail.errMsg == 'getPhoneNumber:fail user deny') { //用户点击拒绝
wx.navigateTo({
url: '../index/index',
})
} else { //授权通过执行跳转
wx.navigateTo({
url: './personal',
})
}
}
});
//---------登录有效期检查
wx.checkSession({
success: function () {
//session_key 未过期，并且在本生命周期一直有效
},
fail: function () {
// session_key 已经失效，需要重新执行登录流程
wx.login() //重新登录
}
});
},
globalData: {
API_URL: '你的后端请求地址'
}
})
4.后端接口代码，此处为php开发，只放核心代码
public $appid;
public $secret;
public $access_token;
public function _initialize()
{
$this->appid = 'wx*********';
$this->secret = '44a***********';
}
public function index(){
}
/*
* 登录获取微信用户的手机号
* 微信请求：get
* 参数：code、iv、encryptedData
* 返回信息：phoneNumber等
* curl方法：自定义
* appid、secret等需要填写你自己的
* */
public function login(){
//接收微信传过来的参数
$code = input('code/s');
$iv = input('iv/s');
$encryptedData = input('encryptedData/s');
//检测参数是否存在
if (empty($code) || empty($iv) || empty($encryptedData)){
return json_encode(['code'=>2,'msg'=>'code参数未传','data'=>[]],JSON_UNESCAPED_UNICODE);
}
//1.先通过code获取session_key,保证key可用
$uri = 'https://api.weixin.qq.com/sns/jscode2session?appid='.$this->appid.'&secret='.$this->secret.'&js_code='.$code.'&grant_type=authorization_code';
$info = Curl::get($uri);
$info = json_decode($info,true,JSON_UNESCAPED_UNICODE);
//2.通过得到的session_key 以及微信传过来的参数解密，获取手机号
$result = $this->getPhone($info['session_key'],$iv,$encryptedData);
//存储用户信息
$user = new Users();
$param['openid'] = $info['openid'];
$param['session_key'] = $info['session_key'];
$param['phone'] = $result['phoneNumber'];
//检测用户是否第一次登陆
$exist = $user->getInfoByOpenId($param['openid']);
if(empty($exist)){
//首次新增
$user->addUser($param);
$info['uid'] = $user->getLastInsID();
}else{
//非首次，修改用户信息
$data['id'] = $exist['id'];
$data['session_key'] = $info['session_key'];
$data['phone'] = $result['phoneNumber'];
$user->editUser($data);
$info['uid'] = $exist['id'];
}
$info['phoneNumber'] = $result['phoneNumber'];
return json_encode(['code'=>1,'msg'=>'登录成功！','data'=>$info],JSON_UNESCAPED_UNICODE);
}
//解密，获取手机号
public function getPhone($session_key,$iv,$encryptedData){
import('WxBizDataCrypt',EXTEND_PATH);
$wx = new \WXBizDataCrypt($this->appid,$session_key);
$errCode = $wx->decryptData($encryptedData, $iv, $data );
if ($errCode == 0) {
return json_decode($data,true,JSON_UNESCAPED_UNICODE);
} else {
print($errCode . "\n");die();
}
}
5.此处开发还需要官方的解密文件，自己放在可以引用的地方即可，下载地址：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/signature.html#%E5%8A%A0%E5%AF%86%E6%95%B0%E6%8D%AE%E8%A7%A3%E5%AF%86%E7%AE%97%E6%B3%95
6.注意：测试的时候要用开发工具真机运行测试，要不然 iv 和 encryptedData这两个参数为 undefined！
7.更多内容或demo下载，加群：372319250