文章目录
微信小程序底部弹出层组件与slot插槽实现了底部弹出层效果,现在将底部弹出层应用于用户授权。
具体的页面效果如下:
弹出层bottom-modal组件
修改弹出层bottom-modal组件中slot具名插槽
授权login组件
新建login组件
添加login组件,在login组件中会使用弹出层bottom-modal组件。
引入弹出层bottom-modal组件
首先在login.json中引入弹出层bottom-modal组件
{
"component": true,
"usingComponents": {
"x-bottom-modal": "/components/bottom-modal/bottom-modal"
}
}
在login.wxml中使用弹出层bottom-modal组件,并使用modal-content插槽slot
<x-bottom-modal modalShow="{{modalShow}}">
<view slot="modal-content">
<button class="login"
open-type="getUserInfo"
bindgetuserinfo="onGotUserInfo"
>获取微信授权信息</button>
</view>
</x-bottom-modal>
button的bindgetuserinfo属性
open-type 和 bindgetuserinfo 请参考:button
具体说明如下:
用户授权
login.js
// components/login/login.js
Component({
properties: {
modalShow: Boolean
},
data: {
},
methods: {
onGotUserInfo(event) {
console.log(event)
const userInfo = event.detail.userInfo
// 允许授权
if (userInfo) {
this.setData({
modalShow: false
})
this.triggerEvent('loginsuccess', userInfo)
} else {
this.triggerEvent('loginfail')
}
}
}
})
点击获取微信授权信息按钮,弹出微信授权弹窗
点击拒绝输出如下日志:
点击允许输出如下日志,可以看到授权后输出了用户相关的信息。
使用授权login组件
引入login组件
{
"usingComponents": {
"x-search": "/components/search/search",
"x-login": "/components/login/login"
}
}
使用login组件
<x-login modalShow="{{modalShow}}" bind:loginsuccess="onLoginSuccess" bind:loginfail="onLoginFail">
</x-login>
点击发布按钮操作
整个过程最开始就是点击发布按钮,点击发布按钮需要先判断用户是否已经授权过,如果已经授权我们自己获取用户信息;如果没有授权过,我们才需要去授权页面进行操作。代码如下:
// pages/blog2/blog2.js
Page({
data: {
// 控制底部弹出层是否显示
modalShow: false,
},
// 发布功能
onPublish() {
// 判断用户是否授权
wx.getSetting({
success: (res) => {
console.log(res)
if (res.authSetting['scope.userInfo']) {
wx.getUserInfo({
success: (res) => {
// console.log(res)
this.onLoginSuccess({
detail: res.userInfo
})
}
})
} else {
this.setData({
modalShow: true,
})
}
}
})
},
onLoginSuccess(event) {
console.log(event)
const detail = event.detail
wx.navigateTo({
url: `../blog-edit/blog-edit?nickName=${detail.nickName}&avatarUrl=${detail.avatarUrl}`,
})
},
onLoginFail() {
wx.showModal({
title: '授权用户才能发布',
content: '',
})
},
onLoad: function(options) {
},
})
清除授权数据
如果授权后想清除授权数据,只需选择 “清除授权数据”即可。