MPVue 开发小程序的通用能力封装
Promisify 的 wx API
; wxp;
可持久化至小程序 storage 的 VueStore
; const store = storageKey ...storeOptions;
Emitter
方便不同页面间通信,为保证同一个 emitter 实例,请通过getApp().emitter
获取这个绑定在 app 下的 emitter 实例
const app = ; // 添加监听appemitter; // 添加一次性监听appemitter; // 移除监听appemitter; // 移除全部监听appemitter;
Navigator
解决了页面栈过大时无法跳转的问题,自动使用redirectTo
替代navigateTo
const app = ; appnav; appnav;// 注意配置小程序webview页面 /pages/webview/webview
Utilities
提供少量的实用方法
const app = ; // 给url添加query参数apputils;// => /pages/index/index?param1=1 // 解析url的query为对象apputils;// => {param1: 1}
Request
提供了封装的 Request 对象,适度的请求队列管理,建议使用wx.httpRequest
或wxp.httpRequest
这个绑定在全局变量下的固定实例
wxhttpRequest; // json形式postwxhttpRequest; // form表单形式postwxhttpRequest; // httpPost等同httpFormPostwxhttpRequest;
为了减少重复填写配置,可以重新实例化一个有固定配置的请求实例
// 配置请求携带token并以cookie形式传递const httpRequest = wxhttpRequest form; httpRequest; httpRequest;
目前支持如下配置链
- auth - 携带 token 用于鉴权,auth(true)
- tokenKey - 携带 token 的 key,tokenKey('key')
- headerToken - 通过 header 携带 token
- cookieToken - 通过 cookie 携带 token
- qsToken - 通过 url query 携带 token
- form - 通过 form 表单形式 post
- custom - 携带自定义 header 头,包含设备信息等
按照约定优于配置的原则,推荐数据接口有统一约定的响应
推荐格式
说明
为了将这些能力引入到 app,wx,wxp 等对象上,需要按如下操作:
入口 main.js
;; wrapApp, appConfig, appProps; wrap的签名如下 /** * 封装和扩展小程序app实例以及wx * @param App 入口的Vue组件 * @param config app配置 * @param props 给app实例扩展更多的方法或属性 */wrapApp, config: AppConfig, props?: BaseKV
页面 main.js
;; Page; // 或者为页面添加vuex storePage { name: ''; } mutations: { statename = name; } ;
在页面的 vue 单文件组件内,可以通过this.$app
访问小程序 app 实例,可以通过this.$store
访问共享的业务 vuex store,可以通过this.$state
访问该页面的状态模块