微信小程序的授权实现过程解析

自从小程序文档更新后，自动授权已不存在啦

目前的授权都是通过button来实现的，具体知识点可参考小程序的官方文档，以下是我做的一个小demo（进入首页，跳出一个登录弹出框，弹出框是自己写的一个UI组件），废话不多说，直接上代码

UI组件部分（modal）

modal.wxml

<view class='modal-mask' wx:if='{{show}}' bindtap='clickMask'> <view class='modal-content'>  <scroll-view scroll-y class='main-content'>   <slot></slot>  </scroll-view> </view></view>

modal.wxss

n: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 999;}/*遮罩内容*/.modal-content{ display: flex; flex-direction: column; width: 65%; background-color: #fff; border-radius: 10rpx; padding: 20rpx; text-align: center;}/*中间内容*/.main-content{ flex: 1; height: 100%; overflow-y: hidden;  max-height: 80vh; /* 内容高度最高80vh 以免内容太多溢出*/}.bottom {  border-radius: 80rpx;  margin: 70rpx 50rpx;  font-size: 35rpx;}

modal.js

Component({ /**  * 组件的属性列表  */ properties: {  //是否显示modal弹窗  show: {   type: Boolean,   value: false  },  //控制底部是一个按钮还是两个按钮，默认两个  single: {   type: Boolean,   value: false  } }, /**  * 组件的初始数据  */ data: { }, /**  * 组件的方法列表  */ methods: {  // 点击modal的回调函数  clickMask() {   // 点击modal背景关闭遮罩层，如果不需要注释掉即可   this.setData({ show: false })  },  // 点击取消按钮的回调函数  cancel() {   this.setData({ show: false })   this.triggerEvent('cancel') //triggerEvent触发事件  },  // 点击确定按钮的回调函数  confirm() {   this.setData({ show: false })   this.triggerEvent('confirm')  } }})

modal.json

{ "component": true, "usingComponents": {}}

pages页面

home.wxml（这个是弹框，home页面内容直接在下面加一个<view>这里写home页面的内容</view>）

<!-- modal弹窗--> <modalView show="{{showModal}}" bindcancel="modalCancel" bindconfirm='modalConfirm' single='{{single}}'>  <view class='modal-content'>   <scroll-view scroll-y class='main-content'>  <view wx:if="{{canIUse}}" >  <view class='header'>      <text>提示</text>    </view>    <view class='content'>     <image src="/images/goods_img2.png"></image>     <text>是否登录并继续使用该程序</text>    </view>    <view class="header_title">     <text class="dian">•</text>     <text>登录程序需进行微信授权</text>    </view>    <view class="modal_footer">    <view class="bottom">     <button class='bottom_a'>      拒绝     </button>     <button class='bottom_b' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">       去登录     </button>    </view>    </view></view>   </scroll-view>  </view> </modalView>