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

微信(小程序)  /  管理员 发布于 3年前   227

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

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

UI组件部分（modal）

modal.wxml

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页面内容直接在下面加一个这里写home页面的内容）

                提示                  是否登录并继续使用该程序             •     登录程序需进行微信授权                       拒绝                 去登录                   

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" }}

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• 微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
• 微信小程序位置授权处理方法
• 微信小程序用户授权，以及判断登录是否过期的方法
• 微信小程序获取手机号授权用户登录功能
• 微信小程序授权获取用户详细信息openid的实例详解