您当前浏览的是旧版文档，不再维护更新，点击这里跳转Mpx全新官网

扩展mpx

目前已有插件

• 网络请求库fetch: @mpxjs/fetch 详细介绍 源码地址

• 小程序api promisify：@mpxjs/promisify (已废弃，推荐使用新的api-proxy)

• 小程序API转换及promisify：@mpxjs/api-proxy 详细介绍 源码地址

• mock数据：@mpxjs/mock 详细介绍 源码地址

• 小程序中的webview的API抹平：webview-bridge 详细介绍 源码地址

开发插件

mpx支持使用mpx.use使用插件来进行扩展。插件本身需要提供一个install方法或本身是一个function，该函数接收一个proxyMPX。插件将采用直接在proxyMPX挂载新api属性或在prototype上挂属性。需要注意的是，一定要在app创建之前进行mpx.use

基础例子

扩展: test.js

export default function install(proxyMPX) {
  proxyMPX.newApi = () => console.log('is new api')
  proxyMPX
    .mixin({
      onLaunch() {
        console.log('app onLaunch')
      }
    }, 'app')
    .mixin({
      onShow() {
        console.log('page onShow')
      }
    }, 'page') // proxyMPX.injectMixins === proxyMPX.mixin

    //  注意：proxyMPX.prototype上挂载的属性都将挂载到组件实例（page实例、app实例上，可以直接通过this访问）, 可以看mixin中的case
    proxyMPX.prototype.testHello = function() {
      console.log('hello')
    }
}

在app.js内使用插件

import mpx from '@mpxjs/core'
import test from './test'
mpx.use(test)
mpx.createApp({
  onLaunch() {
    mpx.newApi() // out put: "is new api"
    this.testHello() // output: 'hello'
  }
})

Fetch

小程序request存在不限域名的并发限制，因此封装一个fetch来处理这种缺陷，能支持请求优先级，同时fetch还支持拦截器，请求取消等等

使用说明

import mpx from '@mpxjs/core'
import mpxFetch from '@mpxjs/fetch'
mpx.use(mpxFetch)
// 第一种访问形式
mpx.xfetch.fetch({
    url: 'http://xxx.com'
}).then(res => {
    console.log(res.data)
})

mpx.createApp({
    onLaunch() {
        // 第二种访问形式
        this.$xfetch.fetch({url: 'http://test.com'})
    }
})

导入api说明

mpx-fetch提供了一个实例 xfetch ，该实例包含以下api

• fetch(config, priority)， 正常的promisify风格的请求方法, priority表示请求优先级（normal，low），默认为normal
• addLowPriorityWhiteList(rules)， 按域名规则设置低优先级请求的白名单，接收一个参数，可以是字符串，也可以是正则表达式，也可以是数组 (如果fetch传入了第二个参数，那么无视这个白名单)
• CancelToken，实例属性，用于创建一个取消请求的凭证。
• create()， 用于创建一个新的mpx-fetch实例
• interceptors，实例属性，用于添加拦截器，包含两个属性，request & response

请求优先级

mpx.xfetch.fetch({
    url: 'http://xxx.com',
    data: {
        name: 'test'
    }
}, 'low')

// or addSignWhiteList
mpx.xfetch.addLowPriorityWhiteList('http://xxx.com')

请求拦截器

mpx.xfetch.interceptors.request.use(function(config) {
    console.log(config)
    // 也可以返回promise
    return config
})
mpx.xfetch.interceptors.response.use(function(res) {
    console.log(res)
    // 也可以返回promise
    return res
})

请求中断

const cancelToken = new mpx.xfetch.CancelToken()
mpx.xfetch.fetch({
    url: 'http://xxx.com',
    data: {
        name: 'test'
    },
    cancelToken: cancelToken.token
})
cancelToken.exec('手动取消请求') // 执行后请求中断，返回abort fail

支持 emulateJSON

mpx.xfetch.fetch({
    url: 'http://xxx.com',
    method: 'POST',
    data: {
        name: 'test'
    },
    emulateJSON: true // 等价于header = {'content-type': 'application/x-www-form-urlencoded'}
})

支持 params

mpx.xfetch.fetch({
    url: 'http://xxx.com',
    params: {
        name: 'test'
    }
})

mpx.xfetch.fetch({
    url: 'http://xxx.com',
    method: 'POST',
    params: {
        age: 10
    },
    data: {
        name: 'test'
    },
    emulateJSON: true // 等价于header = {'content-type': 'application/x-www-form-urlencoded'}
})

API-PROXY

convert API at each end 各个平台之间 api 进行转换

Usage

// 使用 mpx 生态

import mpx from '@mpxjs/core'
import apiProxy from '@mpxjs/api-proxy'

mpx.use(apiProxy, options)

// 单独使用
import apiProxy from '@mpxjs/api-proxy'

apiProxy(target, options) // target 为要抹平的对象

Options

example

普通形式

import mpx from '@mpxjs/core'
import apiProxy from '@mpxjs/api-proxy'

mpx.use(apiProxy, {
  exclude: ['showToast'] // showToast 将不会被转换为目标平台
})

mpx.showModal({
  title: '标题',
  content: '这是一个弹窗',
  success (res) {
    if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})

使用promise形式

import mpx from '@mpxjs/core'
import apiProxy from '@mpxjs/api-proxy'

mpx.use(apiProxy, {
  usePromise: true
})

mpx.showActionSheet({
  itemList: ['A', 'B', 'C']
})
.then(res => {
  console.log(res.tapIndex)
})
.catch(err => {
  console.log(err)
})

Mock

mock数据生成规则同mockjs

使用说明

import mock from '@mpxjs/mock'
// rule 为字符串或正则表达式
mock([{
  url: 'http://api.example.com',
  rule: {
        'list|1-10': [{
            'id|+1': 1
        }]
    }
}])

webview-bridge

Mpx支持小程序跨平台后，多个平台的小程序里都有webview组件，webview打开的页面和小程序可以通过API来通信以及调用一些小程序能力，但是各方webview提供的API是不一样的。

比如微信是用 wx.miniProgram.navigateTo 来跳转到别的小程序页面，而支付宝里是 my.navigateTo ，那么我们开发H5时候为了让H5能适应各家小程序平台就需要写多份对应逻辑。

为解决这个问题，Mpx提供了用于运行在小程序的webview里的H5抹平平台差异的bridge库：@mpxjs/webview-bridge

使用方式很简单，不过注意这个库是给H5用的，不是给小程序用的。在H5项目中引入。

使用示例

支持script标签引入和npm引入，标签引入的话，全局实例是mpx（npm模块使用下也鼓励import mpx from '@mpxjs/webview-birdge'），使用就例如 mpx.navigateTo ，能保持整个项目风格完全一致。

提供的API如下：navigateTo, navigateBack, switchTab, reLaunch, redirectTo, getEnv, postMessage, getLoadError