标签：小程序 授权
需求
进入小程序首页，用户点击页面任意地方触发小程序授权弹窗，如果已授权则不触发弹窗
实现难点
- 小程序的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>
实现效果
参考文档
备注:
- 具体怎样判断是否授权，请参考《小程序引入Promise》文档
- 是否有更好的实现思路？
作者简介：黄杰，芦苇科技web前端开发工程师，擅长网站建设、微信公众号开发、微信小程序开发、小游戏制作、企业微信制作、H5建设，专注于前端框架、交互设计、图像绘制、数据分析等研究。
欢迎和我们一起并肩作战： web@talkmoney.cn
访问 www.talkmoney.cn 了解更多
提供专业的微信公众号建设，高质量的钉钉制作，高性价比的企业微信制作，广州微信小程序制作，靠谱的小游戏外包，深圳H5外包