-----------------------------html---------------------------
<button class='phone-text'
open-type="getUserInfo" lang="zh_CN"
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}}"，為什么寫兩遍呢，因為第一層時彈出框的灰色蒙版背景，第二層是彈出框的
內容，兩層控制了整個彈窗框是否顯示。