微信小程序中常见的几种授权封装(可直接下载使用)

微信小程序中常见的几种授权:
在这里插入图片描述
代码下载地址:https://download.csdn.net/download/weixin_39152200/12569931
压缩包中包含两个文件:authorize.js和md5.js
使用方法: 将这两个文件放到utils目录中,在需要使用的页面js文件中引入

let authorize = require('../../utils/authorize.js');

授权方法调用:
1、登录 + 获取openID
在authorize.js的login方法中,修改获取openID的接口地址在这里插入图片描述
然后在页面中调用:

authorize.login().then(res => {
  // 调用成功
  console.log(res)
}).catch(res => {
  // 调用失败
})

2、获取用户信息

authorize.getUserInfo().then(res => {
  // 调用成功
  console.log(res)
  if (res) { // 获取用户信息成功

  } else { // 用户未授权

  }
}).catch(res => {
  // 调用失败
})

authorize.js中的方法只能在用户已经授权的情况下获取用户信息,如果用户没有授权,需要引导用户点击授权按钮,见文档:https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01
具体方法以后会单独出一期

3、获取用户授权信息
获取用户授权信息,若未授权会调起授权弹框(获取用户信息的时候除外),可以选择是否必须授权才能进行下一步,接下来以获取地理位置为例

authorize.getAuthSetting('scope.userLocation', true, '地理位置信息').then(res => {
  console.log(res) // res为true则表示已经授权,false表示未授权
}).catch(res => {
  // 调用失败
})

getAuthSetting方法有三个参数:

  • 第一个参数代表需要授权的权限字段名,具体值见微信官方文档中scoped列表
    在这里插入图片描述
  • 第二个参数代表是否必须授权才能进行下一步,为true则必须,false为非必须
  • 第三个参数代表权限的描述,用于弹框提示中的显示

4、获取用户地理位置
这里获取地理位置使用的是签名算法,需要去腾讯地图开放平台中申请key并进行配置
在这里插入图片描述
首先在authorize.js中填写腾讯地图的key和签名
在这里插入图片描述
然后在页面中调用

authorize.getLocation().then(res => {
  console.log(res)
}).catch(res => {
  // 调用失败
  console.log(res)
})
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序的请求地址封装一般有以下几种方式: 1. 直接使用原生的wx.request()方法,将请求地址直接写在其。这种方式比较简单,但是在多个地方都需要请求同一个地址时,会导致代码重复,不易维护。 2. 在app.js定义全局变量,存储请求地址,然后在需要发送请求的页面引入app.js,在请求时使用全局变量的地址。这种方式可以避免代码重复,但是在需要请求多个地址时,需要定义多个全局变量,会导致代码臃肿。 3. 封装一个工具类,将请求地址作为参数传入封装好的方法。这种方式可以解决以上两种方式的问题,可以在工具类定义多个请求地址,在需要发送请求时,只需要传入对应的地址即可。 下面是一个简单的请求地址封装示例: ```javascript // 工具类 request.js const BASE_URL = 'https://example.com/api/' function request(url, data, method = 'GET') { return new Promise((resolve, reject) => { wx.request({ url: BASE_URL + url, data, method, success: res => { resolve(res.data) }, fail: err => { reject(err) } }) }) } export default request ``` 使用时,在需要发送请求的页面引入request.js,然后调用封装好的request方法即可: ```javascript import request from './request.js' // 发送 GET 请求 request('users', { id: 1 }).then(res => { console.log(res) }) // 发送 POST 请求 request('users', { name: 'John' }, 'POST').then(res => { console.log(res) }) ``` 以上示例,BASE_URL为请求地址的公共部分,request方法接受三个参数,其url为请求地址的相对路径,data为请求参数,method为请求方法,默认为GET。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值