Skip to content

Commit

Permalink
Merge pull request #1495 from didi/feat-react-template-doc
Browse files Browse the repository at this point in the history
Feat react template doc
  • Loading branch information
hiyuki authored Jun 3, 2024
2 parents 3d83d5f + c7cbc12 commit 32421c1
Show file tree
Hide file tree
Showing 5 changed files with 1,388 additions and 66 deletions.
126 changes: 68 additions & 58 deletions docs-vuepress/api/extend.md
Original file line number Diff line number Diff line change
Expand Up @@ -449,69 +449,79 @@ useFetch().fetch({
})
```

* **注意:** options 参数同 [XFetch](./extend.md#XFetch) 章节。
* **注意:** options 参数同 [xFetch](./extend.md#xFetch) 章节。


## api-proxy
Mpx目前已经支持的API转换列表,供参考

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

| 方法/平台 | wx | ali | web | RN |
| ------------- |:-----:| :-----:| :-----: | :-----: |
| getSystemInfo|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|
| getSystemInfoSync|:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|
| nextTick |:white_check_mark:|:white_check_mark:|:white_check_mark:|:x:|
| showToast |:white_check_mark:|:white_check_mark:|:white_check_mark:|:x:|
| hideToast |:white_check_mark:|:white_check_mark:|:white_check_mark:|:x:|
| showModal |:white_check_mark:|:white_check_mark:|:white_check_mark:|:x:|
| showLoading |:white_check_mark:|:white_check_mark:|:white_check_mark:|:x:|
| hideLoading |:white_check_mark:|:white_check_mark:|:white_check_mark:|:x:|
| showActionSheet |:white_check_mark:|:white_check_mark:|:white_check_mark:|:x:|
| showNavigationBarLoading |:white_check_mark:|:white_check_mark:|:x:|:x:|
| hideNavigationBarLoading |:white_check_mark:|:white_check_mark:|:x:|:x:|
| setNavigationBarTitle |:white_check_mark:|:white_check_mark:|:white_check_mark:|:x:|
| setNavigationBarColor |:white_check_mark:|:white_check_mark:|:white_check_mark:|:x:|
| request |:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|
| downloadFile |:white_check_mark:|:white_check_mark:|:x:|:white_check_mark:|:x:|
| uploadFile |:white_check_mark:|:white_check_mark:|:x:|:x:|
| setStorage |:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|
| setStorageSync |:white_check_mark:|:white_check_mark:|:white_check_mark:|:x:|
| removeStorage |:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|
| removeStorageSync |:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|
| getStorage |:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|
| getStorageSync |:white_check_mark:|:white_check_mark:|:white_check_mark:|:x:|
| getStorageInfo |:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|
| getStorageInfoSync |:white_check_mark:|:white_check_mark:|:white_check_mark:|:x:|
| clearStorage |:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|
| clearStorageSync |:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|
| saveImageToPhotosAlbum |:white_check_mark:|:white_check_mark:|:x:|:x:|
| previewImage |:white_check_mark:|:white_check_mark:|:x:|:x:|
| compressImage |:white_check_mark:|:white_check_mark:|:x:|:x:|
| chooseImage |:white_check_mark:|:white_check_mark:|:x:|:x:|
| getLocation |:white_check_mark:|:white_check_mark:|:x:|:x:|
| saveFile |:white_check_mark:|:white_check_mark:|:x:|:x:|
| removeSavedFile |:white_check_mark:|:white_check_mark:|:x:|:x:|
| getSavedFileList |:white_check_mark:|:white_check_mark:|:x:|:x:|
| getSavedFileInfo |:white_check_mark:|:white_check_mark:|:x:|:x:|
| addPhoneContact |:white_check_mark:|:white_check_mark:|:x:|:x:|
| setClipboardData |:white_check_mark:|:white_check_mark:|:x:|:white_check_mark:|
| getClipboardData |:white_check_mark:|:white_check_mark:|:x:|:white_check_mark:|
| setScreenBrightness |:white_check_mark:|:white_check_mark:|:x:|:x:|
| getScreenBrightness |:white_check_mark:|:white_check_mark:|:x:|:x:|
| makePhoneCall |:white_check_mark:|:white_check_mark:|:x:|:white_check_mark:|
| stopAccelerometer |:white_check_mark:|:white_check_mark:|:x:|:x:|
| startAccelerometer |:white_check_mark:|:white_check_mark:|:x:|:x:|
| stopCompass |:white_check_mark:|:white_check_mark:|:x:|:x:|
| startCompass |:white_check_mark:|:white_check_mark:|:x:|:x:|
| stopGyroscope |:white_check_mark:|:white_check_mark:|:x:|:x:|
| startGyroscope |:white_check_mark:|:white_check_mark:|:x:|:x:|
| scanCode |:white_check_mark:|:white_check_mark:|:x:|:x:|
| login |:white_check_mark:|:white_check_mark:|:x:|:x:|
| checkSession |:white_check_mark:|:white_check_mark:|:x:|:x:|
| getUserInfo |:white_check_mark:|:white_check_mark:|:x:|:x:|
| requestPayment |:white_check_mark:|:white_check_mark:|:x:|:x:|
| createCanvasContext |:white_check_mark:|:white_check_mark:|:x:|:x:|
| canvasToTempFilePath |:white_check_mark:|:white_check_mark:|:x:|:x:|
| canvasPutImageData |:white_check_mark:|:white_check_mark:|:x:|:x:|
| canvasGetImageData |:white_check_mark:|:white_check_mark:|:x:|:x:|
| createSelectorQuery |:white_check_mark:|:white_check_mark:|:white_check_mark:|:x:|
| onWindowResize |:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|
| offWindowResize |:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|
| arrayBufferToBase64 |:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|
| base64ToArrayBuffer |:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|
| connectSocket |:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|
| getNetworkType |:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|
| onNetworkStatusChange |:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|
| offNetworkStatusChange |:white_check_mark:|:white_check_mark:|:white_check_mark:|:white_check_mark:|
## webview-bridge
Mpx 支持小程序跨平台后,多个平台的小程序里都提供了 webview 组件,webview 打开的 H5 页面可以通过小程序提供的 API 来与小程序通信以及调用一些小程序的能力,但是各家小程序对于 webview 提供的API是不一样的。

Expand Down
88 changes: 80 additions & 8 deletions docs-vuepress/guide/advance/platform.md
Original file line number Diff line number Diff line change
Expand Up @@ -106,22 +106,94 @@ module.exports = defineConfig({

#### api调用差异抹平

对于api调用,mpx提供了一个api调用代理插件来抹平跨平台api调用的差异,使用时需要在项目中安装使用`@mpxjs/api-proxy`,并且在调用小程序api时统一使用mpx对象进行调用,示例如下:
对于api调用,mpx提供了一个api调用代理插件来抹平跨平台api调用的差异,使用时需要在项目中安装使用`@mpxjs/api-proxy`,可以通过两种方式使用
#### 方式一:在调用小程序api时统一使用mpx对象进行调用,示例如下:
安装插件支持options传入,options说明如下:

| 参数名称 | 类型 | 含义 | 是否必填 | 默认值 | 备注 |
|--------------|-------------------|--------------------------|-------|------------------------|-----------------------|
| ~~platform~~ | ~~Object~~ | ~~各平台之间的转换~~ | ~~~~ | ~~{ from:'', to:'' }~~ | 已删除 |
| usePromise | Boolean | 是否将 api 转化为 promise 格式使用 | - | - | - |
| ~~exclude~~ | ~~Array(String)~~ | ~~跨平台时不需要转换的 api~~ | - | - | 已删除 |
| whiteList | Array(String) | 强行转化为 promise 格式的 api || [] | 需要 usePromise 设为 true |
| blackList | Array(String) | 不转换 promise 格式的 api || [] | 需要 usePromise 设为 true |
| custom | Object | 提供用户在各渠道下自定义api开放能力 || [] | - |

#### 普通形式

```js
// 请在app.mpx中安装mpx插件
import mpx, { createApp } from '@mpxjs/core'
import mpx from '@mpxjs/core'
import apiProxy from '@mpxjs/api-proxy'

mpx.use(apiProxy)

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

#### 使用promise形式

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

mpx.use(apiProxy, {
// 开启api promisify
usePromise: true
})

createApp({
onLaunch() {
// 调用小程序api时使用mpx.xxx,而不要使用wx.xxx或者my.xxx
mpx.request({url: 'xxx'})
mpx.showActionSheet({
itemList: ['A', 'B', 'C']
})
.then(res => {
console.log(res.tapIndex)
})
.catch(err => {
console.log(err)
})
```

#### 用户自定义

```js
import mpx from '@mpxjs/core'
import apiProxy from '@mpxjs/api-proxy'
import { scanCode } from '@test/scanCode'

mpx.use(apiProxy, {
custom: {
web: {
scanCode
}
}
})
// 在web下调用的实际是用户自定义部分的scanCode
mpx.scanCode({
onlyFromCamera: true,
success (res) {
console.log(res, 'scanCode, success')
},
fail (res) {
console.log(res, 'scanCode, fail')
}
})
```
#### 方式二:直接在`@mpxjs/api-proxy`导出想使用的方法
```js
// 独立使用 支持treesharking能力
import { showModal } from '@mpxjs/api-proxy'

showModal({
title: '标题',
content: '这是一个弹窗',
success (res) {
console.log('弹框展示成功')
}
})
```
Expand Down
152 changes: 152 additions & 0 deletions docs-vuepress/rn-api.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
# API支持列表

mpx转RN的对标微信api目前支持及部分的api转换,目前支持的能力可以参考下表:

| 支持方法 |
|------------------------|
| getSystemInfo |
| getSystemInfoSync |
| getDeviceInfo |
| getWindowInfo |
| request |
| setStorage |
| removeStorage |
| removeStorageSync |
| getStorage |
| getStorageInfo |
| clearStorage |
| clearStorageSync |
| setClipboardData |
| getClipboardData |
| makePhoneCall |
| onWindowResize |
| offWindowResize |
| arrayBufferToBase64 |
| base64ToArrayBuffer |
| connectSocket |
| getNetworkType |
| onNetworkStatusChange |
| offNetworkStatusChange |

# 使用说明

对于一些api-proxy中没有提供的能力,用户可以搭配mpx对象方式传入custom使用即可示例如下:

```js
import mpx from '@mpxjs/core'
import apiProxy from '@mpxjs/api-proxy'
import { showModal } from '@test/showModal'

mpx.use(apiProxy, {
custom: {
ios: {
showModal
},
android: {
showModal
}
}
})

mpx.showModal({
title: '标题',
content: '这是一个弹窗',
success (res) {
console.log('弹框展示成功')
}
})
```

# API抹平差异详情

对于一些微信独有的返回结果,或者RN目前不能支持的入参/返回结果,在下面会有详细说明:

### getSystemInfo/getSystemInfoSync

| 不支持返回值 |
|------------------------|
| language |
| version |
| SDKVersion |
| benchmarkLevel |
| albumAuthorized |
| cameraAuthorized |
| locationAuthorized |
| microphoneAuthorized |
| notificationAuthorized |
| phoneCalendarAuthorized |
| host |
| enableDebug |
| notificationAlertAuthorized |
| notificationBadgeAuthorized |
| notificationSoundAuthorized |
| bluetoothEnabled |
| locationEnabled |
| wifiEnabled |
| locationReducedAccuracy |
| theme |

### getDeviceInfo

| 不支持返回值 |
|------------------------|
| benchmarkLevel |
| abi |
| cpuType |

### getWindowInfo

| 不支持返回值 |
|------------------------|
| screenTop |

### request

| 不支持入参 |
|-----------|
| useHighPerformanceMode |
| enableHttp2 |
| enableProfile |
| enableQuic |
| enableCache |
| enableHttpDNS |
| httpDNSServiceId |
| enableChunked |
| forceCellularNetwork |
| redirect |


| 不支持返回值 |
|------------------------|
| cookies |
| profile |
| exception |

### setStorage/getStorage

| 不支持入参 |
|-----------|
| encrypt |

### getStorageInfo

| 不支持返回值 |
|-----------|
| currentSize |
| limitSize |

### connectSocket

| 不支持入参 |
|-----------|
| tcpNoDelay |
| perMessageDeflate |
| timeout |
| forceCellularNetwork |

### getNetworkType

| 不支持返回值 |
|----------------------|
| signalStrength |
| hasSystemProxy |
Loading

0 comments on commit 32421c1

Please sign in to comment.