微信小程序用户授权、位置授权及获取微信绑定手机号


Posted in Javascript onJuly 18, 2019

1.位置授权

位置授权相对简单,可以直接调用方法wx.getLocation()就可以弹出授权框,

在调用前需要在app.json中设置用途说明

Page({
"permission": {
 "scope.userLocation": {
 "desc": "你的位置信息将用于xxx"
 }
 }
})

授权框

微信小程序用户授权、位置授权及获取微信绑定手机号

但是存在不少用户会拒绝授权,如果拒绝授权就不会再弹窗,而是直接进入接口 fail 回调,就要手动授权,我们可以通过自定义弹窗来诱导用户授权。我这里用的是wx.showMoadl确认框。

确认框

微信小程序用户授权、位置授权及获取微信绑定手机号

如果确认就调用wx.opensetting调出授权设置页面

wx.showModal({
   title: '提醒',
   content: '您拒绝了位置授权,将无法使用大部分功能,点击确定重新获取授权',
   success(res) {
   //如果点击确定
   if (res.confirm) {
    wx.openSetting({ //打开设置页
    success(res) { //成功,返回页面回调
     //如果同意了位置授权则userLocation=true
     if (res.authSetting["scope.userLocation"]) { //授权中如果有位置授权则执行逻辑
     /*你的代码*/
     }
    }
    })
   }
   }
  })

授权设置页

微信小程序用户授权、位置授权及获取微信绑定手机号

完整代码

wx.getLocation({
  success: function(res) {
  app.globalData.lat = res.latitude;
  app.globalData.lon = res.longitude;
  },
  fail() {
  wx.showModal({
   title: '提醒',
   content: '您拒绝了位置授权,将无法使用大部分功能,点击确定重新获取授权',
   success(res) {
   //如果点击确定
   if (res.confirm) {
    wx.openSetting({
    success(res) {
     //如果同意了位置授权则userLocation=true
     if (res.authSetting["scope.userLocation"]) {
     that.onLoad()
     }
    }
    })
   }
   }
  })
  }
 })

2.用户信息授权

用户授权步骤相对会复杂一点,因为现在获取wx.getUserInfo 接口后续将不再出现授权弹窗。需要手动点击去授权,所以也是需要诱导用户去点击按钮。

<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">确认</button>

open-type 我用到了两种

  • getUserInfo 获取用户信息,可以从bindgetuserinfo回调中获取到用户信息
  • getPhoneNumber 获取用户手机号,可以从bindgetphonenumber回调中获取到用户信息(下面有)

注意:这里必须是button组件才能触发

这里我将他封装成了一个模拟的弹出框(样式丑陋,自己修改),wxss就不发出来了

模拟弹出框

微信小程序用户授权、位置授权及获取微信绑定手机号

<!-- wxml -->
<view class='getInfo' wx:if="{{haveInfo}}">
 <view class='content'>
 <view class='text'>我们需要获取您的授权信息</view>
 <view class='btn_block'>
  <button class='btn1' bindtap='no'>拒绝</button>
  <button class='btn2' open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">确认</button>
 </view>
 </view>
</view>

调用bindUserInfo,如果e.detail.userInfo存在,则说明授权成功

bindGetUserInfo(e) {
 //用户点击允许授权
 if (e.detail.userInfo) {
  //业务逻辑
 }

授权成功后即可再调用wx.getUserInfo(),就可以获得用户信息

完整代码

bindGetUserInfo(e) {
 //用户点击允许授权
 if (e.detail.userInfo) {
  this.setData({
  haveInfo: false
  })
  // 获取用户信息
  wx.getSetting({
  success: res => {
   if (res.authSetting['scope.userInfo']) {
   wx.getUserInfo({
    success: res => {
    app.globalData.userInfo = res.userInfo
    //业务代码
    }
   })
   }
  }
  })
 }
 }

3.获取用户手机授权

用户手机授权也是需要诱导用户去点击按钮触发的授权框,所以也是要自定义。

和获取用户信息的自定义框不同的是按钮属性

<button class='btn2' open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">确认</button>

bindgetphonenumber函数调用成功会返回三个值:

  • encryptedData:包括敏感数据在内的完整用户信息的加密数据,详细见加密数据解密算法
  • iv:加密算法的初始向量,详细见加密数据解密算法
  • cloudID:敏感数据对应的云 ID,开通云开发的小程序才会返回,可通过云调用直接获取开放数据,详细见云调用直接获取开放数据

其中我用到的是encryptedData、iv,将这两个发给后端去解码,可以获得三个值(写入数据库就交给后端了,就不用再多个步骤)

  • phoneNumber:用户绑定的手机号(国外手机号会有区号)
  • purePhoneNumber:没有区号的手机号
  • countryCode:区号

如果获取成功才会返回三个值,失败则不会,所以我们判断是否授权获取手机可以直接用那三个值判断

我的代码↓

//获取用户手机
 getPhoneNumber(e) {
 if (e.detail.encryptedData) {
  this.setData({
  havePhone: false
  })
  wx.request({
  url: app.globalData.url + 'xiao_bindphone',
  method: 'POST',
  header: {
   "Content-Type": "application/x-www-form-urlencoded"
  },
  data: {
   user_id: app.globalData.user_id,
   sessionKey: app.globalData.sessionKey,
   encryptedData: e.detail.encryptedData,
   iv: e.detail.iv
  },
  success(res) {
   //业务代码
  }
  })
 }
 },

三个授权就写到这啦,下面写下我的流程和逻辑

————————————————————————————————

如果是新用户进入小程序的话,提交code到后端,后端在数据库创建新的用户,此时的新用户数据只有少量数据的(如后端自己创建的id),所以我们需要将能获取到的值传给后端完善数据库。

一、判断数据库中此用户是否有头像和名称,没有则需要授权用户数据(传头像和名称),将得到的头像和名称传到后端完善数据库,此时需要用到用户信息的授权,即wx.getUserInfo。

二、判断数据库中此用户是否有手机号,没有则调用获取手机号授权,即getPhoneNumber。

三、关于位置授权是项目需要,可调用wx.getLocation。

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

Javascript 相关文章推荐
用javascript获取地址栏参数
Dec 22 Javascript
JavaScript 学习点滴记录
Apr 24 Javascript
jquery ready()的几种实现方法小结
Jun 18 Javascript
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
JS弹出窗口代码大全(详细整理)
Dec 21 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
JavaScript中定义函数的三种方法
Mar 12 Javascript
获取select的value、text值的简单示例(jquery与javascript)
Dec 07 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
May 11 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 21 Javascript
前端canvas中物体边框和控制点的实现示例
Aug 05 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 #Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 #Javascript
jquery实现下载图片功能
Jul 18 #jQuery
jQuery实现图片下载代码
Jul 18 #jQuery
使用react context 实现vue插槽slot功能
Jul 18 #Javascript
jquery图片预览插件实现方法详解
Jul 18 #jQuery
vue使用自定义指令实现拖拽
Jan 29 #Javascript
You might like
destoon官方标签大全
2014/06/20 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
Zend Framework教程之前端控制器Zend_Controller_Front用法详解
2016/03/07 PHP
Laravel手动分页实现方法详解
2016/10/09 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
常用js脚本
2006/12/03 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
Vue利用History记录上一页面的数据方法实例
2018/11/02 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
2019/11/07 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
Python笔记之工厂模式
2019/11/20 Python
python numpy库np.percentile用法说明
2020/06/08 Python
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
TheFork葡萄牙:欧洲领先的在线餐厅预订平台
2019/05/27 全球购物
params有什么用
2016/03/01 面试题
linux面试题参考答案(9)
2016/01/29 面试题
公司薪酬管理制度
2014/01/31 职场文书
科技开发中心办公室主任岗位责任制
2014/02/10 职场文书
报关员个人职业生涯规划书
2014/03/12 职场文书
2015年会计人员工作总结
2015/05/22 职场文书
警示教育片观后感
2015/06/17 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书