小程序的授权

Posted 2022-06-02 ashley77

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

目前的授权都是通过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>

home.wxss

.header 
    text-align: start;
    height: 100rpx;
    line-height: 100rpx;

 
.header image 
    width: 200rpx;
    height: 200rpx;

 
.content 
  display: flex;
  margin-left: 50rpx;
  height: 100rpx;
  line-height: 100rpx;


.content image
  width: 100rpx;
  height: 100rpx;

 
.content text 
  font-size: 24rpx;
  margin-left: 20rpx;

 
.header_title
  margin-left: 50rpx;
  text-align: start;
  font-size: 24rpx;
  color: #ccc;
  line-height: 100rpx;
  display: flex;


.dian
  margin-right: 6rpx;
  font-size: 36rpx;


.modal_footer
    display: flex;
    justify-content: flex-end;

.bottom 
  display: flex;
   color: #ccc;
  font-size: 24rpx;
  width: 280rpx;


button::after 
  border: none;


.bottom button
  background-color: #fff;
  height: 50rpx;
  line-height: 50rpx;


.bottom_a
  font-size: 24rpx;

.bottom_b
  font-size: 28rpx;
  color: #0db95a;

home.js

//home.js
//获取应用实例
const app = getApp()

Page(
  data: 
    canIUse: wx.canIUse(‘button.open-type.getUserInfo‘),
    showModal: true, 
    single: false
  ,
  onLoad:function()
    var that = this;
    // 查看是否授权
    wx.getSetting(
      success: function (res) 
        if (res.authSetting[‘scope.userInfo‘]) 
          wx.getUserInfo(
            success: function (res) 
              wx.login(
                success: res => 
                  console.log("用户的code:" + res.code);
                
              );
            
          );
         else 
          that.setData(
            showModal: true
          );
        
      
    );
  ,
  bindGetUserInfo: function (e) 
    if (e.detail.userInfo) 
      //用户按了允许授权按钮
      var that = this;
      // 获取到用户的信息了，打印到控制台上看下
      console.log("用户的信息如下：");
      console.log(e.detail.userInfo);
      //授权成功后,通过改变 showModal的值，让实现页面显示出来，把授权页面隐藏起来
      that.setData(
        showModal: false
      );
     else 
      var that = this;
      //用户按了拒绝按钮
      wx.showModal(
        title: ‘警告‘,
        content: ‘您点击了拒绝授权，将无法获取你的信息!!!‘,
        showCancel: false,
        confirmText: ‘返回授权‘,
        success: function (res) 
          // 用户没有授权成功，不需要改变 isHide 的值
          if (res.confirm) 
            that.setData(
              showModal: true
            );
          
        
      );
    
  
)

home.json

  "usingComponents": 
    "modalView": "../../components/modal/modal"
  

好啦~这是全部代码，效果如下（点击登录可进行授权）