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


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 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 Javascript
判断输入是否为空,获得输入类型的JS代码
Oct 30 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
浅谈AngularJS中ng-class的使用方法
Nov 11 Javascript
详解webpack自动生成html页面
Jun 29 Javascript
详解vue移动端日期选择组件
Feb 22 Javascript
Vue Router去掉url中默认的锚点#
Aug 01 Javascript
js类的继承定义与用法分析
Jun 21 Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 14 Javascript
uniapp实现可滑动选项卡
Oct 21 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
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
关于页面优化和伪静态
2009/10/11 PHP
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
js可突破windows弹退效果代码
2008/08/09 Javascript
js实现div的切换特效上一个下一个
2014/02/11 Javascript
jquery实现保存已选用户
2014/07/21 Javascript
JavaScript多线程详解
2015/08/12 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
2018/02/08 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
Vue内部渲染视图的方法
2019/09/02 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
JavaScript装饰者模式原理与用法实例详解
2020/03/09 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
Python格式化css文件的方法
2015/03/10 Python
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
Python基于滑动平均思想实现缺失数据填充的方法
2019/02/21 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
Python3实现二叉树的最大深度
2019/09/30 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
开发中都用到了那些设计模式?用在什么场合?
2014/08/21 面试题
行政主管职责范本
2014/03/07 职场文书
食品安全责任书
2014/04/15 职场文书
单位承诺书格式
2014/05/21 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书