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


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 相关文章推荐
学习ExtJS 访问容器对象
Oct 07 Javascript
Javascript的一种模块模式
Sep 08 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
JavaScript实现列出数组中最长的连续数
Dec 29 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
Bootstrap CSS组件之导航(nav)
Dec 17 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
node.js实现微信JS-API封装接口的示例代码
Sep 06 Javascript
node通过express搭建自己的服务器
Sep 30 Javascript
基于openlayers4实现点的扩散效果
Aug 17 Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 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
安装APACHE
2007/01/15 PHP
PHP开发过程中常用函数收藏
2009/12/14 PHP
PHP中spl_autoload_register函数的用法总结
2013/11/07 PHP
php实现中文转数字
2016/02/18 PHP
基于PHP微信红包的算法探讨
2016/07/21 PHP
php+mysql实现简单登录注册修改密码网页
2016/11/30 PHP
php+ajax实现异步上传文件或图片功能
2017/07/18 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
Stop SQL Server
2007/06/21 Javascript
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
Bootstrap项目实战之首页内容介绍(全)
2016/04/25 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
Angular5.1新功能分享
2017/12/21 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
Bootstrap FileInput实现图片上传功能
2021/01/28 Javascript
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
房地产出纳岗位职责
2013/12/01 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
Python如何导出导入所有依赖包详解
2021/06/08 Python
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL