weapp-extra

需求

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

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

功能加强，跨页面通讯、跨页面传值、数据响应式、接口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>来触发，那么我们有两种选择

1. 如果用户没有授权在页面显示一个授权按钮

2. 建立一个授权专用的页面里面放置一个授权按钮，当用户没有授权的时候跳转到该页面

然后当用户点击了 按钮 会触发 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
    })
 
  }
})