使用mpvue開發(fā)小程序通用能力封裝
發(fā)布時間：2018-05-09 11:07 所屬欄目：小程序開發(fā)教程
MPVue 開發(fā)小程序的通用能力封裝Promisify 的 wx API
import { 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();
// 添加監(jiān)聽
app.emitter.on('event1', function() {});
// 添加一次性監(jiān)聽
app.emitter.once('event1', function() {});
// 移除監(jiān)聽
app.emitter.off('event1', listener);
// 移除全部監(jiān)聽
app.emitter.offAll('event1');
解決了頁面棧過大時無法跳轉(zhuǎn)的問題，自動使用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參數(shù)
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 });
為了減少重復(fù)填寫配置，可以重新實例化一個有固定配置的請求實例
// 配置請求攜帶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 單文件組件內(nèi)，可以通過this.$app訪問小程序 app 實例，可以通過this.$store訪問共享的業(yè)務(wù) vuex store，可以通過this.$state訪問該頁面的狀態(tài)模塊 |
