weapp-extra
v2.4.0
Published
微信小程序API接口加强版,接口Promise化,发起登录授权,支持要求强制开启API权限,跨页面通讯,数据响应式,mixins等
Downloads
1
Readme
需求
因小程序迭代太快了,很多接口都要兼容处理,
比如网络请求、拦截、下载文件等接口有并发限制,
功能加强,跨页面通讯、跨页面传值、数据响应式、接口Promise化、 mixins 等,
还有一些接口如果用户第一时间没有同意授权会无法正常使用,
该库就是为了处理这些情况而生。
依赖
无
安装
npm install --save weapp-extra
mpvue
main.js
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
<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
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(successCb, errorCb, ignorecheck = false)
参说明数
successCb: 用户授权成功回调方法,successCb(res:用户授权信息,v:login信息用于与服务器传递获取sessionKey)
errorCb 用户还没授权回调方法
ignorecheck 是否忽略判断sessionKey是否过期
通知用户授权情况
由于现在微信小程序不能主动弹出用户授权窗口,必须用<button open-type="getUserInfo" bindgetuserinfo='getUserInfo'>登录</button>
来触发,那么我们有两种选择
如果用户没有授权在页面显示一个授权按钮
建立一个授权专用的页面里面放置一个授权按钮,当用户没有授权的时候跳转到该页面
然后当用户点击了 按钮 会触发 getUserInfo 事件,我们在该事件中调用通知extra.emitLogin(data)
,具体看下面 “获取用户信息” 示例。
示例
获取用户信息
//首页
const app = getApp()
const extra = require("../../utils/extra")
Page({
data: {
},
onLoad() {
extra.login((e, loginCode) => {
console.log('登录成功', e, loginCode)
}, e => {
console.log('没有登录成功,跳转到授权页面/或显示登录按钮吧')
wx.navigateTo({
url: '/pages/login/index'
})
})
}
})
//登录页
//login.js
const app = getApp()
const extra = require("../../utils/extra")
Page({
data: {
},
getUserInfo(e) {
if (extra.emitLogin(e)) {
console.log('授权成功.返回上一页吧')
wx.navigateBack()
}
},
onUnload() {
//防止用户没有授权就返回上一页面
extra.emitLogin(false)
}
})
<!--index.wxml-->
<view class="container">
<button open-type="getUserInfo" bindgetuserinfo='getUserInfo'>登录</button>
</view>
获地理位置
//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)
})
}
})
发起请求
设置请求域名
设置了以下的post,get都可以忽略域名部分
extra.setConfig({host:'https://baidu.com/'})
前置拦截(发起请求前)
this.$zls.setConfig({
requestBefore(e) {
e.header = Object.assign(e.header || {}, { Authorization: '授权Authorization' })
return e
}
})
后置拦截(收到返回数据后)
this.$zls.setConfig({
requestAfter(e) {
//可以在这里进行数据的过滤整理
return e
}
})
发起POST、GET
//访问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个请求
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 增强
内部对 setData 进行了性能优化
//替换掉 Page()
extra.page({
data: {
text: "Hello World",
text2: "Hello World",
text3: "Hello World",
},
onLoad() {
//自动更新data数据
this.$data.text = 'In the work overtime'
this.get('http://baidu.com/?q=程序猿又死一个?')
//先缓存起来
this.$data.$cache()
this.$data.text2 = 'xxxx'
this.$data.text3 = 'oooo'
//数据一起更新
this.$data.$commit(()=>{
// 更新ok
})
}
})