频道栏目
首页 > 微信学院 > 微信小程序 > 正文
使用mpvue开发小程序通用能力封装-实战教程
2018-04-13 02:03:16           
收藏   我要投稿

MPVue 开发小程序的通用能力封装

Promisify 的 wx API

import { wxp } from 'common-mpvue';

wxp.request({ ...config }).then(resp => {
    // do something
});

可持久化至小程序 storage 的 VueStore

import { PersistStore } from 'common-mpvue';

const store = new PersistStore({
    ...storeOptions
});

Emitter

方便不同页面间通信,为保证同一个 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');

Navigator

解决了页面栈过大时无法跳转的问题,自动使用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

提供了封装的 Request 对象,适度的请求队列管理,建议使用wx.httpRequestwxp.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' });

目前支持如下配置链

  • auth - 携带 token 用于鉴权,auth(true)
  • tokenKey - 携带 token 的 key,tokenKey('key')
  • cookieToken - 通过 cookie 携带 token
  • qsToken - 通过 url query 携带 token
  • form - 通过 form 表单形式 post
  • custom - 携带自定义 header 头,包含设备信息等

    说明

    为了将这些能力引入到 app,wx,wxp 等对象上,需要按如下操作:

    入口 main.js

    import { wrap } from 'common-mpvue';
    import App from './index.vue';
    
    wrap(App);

    页面 main.js

    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访问该页面的状态模块。

点击复制链接 与好友分享!回本站首页
上一篇:java开发者一行代码搞定微信小程序用户认证实战教程
下一篇:微信小程序 使用wxs计算获取到的数据-教程
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站