微信小程序——授权标签：小程序授权需求进入小程序首页，用户点击页面任意地方触发小程序授权弹窗，如果已授权则不触发弹窗实现

标签：小程序授权

需求

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

实现难点

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

思路分析

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

代码实现

<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外包