小程序授权弹窗

作者：黄杰；
标签：小程序授权

需求

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

实现难点

小程序的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》文档
是否有更好的实现思路？