微信小程序（一）----------微信小程序提示授权

最新推荐文章于 2024-07-05 01:12:33 发布

深度物联

最新推荐文章于 2024-07-05 01:12:33 发布

阅读量1.1k

点赞数

分类专栏：微信小程序文章标签：微信小程序提示授权

本文链接：https://blog.csdn.net/qq_36004677/article/details/86509085

版权

本文介绍了如何在微信小程序中实现全屏透明的授权按钮，以提高用户体验。通过在首页WXML设置全屏、透明样式，并利用JS控制授权按钮的显示与隐藏，监听用户授权状态，以此达到无论用户点击页面何处都能触发授权弹窗的效果。

摘要由CSDN通过智能技术生成

1.说明

小程序因为所谓的安全问题，用户必须使用<button open-type="getUserInfo"></button>才能弹出授权弹窗。所以需要弄一个授权按钮到页面上。考虑到用户体验，授权按钮放哪里是一个问题，有小伙伴提出将授权按钮做成全屏透明的，给它一个比较高的层级，这样，无论用户第一次进入小程序之后点击任何地方都会弹出授权弹窗，感觉这个提议有点意思，我也来试着弄一遍。

2.授权按钮全屏透明实现步骤

（1）在首页index.wxml中给定一个授权按钮，给它一个class用来设置全屏、透明、高层级样式,给它一个wx:if用来设置它的隐藏和显示，再给它一个bindgetuserinfo来监听用户是否同意授权。

index.wxml：

  <!--授权按钮-->
  <button wx:if="{
  {flagUseBtn}}" class="userInfoBtn"  style=height:{
  {userInfoBtnHeight}}px;"
  open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo"></button>

（2）在js中声明一个flagUseBtn初始值为false控制授权按钮的隐藏和显示，再声明一个userInfoBtnHeight初始值为0