Mpx框架

# 周边拓展

# mpx-fetch

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

# fetch(config)

正常的promisify风格的请求方法

  • 参数：

    • {Object} config

      config 可指定以下属性：

      • url

        类型：string

        设置请求url

      • method

        类型：string

        设置请求方式，默认为GET

      • data

        类型：Object

        设置请求参数

      • params

        类型：Object

        设置请求参数，参数会以 Query String 的形式进行传递

      • timeout

        类型：Number

        单位为毫秒。若不传，默认读取app.json文件中__networkTimeout属性。 对于超时的处理可在 catch 方法中进行

      • emulateJSON

        类型：Boolean

        设置为 true 时，等价于 header = {'content-type': 'application/x-www-form-urlencoded'}

  • 示例：

import mpx from '@mpxjs/core'
import mpxFetch from '@mpxjs/fetch'
mpx.use(mpxFetch)
// 第一种访问形式
mpx.xfetch.fetch({
	url: 'http://xxx.com',
	method: 'POST',
	params: {
		age: 10
	},
	data: {
		name: 'test'
	},
	emulateJSON: true 
}).then(res => {
	console.log(res.data)
})

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

# CancelToken

实例属性，用于创建一个取消请求的凭证。

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

# create()

用于创建一个新的mpx-fetch实例

  • 示例:
const newFetch = new mpx.xfetch.create() // 生成新的mpx-fetch实例

# interceptors

实例属性，用于添加拦截器，包含两个属性，request & response

  • 示例:
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
})

# api-proxy

Mpx目前已经支持的API转换列表，供参考

方法/平台 wx ali web
getSystemInfo ✅ ✅ ✅
getSystemInfoSync ✅ ✅ ✅
nextTick ✅ ✅ ✅
showToast ✅ ✅ ✅
hideToast ✅ ✅ ✅
showModal ✅ ✅ ✅
showLoading ✅ ✅ ✅
hideLoading ✅ ✅ ✅
showActionSheet ✅ ✅ ✅
showNavigationBarLoading ✅ ✅ ❌
hideNavigationBarLoading ✅ ✅ ❌
setNavigationBarTitle ✅ ✅ ✅
setNavigationBarColor ✅ ✅ ✅
request ✅ ✅ ✅
downloadFile ✅ ✅ ❌
uploadFile ✅ ✅ ❌
setStorageSync ✅ ✅ ✅
removeStorageSync ✅ ✅ ✅
getStorageSync ✅ ✅ ✅
saveImageToPhotosAlbum ✅ ✅ ❌
previewImage ✅ ✅ ❌
compressImage ✅ ✅ ❌
chooseImage ✅ ✅ ❌
getLocation ✅ ✅ ❌
saveFile ✅ ✅ ❌
removeSavedFile ✅ ✅ ❌
getSavedFileList ✅ ✅ ❌
getSavedFileInfo ✅ ✅ ❌
addPhoneContact ✅ ✅ ❌
setClipboardData ✅ ✅ ❌
getClipboardData ✅ ✅ ❌
setScreenBrightness ✅ ✅ ❌
getScreenBrightness ✅ ✅ ❌
makePhoneCall ✅ ✅ ❌
stopAccelerometer ✅ ✅ ❌
startAccelerometer ✅ ✅ ❌
stopCompass ✅ ✅ ❌
startCompass ✅ ✅ ❌
stopGyroscope ✅ ✅ ❌
startGyroscope ✅ ✅ ❌
scanCode ✅ ✅ ❌
login ✅ ✅ ❌
checkSession ✅ ✅ ❌
getUserInfo ✅ ✅ ❌
requestPayment ✅ ✅ ❌
createCanvasContext ✅ ✅ ❌
canvasToTempFilePath ✅ ✅ ❌
canvasPutImageData ✅ ✅ ❌
canvasGetImageData ✅ ✅ ❌
createSelectorQuery ✅ ✅ ✅
onWindowResize ✅ ✅ ✅
offWindowResize ✅ ✅ ✅
arrayBufferToBase64 ❌ ❌ ✅
base64ToArrayBuffer ❌ ❌ ✅

# webview-bridge

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

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

为解决这个问题，Mpx 提供了抹平平台差异的bridge库：@mpxjs/webview-bridge。

安装：

npm install @mpxjs/webview-bridge

使用：

import mpx from '@mpxjs/webview-bridge'
mpx.navigateBack()
mpx.env // 输出：wx/qq/ali/baidu/tt
mpx.checkJSApi()

cdn地址引用：

<!-- 开发环境版本，方便调试 -->
<script src="https://dpubstatic.udache.com/static/dpubimg/D2JeLyT0_Y/2.2.43.webviewbridge.js"></script>

<!-- 生产环境版本，压缩了体积 -->
<script src="https://dpubstatic.udache.com/static/dpubimg/PRg145LZ-i/2.2.43.webviewbridge.min.js"></script>


<!-- 同时支持 ES Module 引入的 -->
// index.html
<script type="module" src="https://dpubstatic.udache.com/static/dpubimg/6MQOo-ocI4/2.2.43.webviewbridge.esm.browser.min.js"></script>
// main.js
import mpx from "https://dpubstatic.udache.com/static/dpubimg/6MQOo-ocI4/2.2.43.webviewbridge.esm.browser.min.js"

//ES Module 开发版本地址： https://dpubstatic.udache.com/static/dpubimg/cdhpNhmWmJ/2.2.43.webviewbridge.esm.browser.js

基础方法提供：

方法/平台 wx qq ali baidu tt
navigateTo ✅ ✅ ✅ ✅ ✅
navigateBack ✅ ✅ ✅ ✅ ✅
switchTab ✅ ✅ ✅ ✅ ✅
reLaunch ✅ ✅ ✅ ✅ ✅
redirectTo ✅ ✅ ✅ ✅ ✅
getEnv ✅ ✅ ✅ ✅ ✅
postMessage ✅ ✅ ✅ ✅ ✅
getLoadError ✅ ✅ ✅ ✅ ✅
onMessage ✅ ✅ ❌

扩展方法提供：

方法/平台 wx qq ali baidu tt
checkJSApi ✅ ❌ ❌ ❌ ❌
chooseImage ✅ ❌ ✅ ✅ ❌
previewImage ✅ ❌ ✅ ✅ ❌
uploadImage ✅ ❌ ❌ ❌ ❌
downloadImage ✅ ❌ ❌ ❌ ❌
getLocalImgData ✅ ❌ ❌ ❌ ❌
startRecord ✅ ❌ ❌ ❌ ❌
stopRecord ✅ ❌ ❌ ❌ ❌
onVoiceRecordEnd ✅ ❌ ❌ ❌ ❌
playVoice ✅ ❌ ❌ ❌ ❌
pauseVoice ✅ ❌ ❌ ❌ ❌
stopVoice ✅ ❌ ❌ ❌ ❌
onVoicePlayEnd ✅ ❌ ❌ ❌ ❌
uploadVoice ✅ ❌ ❌ ❌ ❌
downloadVoice ✅ ❌ ❌ ❌ ❌
translateVoice ✅ ❌ ❌ ❌ ❌
getNetworkType ✅ ❌ ✅ ✅ ❌
openLocation ✅ ❌ ✅ ✅ ❌
getLocation ✅ ❌ ✅ ✅ ❌
stopSearchBeacons ✅ ❌ ❌ ❌ ❌
onSearchBeacons ✅ ❌ ❌ ❌ ❌
scanQRCode ✅ ❌ ❌ ❌ ❌
chooseCard ✅ ❌ ❌ ❌ ❌
addCard ✅ ❌ ❌ ❌ ❌
openCard ✅ ❌ ❌ ❌ ❌
alert ✅ ✅ ❌
showLoading ✅ ✅ ❌
hideLoading ✅ ✅ ❌
setStorage ✅ ✅ ✅
getStorage ✅ ✅ ✅
removeStorage ✅ ✅ ✅
clearStorage ✅ ✅ ✅
getStorageInfo ✅ ✅ ✅
startShare ✅ ✅ ❌
tradePay ✅ ✅ ❌
onMessage ✅ ✅ ❌

WARNING

这个库仅提供给 H5 使用，请勿在小程序环境引入

# mpx-mock

←