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


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 相关文章推荐
20个非常有用的PHP类库 加速php开发
Jan 15 Javascript
jquery validate 自定义验证方法介绍 日期验证
Feb 27 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
Jan 22 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 Javascript
json字符串对象转换代码实例
Sep 28 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
Nov 12 Javascript
vue实现pdf文档在线预览功能
Nov 26 Javascript
JavaScript中条件语句的优化技巧总结
Dec 04 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生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
2017/02/22 Javascript
VUE前端cookie简单操作
2017/10/17 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
使用异步组件优化Vue应用程序的性能
2019/04/28 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
Python的净值数据接口调用示例分享
2016/03/15 Python
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
python元组的概念知识点
2019/11/19 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
html5的画布canvas——画出简单的矩形、三角形实例代码
2013/06/09 HTML / CSS
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
北大自主招生自荐信
2013/10/19 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
学校副校长四风对照检查材料整改措施
2014/09/25 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
2014年优秀党员材料
2014/12/18 职场文书
项目安全员岗位职责
2015/02/15 职场文书
宣传稿格式范文
2015/07/23 职场文书
Python selenium的这三种等待方式一定要会!
2021/06/10 Python
详解Python中*args和**kwargs的使用
2022/04/07 Python