微信小程序——受权

时间 2019-11-26

标签微信程序受权繁體版

原文原文链接

标签：小程序受权html

需求

进入小程序首页，用户点击页面任意地方触发小程序受权弹窗，若是已受权则不触发弹窗前端

实现难点

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

思路分析

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

代码实现

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