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


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
js实现全屏漂浮广告移入光标停止移动
Dec 02 Javascript
JavaScript数值数组排序示例分享
May 27 Javascript
js判断浏览器类型为ie6时不执行
Jun 15 Javascript
javascript引用赋值(地址传值)用法实例
Jan 13 Javascript
jquery中trigger()无法触发hover事件的解决方法
May 07 Javascript
JavaScript电子时钟倒计时第二款
Jan 10 Javascript
深入学习jQuery中的data()
Dec 22 Javascript
ES6中的箭头函数实例详解
Apr 06 Javascript
基于node.js实现微信支付退款功能
Dec 19 Javascript
原生js实现3D轮播图
Mar 21 Javascript
通过JS判断网页是否为手机打开
Oct 28 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简单实现发送带附件的邮件
2015/06/10 PHP
php中上传文件的的解决方案
2018/09/25 PHP
php创建多级目录与级联删除文件的方法示例
2019/09/12 PHP
js中的前绑定和后绑定详解
2013/08/01 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
jQuery动画效果实现图片无缝连续滚动
2016/01/12 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
2016/03/06 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
2018/06/05 Javascript
利用jqgrid实现上移下移单元格功能
2018/11/07 Javascript
vue+php实现的微博留言功能示例
2019/03/16 Javascript
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
Python检测网站链接是否已存在
2016/04/07 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
Python如何调用外部系统命令
2019/08/07 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
基于Pytorch SSD模型分析
2020/02/18 Python
Python列表推导式实现代码实例
2020/09/09 Python
详解CSS3+JS完美实现放大镜模式
2020/12/03 HTML / CSS
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
开业庆典策划方案
2014/02/18 职场文书
绩效工资实施方案
2014/03/15 职场文书
电力培训心得体会
2014/09/02 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书