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


Posted in Javascript onAugust 02, 2019

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

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

好啦~这是全部代码,效果如下(点击登录可进行授权)

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery中对Select的option项的添加、删除、取值
Aug 25 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
Dec 13 Javascript
JavaScript控制table某列不显示的方法
Mar 16 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
简单的渐变轮播插件
Jan 12 Javascript
关于预加载InstantClick的问题解决方法
Sep 12 Javascript
快速了解vue-cli 3.0 新特性
Feb 28 Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 Javascript
JS学习笔记之原型链和利用原型实现继承详解
May 29 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 Javascript
Vue自定义组件双向绑定实现原理及方法详解
Sep 03 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 #jQuery
用 js 写一个 js 解释器过程详解
Aug 02 #Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 #Javascript
详解element-ui中el-select的默认选择项问题
Aug 02 #Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 #jQuery
150行Node.js实现的dns代理工具
Aug 02 #Javascript
el-select 下拉框多选实现全选的实现
Aug 02 #Javascript
You might like
PHP写的资源下载防盗链类分享
2014/05/12 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
jquery 页面全选框实践代码
2010/04/02 Javascript
网页中CDATA标记的说明
2010/09/12 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
让人印象深刻的10个jQuery手风琴效果应用
2012/05/08 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
JS基于for语句编写的九九乘法表示例
2018/01/04 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
Vue中通过Vue.extend动态创建实例的方法
2019/08/13 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
Python利用正则表达式匹配并截取指定子串及去重的方法
2015/07/30 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
Anaconda下配置python+opencv+contribx的实例讲解
2018/08/06 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
python实现贪吃蛇游戏
2020/03/21 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
HOTEL INFO英国:搜索全球酒店
2019/08/08 全球购物
控制工程专业个人求职信
2013/09/25 职场文书
物业经理自我鉴定
2014/03/03 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫
vite+vue3.0+ts+element-plus快速搭建项目的实现
2021/06/24 Vue.js