侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

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

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

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


  • 上一条:
    微信小程序实现语音识别转文字功能及遇到的坑
    下一条:
    微信小程序中悬浮窗功能的实现代码
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 小程序开发之跳转微信直播示例api(0个评论)
    • 在uni_app中开发小程序之常用功能示例代码汇总(0个评论)
    • 小程序开发之多端框架:taro(0个评论)
    • 微信小程序前端使用七牛云官方SDK上传七牛云代码示例(0个评论)
    • 百度小程序审核未通过,真机审核存在点击返回键退出小程序...解决方式之一tabBar(0个评论)
    • 近期文章
    • 如何优雅处理async await错误推荐:await-to-js库(0个评论)
    • lodash工具库(0个评论)
    • 在Laravel项目中使用中间件方式统计用户在线时长功能代码示例(0个评论)
    • 在Laravel中构建业务流程模型(0个评论)
    • windows系统中安装FFMpeg及在phpstudy环境php7.3 + php-ffmpeg扩展的使用流程步骤(0个评论)
    • 在go语言中对浮点的数组、切片(slice)进行正向排序和反向排序(0个评论)
    • 在go语言中对整数数组、切片(slice)进行排序和反向排序(0个评论)
    • 在go语言中对字符串数组、切片(slice)进行排序和反向排序(0个评论)
    • 最新国内免注册ChatGPT体验站_ChatGPT镜像站访问链接地址2023/3/28持续更新(0个评论)
    • 在Laravel项目中的实现无密码认证之:发送邮箱链接授权(0个评论)
    • 近期评论
    • 博主 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..
    • xiaoB 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..
    • BUG4 在

      你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..
    • 博主 在

      go语言+beego框架中获取get,post请求的所有参数中评论 @ t1  直接在router.go文件中配就ok..
    • Jade 在

      如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
    • 2017-10
    • 2018-01
    • 2020-03
    • 2021-06
    • 2021-10
    • 2022-03
    • 2023-02
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客