小程序授权弹窗

最新推荐文章于 2024-08-26 12:31:11 发布

weixin_30735745

最新推荐文章于 2024-08-26 12:31:11 发布

阅读量1.2k

点赞数

文章标签：前端游戏前端框架 ViewUI

原文链接：http://www.cnblogs.com/luwei-web/p/10167720.html

版权

标签：小程序授权

需求

进入小程序首页，用户点击页面任意地方触发小程序授权弹窗，如果已授权则不触发弹窗

实现难点

小程序的wx.getUserInfo()接口不会主动触发小程序授权弹窗，只能通过button组件的open-type ，通过点击触发授权弹窗；
授权之后，再次点击页面进行正常的操作逻辑

思路分析

分析解决问题的思路
1.思路一是通过父组件button包裹页面内容，触发授权弹窗，但该思路导致一个问题：用户同意授权之后，再次点页面会继续执行button的点击事件，触发wx.getUserInfo()接口，不能进行正常的业务逻辑
2.改变1中的思路，将button组件作为一个蒙层，通过授权与否判断是否渲染该蒙层

代码实现

html?linenums <html> <view class="city-wrap flex-box fw-wr" hover-class="none" hover-stop-propagation="true"> <block wx:for="{{cityList}}" wx:key="{{item.areaId}}" > <view class="fd-col" data-city="{{item.areaId}}" data-name="{{item.name}}" catchtap="handleSelectCity"> <image class="city-pic-wrap" src="{{item.citySelectedFlag ? cityWrapSelected : cityWrap }}"> <image class="city-pic" src="{{item.picture}}"/> </image> <view class="city">{{item.name}}</view> <view class="city">{{item.spell}}</view> </view> </block> </view> <view class="lookfoward-more flex-b-cc"> <text>更多城市正在探索，敬请期待</text> </view> <button open-type="getUserInfo" class="wechat-auth-wrap" bindgetuserinfo="handleLogin" wx:if="{{!userAuthorization}}"> </button> </html>