##內容
1.效果圖
2.前端頁面組件書寫
3.JS內組件用法
4.接口文件內容
1.效果圖：
2.小程序前端頁面
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">點擊登錄</button>
使用小程序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