周边拓展

优质

小牛编辑

131浏览

2023-12-01

mpx-fetch

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

fetch(config)

正常的promisify风格的请求方法

参数：
- {Object} config
  config 可指定以下属性：
  - url
    类型：string
    设置请求url
  - method
    类型：string
    设置请求方式，默认为GET
  - data
    类型：Object
    设置请求参数
  - params
    类型：Object
    设置请求参数，参数会以 Query String 的形式进行传递
  - 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

请参考数据 mock