微信小程序自定義授權(quán)彈框

最近微信獲取用戶信息的接口有調(diào)整，就是這貨：wx.getUserInfo(OBJECT)，文檔描述如下：

此接口有調(diào)整，使用該接口將不再出現(xiàn)授權(quán)彈窗，請使用 <button open-type="getUserInfo"></button> 引導(dǎo)用戶主動進行授權(quán)操作
1.當(dāng)用戶未授權(quán)過，調(diào)用該接口將直接報錯
2.當(dāng)用戶授權(quán)過，可以使用該接口獲取用戶信息

解決方案

無緣無故在頁面上多了一個按鈕，只是為了引導(dǎo)用戶授權(quán)，加在哪里都會覺得和頁面內(nèi)容格格不入。
那就彈一個框提示吧，雖然連續(xù)兩個彈框也很怪，但是個人覺得比頁面多一個按鈕好一點。

微信自己定義的彈框交互并不適合授權(quán)這個場景，那就想到自定義一個彈框組件來解決。

實現(xiàn)

新建 components 目錄文件如下：
image

dialog.json 文件內(nèi)容：

{
"component": true, // 自定義組件必須先聲明
"usingComponents": {}
}
dialog.js 文件內(nèi)容：

Component({
options: {
multipleSlots: true // 在組件定義時的選項中啟用多slot支持
},
/**
* 組件的屬性列表
*/
properties: {
// 彈窗標(biāo)題
title: {
type: String,
value: '標(biāo)題' // 默認(rèn)值
},
// 彈窗內(nèi)容
content :{
type : String ,
value : '彈窗內(nèi)容'
},

// 彈窗確認(rèn)按鈕文字
confirmText :{
type : String ,
value : '確定'
}
},

/**
* 組件內(nèi)私有數(shù)據(jù)
*/
data: {
// 彈窗顯示控制
isShow:false
},

/**
* 組件的公有方法列表
*/
methods: {

//隱藏彈框
hideDialog(){
this.setData({
isShow: !this.data.isShow
})
},
//展示彈框
showDialog(){
this.setData({
isShow: !this.data.isShow
})
},
/**
* triggerEvent 組件之間通信
*/
confirmEvent(){
this.triggerEvent("confirmEvent");
},

bindGetUserInfo(){
this.triggerEvent("bindGetUserInfo");
}

}
})
dialog.wxml 文件內(nèi)容：

<view class='dialog-container' hidden="{{!isShow}}">
<view class='dialog-mask'></view>
<view class='dialog-info'>
<view class='dialog-title'>{{ title }}</view>
<view class='dialog-content'>{{ content }}</view>
<view class='dialog-footer'>
<button class='dialog-btn' open-type="getUserInfo" bindgetuserinfo='bindGetUserInfo' catchtap='confirmEvent'>{{ confirmText }}</button>
</view>
</view>
</view>
dialog.wxss 文件內(nèi)容：

.dialog-mask{
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
}
.dialog-info{
position: fixed;
z-index: 5000;
width: 80%;
max-width: 600rpx;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #FFFFFF;
text-align: center;
border-radius: 3px;
overflow: hidden;
}
.dialog-title{
font-size: 36rpx;
padding: 30rpx 30rpx 10rpx;
}
.dialog-content{
padding: 10rpx 30rpx 20rpx;
min-height: 80rpx;
font-size: 32rpx;
line-height: 1.3;
word-wrap: break-word;
word-break: break-all;
color: #999999;
}
.dialog-footer{
display: flex;
align-items: center;
position: relative;
line-height: 90rpx;
font-size: 34rpx;
}
.dialog-btn{
display: block;
-webkit-flex: 1;
flex: 1;
position: relative;
color: #3CC51F;
}
在首頁或者我的頁面進行授權(quán)檢測：
首先還是要在 json 文件進行聲明
index.json:

{
"usingComponents": {
"dialog": "/components/dialog/dialog"
}
}

index.wxml:

<dialog id='dialog'
title='登錄提示'
content='小程序需要您的授權(quán)才能提供更好的服務(wù)哦'
confirmText='知道了'
bind:confirmEvent='confirmEvent'
bind:bindGetUserInfo='bindGetUserInfo'>
</dialog>
index.js:

onReady: function () {
//獲得dialog組件
this.dialog = this.selectComponent("#dialog");
},

showDialog: function(){
this.dialog.showDialog();
},

confirmEvent: function(){
this.dialog.hideDialog();
},

bindGetUserInfo: function() {
// 用戶點擊授權(quán)后，這里可以做一些登陸操作
this.login();
},

轉(zhuǎn)載于:https://www.cnblogs.com/mapsxy/p/10375131.html

總結(jié)

以上是生活随笔為你收集整理的微信小程序自定义授权弹框的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。