小程序： getPhoneNumber功能详解，获取手机号登录 2019

##内容

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