由于业务需要，需要给一些点击区域增加一层逻辑：如果用户没有授权基本信息/手机号，在点击该区域时，首先会弹出微信的授权弹出窗口，授权成功后再进行下一步业务操作。

其中使用了@dannnney的weapp-event门户。

本案github源代码欢迎星~~

思路

由于授权基本信息/手机号必须使用小程序的原生按钮，然后指定打开类型，相关信息只能通过回调获取(wx.getUserInfo()不能再弹出，但必须弹出按钮窗口)，但需要预授权的点击区域样式不一定是按钮样式，因此决定使用透明的原生按钮覆盖点击区域，从而在视觉上实现无差别授权。按钮是否显示由授权字段决定。

因为小程序中可能有多个点击区域需要相同的授权，所以决定使用观察者模式，即在其中一个组件被授权后，用相同的授权更新所有组件并隐藏授权按钮。

样式

因为授权按钮需要完全覆盖点击区域，所以需要让槽中的内容展开父定位元素，然后授权按钮绝对定位在父元素中，宽度和高度可以设置为100%。您还可以通过小部件组件的外部类从小部件组件外部指定样式。代码如下：包装器{ position:相对；宽度： 100%；高度： 100%；auth { position: absolute宽度： 100%；高度： 100%；opa city 3360 0；top : 0；left : 0；z-index : 10；}}复制代码view class=' wrapper m-class ' viewbind : tap=' handletap ' slot/slot/viewblock wx 3360 if=' { {！authorized } } ' button class=' auth ' open-type=' { { opentype } } ' bingetphonenumber ' bingetuserinfo=' getuserinfo '/button/block/view复制代码效果：

未设置透明度(所有青色区域都是授权按钮)

将透明度设置为0后

逻辑

Properties OpenType通过设置不同的参数来设置组件的授权类型。dataauthorized控制授权按钮是否显示attached处于组件的attached阶段，判断用户是否被授权。如果授权，则直接将authorized设置为false。如果用户没有被授权，那么初始化被分离的监听器以移除监听器需要将点击区域本身的点击事件绑定到组件之外，如果它已经被授权，这将触发点击回调。

授权-block bind:action='回调' m-class='xxx' view class='u-m '