导航
导航
文章目录
  1. 需求
  2. 依赖
  3. 安装
  4. mpvue
  5. 原生示例脚手架
  6. 执行API接口
  7. 执行权限API接口
  8. 用户授权接口
  9. 示例
    1. 获地理位置
    2. 获取用户信息
    3. 发起请求
      1. 设置请求域名
      2. 前置拦截(发起请求前)
      3. 后置拦截(收到返回数据后)
      4. 发起POST、GET
      5. 同时发起30个请求
    4. Page 增强

微信小程序API接口加强版

需求

因小程序迭代太快了,很多接口都要兼容处理,

比如网络请求、拦截、下载文件等接口有并发限制,

功能加强,跨页面通讯、跨页面传值、数据响应式、接口Promise化、 mixins 等,

还有一些接口如果用户第一时间没有同意授权会无法正常使用,

该库就是为了处理这些情况而生。


依赖


安装

1
npm install --save weapp-extra

mpvue

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import Vue from 'vue'
import App from './index'
import Zls from 'weapp-extra'

Vue.prototype.$zls = Zls

const app = new Vue(App)
app.$mount()
app.app = getApp()
export default {
config: {
navigationBarTitleText: '首页'
}
}

index.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<template>
<div>
...
</div>
</template>

<script>
export default {
components: {},
methods: {},
data() {
return {}
},
created() {
this.$zls.get('http://baidu.com/?q=程序猿又死一个?')
//监听一个userAuth的自定义事件
this.$zls.on('userAuth',(e)=>{
console.log('收到',e)
})

//在其他页触发 userAuth 事件
//this.$zls.emit('userAuth','hi')

//this.$zls
}
}
</script>

<style lang='less' scoped>
@import '../../utils/vars';
</style>

原生示例脚手架

请先安装构建工具 - zls-cli

1
2
3
4
5
6
7
npm install -g zls-cli

zls new weapp-template ProjectFolder

cd ProjectFolder

npm run dev

执行API接口

突破了网络请求、下载文件等接口有并发限制,支持大量网络请求

extra.api(wxapi, options, ...params)

参说明数

wxapi: 接口名称(如’getLocation’,’getUserInfo’)

options: 微信接口OBJECT参数

…params: 微信接口其参数

返回值

Promis对象


执行权限API接口

extra.authApi (wxapi, scope = null, must = 1, tip = {}, errorText = {}, options, ...params)

参说明数

wxapi: 接口名称(如’getLocation’,’getUserInfo’)

scope: scope(包含scope.,如’scope.userLocation’)/false(不验证scope权限执行)

must: 执行方式 -1:必须开启权限执行(必须设置scope)/0:静默执行没有权限不提示/1:没权限下提示一次

tip: 没有权限时候的提示弹窗/false不显示弹窗

errorText: 开启权限失败的提示弹窗/false不显示弹窗

…params: 微信接口其参数

返回值

Promis对象


用户授权接口

extra.login(check = true, must = 1, tip = {}, errorText = null)

参说明数

check: 是否会话过期的情况才去发起授权,如果在有效期只会返回 resolve(true)

must: 执行方式 -1:必须开启权限执行/0:静默执行没有权限不提示/1:没权限下提示一次

tip: 没有权限时候的提示弹窗/false不显示弹窗

errorText: 开启权限失败的提示弹窗/false不显示弹窗

返回值

Promis对象

成功:

  1. check 为 true 并且在会话有效期只会返回 true

  2. check 为 false 返回 wx.getUserInfo 的值,并且包含一个 code 字段,值:login的code

失败:

  1. 有 code 字段

  2. 无 code 字段

具体参考 errMsg 字段


示例

获地理位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//index.js
const app = getApp()
const extra = require("../../utils/extra")

Page({
data: {
location: false
},
onLoad() {
extra
.authApi("getLocation", "scope.userLocation", 1, "请开启地理位置功能")
.then(e => {
console.log("获取成功", e)
this.setData({
location: e
})
})
.catch(err => {
console.warn("获取失败", err)
})
}
})

获取用户信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

//index.js
const app = getApp()
const extra = require("../../utils/extra")

Page({
data: {
},
//事件处理函数
bindViewTap() {
wx.navigateTo({
url: "../logs/logs"
})
},
onLoad() {
extra
.login(
false,
1,
"请开启用户信息功能",
"没有开启用户信息功能\n程序部分功能受限"
)
.then(e => {
//可以把e.code提交到服务器获openid等信息
console.log("获取成功", e)
})
.catch(err => {
//可以把err.code提交到服务器获openid等信息
console.warn("获取失败", err)
})
}
})

发起请求

设置请求域名

设置了以下的post,get都可以忽略域名部分

1
extra.setConfig({host:'https://baidu.com/'})

前置拦截(发起请求前)

1
2
3
4
5
6
this.$zls.setConfig({
requestBefore(e) {
e.header = Object.assign(e.header || {}, { Authorization: '授权Authorization' })
return e
}
})

后置拦截(收到返回数据后)

1
2
3
4
5
6
this.$zls.setConfig({
requestAfter(e) {
//可以在这里进行数据的过滤整理
return e
}
})

发起POST、GET

1
2
3
4
5
6
7
8
9
//访问http://baidu.com
extra.get('/').then(e => {
console.log(i + '结果', e)
})

//访问http://baidu.com/q
extra.post('/q',{name:123}).then(e => {
console.log(i + '结果', e)
})

同时发起30个请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
for (let i = 1; i <= 30; i++) {
extra.api('request', {
url: 'http://baidu.com', //仅为示例,并非真实的接口地址
data: {},
header: {
'content-type': 'application/x-www-form-urlencoded'
}
})
.then(e => {
console.log(i + '结果', e)
})
.catch(e => {
console.error(i + '出错', e)
})
.finally(() => {
console.warn(i + '请求结束')
})
}

Page 增强

1
2
3
4
5
6
7
8
9
10
11
//替换掉 Page()
extra.page({
data: {
text: "Hello World",
},
onLoad() {
//自动更新data数据
this.$data.text = 'In the work overtime'
this.get('http://baidu.com/?q=程序猿又死一个?')
}
})
支持一下
扫一扫,支持一下