MPVue 开发小程序的通用能力封装Promisify 的 wx APIimport { wxp } from 'common-mpvue'; wxp.request({ ...config }).then(resp => { // do something }); import { PersistStore } from 'common-mpvue'; const store = new PersistStore({ ...storeOptions }); 方便不同页面间通信,为保证同一个 emitter 实例,请通过getApp().emitter获取这个绑定在 app 下的 emitter 实例 const app = getApp(); // 添加监听 app.emitter.on('event1', function() {}); // 添加一次性监听 app.emitter.once('event1', function() {}); // 移除监听 app.emitter.off('event1', listener); // 移除全部监听 app.emitter.offAll('event1'); 解决了页面栈过大时无法跳转的问题,自动使用redirectTo替代navigateTo const app = new App(); app.nav.navigateTo('/pages/index/index', { param1: '1' }); app.nav.navigateToH5('https://example.com'); Utilities 提供少量的实用方法 const app = getApp(); // 给url添加query参数 app.utils.addUrlQuery('/pages/index/index', { param1: '1' }); // 解析url的query为对象 app.utils.parseUrlQuery('/pages/index/index?param1=1'); 提供了封装的 Request 对象,适度的请求队列管理,建议使用wx.httpRequest或wxp.httpRequest wx.httpRequest.httpGet('https://example.com', { param1: '1' }); // json形式post wx.httpRequest.httpJsonPost('https://example.com', { data1: '1' }, { ...requestOptions }); // form表单形式post wx.httpRequest.httpFormPost('https://example.com', { data1: '1' }, { ...requestOptions }); // httpPost等同httpFormPost wx.httpRequest.httpPost('https://example.com', { data1: '1' }, { ...requestOptions }); 为了减少重复填写配置,可以重新实例化一个有固定配置的请求实例 // 配置请求携带token并以cookie形式传递 const httpRequest = wx.httpRequest .auth() .cookieToken() .form(); httpRequest.GET('https://example.com'); httpRequest.POST('https://example.com', { data1: '1' }); 目前支持如下配置链
为了将这些能力引入到 app,wx,wxp 等对象上,需要按如下操作:入口 main.js import { wrap } from 'common-mpvue'; import App from './index.vue'; wrap(App); import { WrapPage } from 'common-mpvue'; import Page from './index.vue'; new WrapPage(Page); // 或者为页面添加vuex store new WrapPage(Page, { state() { name: ''; }, mutations: { updateName(state, name) { state.name = name; } } }); 在页面的 vue 单文件组件内,可以通过this.$app访问小程序 app 实例,可以通过this.$store访问共享的业务 vuex store,可以通过this.$state访问该页面的状态模块 |
使用mpvue开发小程序通用能力封装
发布:2018-05-09 11:07浏览: 次来源:网络 作者:cola
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序app.json文件常用配置说明2021-07-09
- 微信小程序文字控制单行超过显示省略号2021-07-09
- 微信小程序参数传递的几种方法2021-07-09
- 微信小程序使用button按钮分享2021-07-09
- 微信小程序的setData2021-07-09
- 小程序分享,获取openid2021-07-08
- 微信小程序-实现tab2021-07-08
- 微信开发者工具新建和导入小程序2021-07-08
- 微信小程序实现点击拍照长按录像功能2021-07-08
- 微信小程序必知知识2021-07-08