微信小程序自定义授权弹框
最近微信获取用户信息的接口有调整，就是这货：wx.getUserInfo(OBJECT)，文档描述如下：
此接口有调整，使用该接口将不再出现授权弹窗，请使用 <button open-type="getUserInfo"></button> 引导用户主动进行授权操作
1.当用户未授权过，调用该接口将直接报错
2.当用户授权过，可以使用该接口获取用户信息
解决方案
无缘无故在页面上多了一个按钮，只是为了引导用户授权，加在哪里都会觉得和页面内容格格不入。
那就弹一个框提示吧，虽然连续两个弹框也很怪，但是个人觉得比页面多一个按钮好一点。
微信自己定义的弹框交互并不适合授权这个场景，那就想到自定义一个弹框组件来解决。
实现
新建 components 目录文件如下：
image
dialog.json 文件内容：
{
"component": true, // 自定义组件必须先声明
"usingComponents": {}
}
dialog.js 文件内容：
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
/**
* 组件的属性列表
*/
properties: {
// 弹窗标题
title: {
type: String,
value: '标题' // 默认值
},
// 弹窗内容
content :{
type : String ,
value : '弹窗内容'
},
// 弹窗确认按钮文字
confirmText :{
type : String ,
value : '确定'
}
},
/**
* 组件内私有数据
*/
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 文件内容：
<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 文件内容：
.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;
}
在首页或者我的页面进行授权检测：
首先还是要在 json 文件进行声明
index.json:
{
"usingComponents": {
"dialog": "/components/dialog/dialog"
}
}
index.wxml:
<dialog id='dialog'
title='登录提示'
content='小程序需要您的授权才能提供更好的服务哦'
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() {
// 用户点击授权后，这里可以做一些登陆操作
this.login();
},