# 周边拓展

# 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