微信小程序--登录授权，一键获取用户微信手机号并登录
-----------------------------html---------------------------
<button class=\'phone-text\' open-type="getUserInfo" bindgetuserinfo="onGotUserInfo">请登录</button>
<!--登录弹窗-->
<view class="modal-mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
<view class="modal-dialog" wx:if="{{showModal}}">
<view class="modal-content">
<view><image src=\'../images/show.png\' class=\'show\'></image></view>
<view>绑定手机号</view>
<view>请先绑定手机号在进行此操作</view>
<button open-type=\'getPhoneNumber\' bindgetphonenumber="getPhoneNumber">
<image src=\'../images/showWx.png\' class=\'iconWx\'></image>微信用户一键绑定
</button>
</view>
</view>
------------------------------js-----------------------------
Page({
/**
* 页面的初始数据
*/
data: {
openid: "",
loginstate: "0",
openid: "",
userEntity: null,
terminal: "",
osVersion: "",
phoneNumber:"",
showModal: false,//定义登录弹窗
},
//在页面加载的时候，判断缓存中是否有内容，如果有，存入到对应的字段里
onLoad:function(){
var that = this;
wx.getStorage({
key: \'openid\',
success: function (res) {
that.setData({ openid: res.data });
},
fail: function (res) {
that.getcode();
}
});
wx.getStorage({
key: \'userEntity\',
success: function (res) {
that.setData({ userEntity: res.data });
},
fail: function (res) {
console.log("fail1");
}
});
wx.getStorage({
key: \'loginstate\',
success: function (res) {
that.setData({ loginstate: res.data });
}, fail: function (res) {
console.log("fail2");
}
});
},
onGotUserInfo: function (e) {
var that = this;
if (e.detail.errMsg == "getUserInfo:ok") {
wx.setStorage({
key: "userinfo",
data: e.detail.userInfo
})
this.setData({ userInfo: e.detail.userInfo });
that.showDialogBtn();//调用一键获取手机号弹窗（自己写的）
}
},
// 显示一键获取手机号弹窗
showDialogBtn: function () {
this.setData({
showModal: true//修改弹窗状态为true，即显示
})
},
// 隐藏一键获取手机号弹窗
hideModal: function () {
this.setData({
showModal: false//修改弹窗状态为false,即隐藏
});
},
onshow: function (openid, userInfo, phoneNumber) {
var that = this;
wx.getSystemInfo({
success: function (res) {
that.setData({ terminal: res.model });
that.setData({ osVersion: res.system });
}
})
wx.request({
url: \'登录接口\',
method: \'POST\',
header: {
\'content-type\': \'application/json\' // 默认值
},
data: {
username: phoneNumber,
parentuser: \'xudeihai\',
wximg: userInfo.avatarUrl,
nickname: userInfo.nickName,
identity: "",
terminal: that.data.terminal,
osVersion: that.data.system,
logintype: "10",//微信登录
openid: that.data.openid,
},
success(res) {
if (res.data.r == "T") {
that.setData({ userEntity: res.data.d });
wx.setStorage({
key: "userEntity",
data: res.data.d
})
that.setData({ loginstate: "1" });
wx.setStorage({
key: "loginstate",
data: "1"
})
wx.setStorage({
key: \'userinfo\',
data: "1"
})
}
else {
return;
}
},
fail(res) {
console.log(res);
}
})
},
//绑定手机
getPhoneNumber: function (e) {
var that = this;
that.hideModal();
wx.checkSession({
success: function () {
wx.login({
success: res => {
wx.request({
url: \'自己的登录接口\', //仅为示例，并非真实的接口地址
data: {
account: \'1514382701\',
jscode: res.code
},
method: "POST",
header: {
\'content-type\': \'application/json\' // 默认值
},
success(res) {
if (res.data.r == "T") {
wx.setStorage({
key: "openid",
data: res.data.openid
})
wx.setStorage({
key: "sessionkey",
data: res.data.sessionkey
})
wx.setStorageSync("sessionkey", res.data.sessionkey);
wx.request({
url: \'自己的解密接口\',//自己的解密地址
data: {
encryptedData: e.detail.encryptedData,
iv: e.detail.iv,
code: wx.getStorageSync("sessionkey")
},
method: "post",
header: {
\'content-type\': \'application/json\'
},
success: function (res) {
if (res.data.r == "T") {
that.onshow(that.data.openid, that.data.userInfo, res.data.d.phoneNumber);//调用onshow方法，并传递三个参数
console.log("登录成功")
console.log(res.data.d.phoneNumber)//成功后打印微信手机号
}
else {
console.log(res);
}
}
})
}
}
})
}
})
},
fail: function () {
wx.login({
success: res => {
wx.request({
url: \'自己的登录接口\', //仅为示例，并非真实的接口地址
data: {
account: \'1514382701\',
jscode: res.code
},
method: "POST",
header: {
\'content-type\': \'application/json\' // 默认值
},
success(res) {
if (res.data.r == "T") {
wx.setStorage({
key: "openid",
data: res.data.openid
})
wx.setStorage({
key: "sessionkey",
data: res.data.sessionkey
})
wx.request({
url: \'自己的解密接口\',//自己的解密地址
data: {
encryptedData: e.detail.encryptedData,
iv: e.detail.iv,
code: res.data.sessionkey
},
method: "post",
header: {
\'content-type\': \'application/json\'
},
success: function (res) {
that.onshow(that.data.openid, that.data.userInfo, res.data.d.phoneNumber);//调用onshow方法，并传递三个参数
}
})
}
}
})
}
})
}
})
},
})
-------------------------wxss--------------------------
/* ---弹窗css--- */
.modal-mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.5;
overflow: hidden;
color: #fff;
}
.modal-dialog {
width: 72%;
position: absolute;
top: 30%;
left: 14%;
background: #fff;
border-radius: 12rpx;
}
.modal-content{
text-align: center;
}
.modal-content .show{
width: 450rpx;
height: 323rpx;
display: block;
margin: 0 auto;
margin-top: -118rpx;
z-index: 10000;
}
.iconWx{
width:52rpx;
height: 41rpx;
padding-right: 20rpx;
}
.iconPhone{
width:56rpx;
height: 56rpx;
padding-right: 15rpx;
}
.modal-content view:nth-of-type(2){
font-size: 38rpx;
color: #333333;
line-height: 1;
}
.modal-content view:nth-of-type(3){
font-size: 26rpx;
color: #9c9c9c;
margin: 18rpx 0 29rpx;
line-height: 1;
}
.modal-content button:nth-of-type(1){
width: 80%;
height: 80rpx;
border-radius: 60rpx;
margin: 0 auto 80rpx;
font-size: 30rpx;
color: #fff;
background: #31cc32;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0;
box-sizing: border-box;
}
.modal-content button:nth-of-type(1)::after{
border: none;
}
.modal-content .wxLogin{
font-size: 26rpx;
color: #424242;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin: 38rpx 0 80rpx;
}
button::after{
border: none;
}
点击登录按钮，弹出微信自带的是否允许授权弹出框，如果点击的是允许，从缓存中读取用户信息，并把用户信息存储起来,同时调用弹出获取手机号的弹窗（这个弹窗时自己写的），在wxml里用
wx:if="{{showModal}}"判断获取手机号的隐藏状态，当为true的时候显示，注意在两层view里写了两遍wx:if="{{showModal}}"，为什么写两遍呢，因为第一层时弹出框的灰色蒙版背景，第二层是弹出框的
内容，两层控制了整个弹窗框是否显示。
- 上一篇 »手把手教你写一个微信小程序，推荐
- 下一篇 »微信小程序获取微信绑定的手机号