微信小程序API接口加强版,接口Promise化,发起登录授权,支持要求强制开启API权限,跨页面通讯,数据响应式,mixins等
npm install weapp-extra因小程序迭代太快了，很多接口都要兼容处理，
比如网络请求、拦截、下载文件等接口有并发限制，
功能加强，跨页面通讯、跨页面传值、数据响应式、接口Promise化、 mixins 等，
还有一些接口如果用户第一时间没有同意授权会无法正常使用，
该库就是为了处理这些情况而生。
*
无
*
``bash`
npm install --save weapp-extra
*
main.js
`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
`html
...
`
请先安装构建工具 - zls-cli
`bash
npm install -g zls-cli
zls new weapp-template ProjectFolder
cd ProjectFolder
npm run dev
`
*
> 突破了网络请求、下载文件等接口有并发限制，支持大量网络请求
extra.api(wxapi, options, ...params)
参说明数
wxapi： 接口名称（如'getLocation','getUserInfo'）
options： 微信接口OBJECT参数
...params： 微信接口其参数
返回值
Promis对象
*
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是否过期
由于现在微信小程序不能主动弹出用户授权窗口，必须用来触发，那么我们有两种选择
1. 如果用户没有授权在页面显示一个授权按钮
2. 建立一个授权专用的页面里面放置一个授权按钮，当用户没有授权的时候跳转到该页面
然后当用户点击了 按钮 会触发 getUserInfo 事件，我们在该事件中调用通知extra.emitLogin(data)，具体看下面 “获取用户信息” 示例。
//首页
`js
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'
})
})
}
})
`
//登录页
`js
//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)
}
})
`
`html`
`js
//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都可以忽略域名部分
`js`
extra.setConfig({host:'https://baidu.com/'})
#### 前置拦截（发起请求前）
`js`
this.$zls.setConfig({
requestBefore(e) {
e.header = Object.assign(e.header || {}, { Authorization: '授权Authorization' })
return e
}
})
#### 后置拦截（收到返回数据后）
`js`
this.$zls.setConfig({
requestAfter(e) {
//可以在这里进行数据的过滤整理
return e
}
})
#### 发起POST、GET
`js
//访问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个请求
`js`
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 + '请求结束')
})
}
内部对 setData 进行了性能优化
`js
//替换掉 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
})
}
})
``