小程序授权手机号方法
2019-08-13 本文已影响1人
追逐繁星的阿忠
留白
image.png
image.png
核心代码模块
html
<!-- 导航栏 -->
<import src="/template/navigation/navigation.wxml"/>
<template is="nav" data="{{navMsg}}"/>
<view class='nav-place-view' style='height:{{navMsg.navH}}px;'></view>
<view class="tl-content">
<view class="tl-center tl-p80 " style="border-bottom: 0">
<image mode="widthFix" class="tl-logo" src=""></image>
<view class="tl-font-36-333">铲屎官助手</view>
</view>
<view class="mine-container">
<!--<button loading="{{loading}}" class="tl-btn tl-btn-8dd" bindtap="goRegister" >微信用户快捷登陆</button>-->
<button lang="zh_CN" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" class='tl-btn tl-btn-8dd'>微信用户快捷登陆</button>
<button loading="{{loading}}" class="tl-btn tl-btn-8dd" bindtap="goRegister" >手机号登陆</button>
</view>
</view>
css
@import "/app.wxss";
@import "/res/wxss/weui.wxss";
.mine-container{
padding: 80rpx 30rpx;
padding-top: 100rpx;
}
.mine-container button{
font-size: 33rpx;
}
.tl-content{
background: #ffffff;
padding: 0 37rpx;
}
.tl-center{
text-align: center;
}
.tl-p80{
padding: 70rpx 0;
}
.tl-logo{
width: 130rpx;
height: 130rpx;
background: no-repeat;
background-position:center center;
background-size: 100% auto;
}
.tl-h80{
border-bottom: 1px solid #CCCCCC;
line-height: 110rpx;
height: 110rpx;
position: relative;
}
.weui-cell__ft_in-access2 {
padding-right: 13px;
margin-top: -50rpx;
}
.weui-cell__ft_in-access2:after {
content: " ";
display: inline-block;
height: 6px;
width: 6px;
border-width: 2px 2px 0 0;
border-color: #C8C8CD;
border-style: solid;
-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
position: relative;
top: -2px;
position: absolute;
top: 50%;
margin-top: -4px;
right: 2px;
}
.h80{
line-height: 110rpx;
height: 110rpx;
}
.tl-btn {
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
padding-left:14px;
padding-right:14px;
box-sizing:border-box;
font-size:18px;
text-align:center;
text-decoration:none;
line-height:86rpx;
border-radius:43px;
-webkit-tap-highlight-color:transparent;
overflow:hidden;
color:#000000;
background-color:#F8F8F8;
}
.tl-btn-8dd{
background: #0048DD;
color: #ffffff;
margin-bottom: 91rpx;
}
.tl-text-center{
text-align: center;
color: #333333;
margin-top: 31rpx;
}
.tl-666{
color: #666666;
}
.tl-bottom-10{
margin-bottom: 20rpx;
}
.pull-left{
float: left;
}
.pull-right{
float: right;
}
/********************************************************/
.tl-btn {
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
padding-left:14px;
padding-right:14px;
box-sizing:border-box;
font-size:18px;
text-align:center;
text-decoration:none;
line-height:86rpx;
border-radius:43px;
-webkit-tap-highlight-color:transparent;
overflow:hidden;
color:#000000;
background-color:#F8F8F8;
}
.tl-btn-8dd{
background: #0048DD;
color: #ffffff;
}
.tl-btn-ccc{
background: #cccccc;
}
.tl-font-36-333{
margin-top: 45rpx;
font-size:36rpx;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(51,51,51,1);
line-height:28rpx;
}
js
let appJs = getApp();
const app = getApp();
Page({
data: {
phone: '',
oldPhone: '', //用来记录后端返回的手机号做比对参数
tempOpenId: '',
tempUnionid: '',
code: '',
petsArr: [],
petIndex: 0,
disable: true,
loading: false,
testLoading: false,
shopId: ''/*店铺的numberid*/,
zxShopId: ''/*店铺真正id*/,
storeId: '',/*店铺的storeid*/
codeBtnText: '点击获取',
codeDisabled: '0',
isFromPop: false,
codeShow: false,// 验证码是否显示 只有从未绑定过的用户手机号和变动了后端返回的手机号码才会显示
applicationStatus: 99,// 0:从未发起过申请（）——可以去申请成为会员 2:申请成功(已绑定)——可以去登陆 || 1:申请状态（申请中）——可以不做操作 || 3:申请失败（重新申请）——可以去申请
shop: 0,
navMsg: {
navH: app.globalData.navHeight,
navT: "绑定宠物店",
hidden: true
},
ency: '',
iv : '',
errMsg: '',
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
},
goBack:function(){
app.goBack()
},
onLoad: function (options) {
},
//注册会员按钮并获取手机号
getPhoneNumber: function (e) {//这个事件同样需要拿到e
var that = this
var ency = e.detail.encryptedData;
var iv = e.detail.iv;
var errMsg = e.detail.errMsg;
if (iv == null || ency == null) {
wx.showToast({
title: "授权失败,请重新授权！",
icon: 'none',
})
return false
}
//把获取手机号需要的参数取到，然后存到头部data里面
that.setData({
ency: ency,
iv: iv,
errMsg: errMsg
})
that.zhuce();//调用手机号授权事件
},
/*
* 1.前端组装参数，先获取openid，这里没有返回code，有两种方案，一：后端用code换sessionKey 二：前端传递sessionKey，这里用的方案一
* 2.重新wx.login 去拿到code 参数，
* 3.组装数据结构体，调用接口就行了
* */
zhuce: function (e) {
var that = this;
var ency = that.data.ency;
var iv = that.data.iv;
var errMsg = that.data.errMsg;
var loginInfo = app.globalData.loginInfo;
that.getOpenId((res) => {
let openId = res.openid;
wx.login({
fail: function (err) {
},
complete: function (msg) {
},
success: function (loginInfo) {
let currentCode = loginInfo.code;
if (wx.getExtConfig) {
wx.getExtConfig({
success: function (res) {
var rescode = res.extConfig.code;
let sendData = {
encrypted: ency,
iv: iv,
code: currentCode,
open_id: openId,
};
appJs.apiConfig.getApi({
apiUrl: appJs.apiConfig.wxPhone,
type: 'POST',
notLoad: false,
sendData: sendData,
success(res) {
let strPhone = res.data;
wx.setStorageSync('wxPhone', strPhone);
wx.navigateTo({
url: `/pages/bindShop/bindShop`
})
},
err() { },
anyFun() { }
});
},
})
}
}
})
});
/* //判断登录状态
wx.checkSession({
success: function () {
/!*if (wx.getExtConfig) {
wx.getExtConfig({
success: function (res) {
var rescode = res.extConfig.code
//我的sessionKey是写在app.js的onshow里面的，每次进入小程序都需要重新登录，
//获取到最新的sessionKey保存到缓存里，用的时候取出来
//所以可以确定，每次进入都是最新的sessionKey
var sessionKey = wx.getStorageSync("sessionKey");
let sendData = {
encrypted: ency,
iv: iv,
code: rescode,
open_id:'osh3s0BpkKu3PSRRtFWjH4Z7VeN0',
};
appJs.apiConfig.getApi({
apiUrl: appJs.apiConfig.wxPhone,
type: 'POST',
notLoad: false,
sendData: sendData,
success(res) {
self.timeDown(e, 60);
},
err() { },
anyFun() { }
});
/!*wx.request({
method: "POST",
url: (app.globalData.server_root2 + "/v1/user/getPhoneNumber"),
data: {
encrypdata: ency,
ivdata: iv,
sessionKey: sessionKey
},
success: function (res) {
if (res.data.code != 200) {
wx.showToast({
title: res.data.message,
icon: 'none',
})
return;
}
}
});*!/
}
})
}*!/
wx.login({
fail: function (err) {
},
complete: function (msg) {
},
success: function (loginInfo) {
let currentCode = loginInfo.code;
debugger
if (wx.getExtConfig) {
wx.getExtConfig({
success: function (res) {
var rescode = res.extConfig.code;
let sendData = {
encrypted: ency,
iv: iv,
code: currentCode,
open_id:'osh3s0BpkKu3PSRRtFWjH4Z7VeN0',
};
appJs.apiConfig.getApi({
apiUrl: appJs.apiConfig.wxPhone,
type: 'POST',
notLoad: false,
sendData: sendData,
success(res) {
debugger
self.timeDown(e, 60);
},
err() { },
anyFun() { }
});
/!*wx.request({
method: "POST",
url: (app.globalData.server_root2 + "/v1/user/getPhoneNumber"),
data: {
encrypdata: ency,
ivdata: iv,
sessionKey: app.globalData.sessionKey
},
success: function (res) {
if (res.data.code != 200) {
wx.showToast({
title: res.data.message,
icon: 'none',
})
return;
}
}
});*!/
},
})
}
}
})
},
fail: function () {//如果失败，就重新登录，并且重新获取手机号
//登录
wx.login({
fail: function (err) {
},
complete: function (msg) {
},
success: function (loginInfo) {
if (wx.getExtConfig) {
wx.getExtConfig({
success: function (res) {
var rescode = res.extConfig.code;
appJs.apiConfig.getApi({
apiUrl: appJs.apiConfig.wxPhone,
type: 'POST',
notLoad: false,
sendData: sendData,
success(res) {
self.timeDown(e, 60);
},
err() { },
anyFun() { }
});
/!*wx.request({
method: "POST",
url: (app.globalData.server_root2 + "/v1/user/getPhoneNumber"),
data: {
encrypdata: ency,
ivdata: iv,
sessionKey: app.globalData.sessionKey
},
success: function (res) {
if (res.data.code != 200) {
wx.showToast({
title: res.data.message,
icon: 'none',
})
return;
}
}
});*!/
},
})
}
}
})
}
})*/
},
});
参考地址：
（https://blog.csdn.net/weixin_39162041/article/details/87615857#_5）[https://blog.csdn.net/weixin_39162041/article/details/87615857#_5]
