diff --git a/docs-vuepress/api/extend.md b/docs-vuepress/api/extend.md
index d2325fbf1e..272b9aac33 100644
--- a/docs-vuepress/api/extend.md
+++ b/docs-vuepress/api/extend.md
@@ -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是不一样的。
diff --git a/docs-vuepress/guide/advance/platform.md b/docs-vuepress/guide/advance/platform.md
index 829705b66a..66f1a6a576 100644
--- a/docs-vuepress/guide/advance/platform.md
+++ b/docs-vuepress/guide/advance/platform.md
@@ -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('弹框展示成功')
}
})
```
diff --git a/docs-vuepress/rn-api.md b/docs-vuepress/rn-api.md
new file mode 100644
index 0000000000..6a71b084e3
--- /dev/null
+++ b/docs-vuepress/rn-api.md
@@ -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 |
diff --git a/docs-vuepress/rn-style.md b/docs-vuepress/rn-style.md
new file mode 100644
index 0000000000..ad5a188eeb
--- /dev/null
+++ b/docs-vuepress/rn-style.md
@@ -0,0 +1,706 @@
+# Mpx转RN样式使用指南
+RN 的样式的支持基本为 web 样式的一个子集，同时还有一些属性并未与 web 对齐，因此跨平台输出 RN 时，为了保障多端输出样式一致，可参考本文针对样式在RN上的支持情况来进行样式编写。
+
+## 样式编写限制
+
+### 选择器
+RN仅支持以下类选择器，且不支持组合选择器。
+``` css
+/* 支持 */
+.classname {
+ color: red
+}
+.test1, .test2 {
+ color: red
+}
+```
+
+### 布局限制
+在 RN 中布局方式有限制，像 block inline inline-block 和 fixed 等都不支持，支持的布局方式如下：
+#### flex
+在RN中，常规的组件元素可以用过 flex 布局来实现，[参考文档](https://reactnative.dev/docs/layout-props#flex)。
+
+**注**：RN中view标签的主轴是column，和css不一致，使用mpx开发设置`dispay:flex`时，会默认的主轴方向是row。
+
+#### relative/absolute
+在 RN 中 position 仅支持 relative（默认）和 absolute，可[参考文档](https://reactnative.dev/docs/layout-props#position)。
+
+### 样式单位限制
+#### number 类型值
+RN 环境中，number 数值型单位支持 px rpx % 三种，web 下的 vw em rem 等不支持。
+#### color 类型值
+RN 支持的 color 值的类型参考 RN 文档 https://reactnative.dev/docs/colors
+
+## 组件样式规则
+在web和RN下组件的渲染会存在一些差异的地方，比如默认样式不一致、继承的关系不一致等。框架针对这些不一致进行了抹平工作，但是仍旧存在一些使用限制，具体参考以下组件节点的介绍。
+
+### text
+RN中，文本节点需要通过Text组件来创建文本节点。文本节点需要给Text组件来设定[属性](https://reactnative.dev/docs/text-style-props)来调整文本的外观。
+
+Web/小程序中，文本节点可以通过div/view节点进行直接包裹，在div/view标签上设定对应文本样式即可。不需单独包裹text节点。
+
+框架抹平了此部分的差异，但仍因受限于RN内text的样式[继承原则的限制](https://reactnative.dev/docs/text#limited-style-inheritance)，通过在祖先节点来设置文本节点的样式仍旧无法生效。具体例子说明如下
+
+``` html
+
+ 我是文本
+
+
+.wrapper {
+ font-size: 20px;
+}
+.content {
+ text-align: right;
+}
+/** 以上例子中
+web渲染效果: 字体的大小为20px，文字居右
+转RN之后渲染效果: 字体大小为默认大小，文字居右
+*/
+
+```
+**限制与使用说明**
+1. 无法通过设置祖先节点的样式来修改文本节点的样式，只可通过修改直接包裹文本的节点来修改文本的样式。
+2. 框架处理将文本节点样式的默认值与web进行了对齐，如果需要按照RN的默认值来进行渲染，可设置`disable-default-style`为`true`
+
+### view
+
+background、background-image、background-size、background-repeat仅在view标签下支持，background-color在其他标签上也支持。
+
+**各属性支持的类型**
+
+* background - 仅支持 background-image | background-color | background-size | background-repeat，每个属性支持情况，可参考下面的介绍。
+* background-image - 仅支持 。
+* background-size - 支持px|rpx|%，也支持枚举值 contain|cover|auto； 不支持两个以上的值进行设置。
+* backgroundno-repeat - 仅支持值为no-repeat。
+* backfround-color - 参考[Color](https://reactnative.dev/docs/colors)
+
+
+**支持的语法**
+
+``` css
+
+/** 1. background **/
+/* 支持 */
+background: url("https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg") pink contain no-repeat;
+background: #000;
+background: url("https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg") pink;
+
+/* 不支持 */
+background: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5));
+
+
+/** 2. background-image **/
+/* 支持 */
+background-image: url("https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg");
+/* 不支持 */
+background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5));
+
+
+/** 3. background-size **/
+/* 支持 */
+background-size: 50%;
+background-size: 50% 25%;
+background-size: contain;
+background-size: cover;
+background-size: auto;
+background-size: 20px auto;
+
+/ * 不支持 * /
+background-size: 50%, 25%, 25%;
+
+
+/** 4. background-repeat **/
+/* 支持 */
+background-repeat: no-repeat;
+
+/* 不支持 */
+background-repeat: repeat;
+
+
+/** 5. background-color **/
+background-repeat: red;
+```
+
+## 样式参考
+### Layout Style
+#### position
+设置元素的定位样式
+**值支持类型**
+enum: absolute, relative， 默认relative。
+##### 语法
+``` css
+position: absolute;
+position: relative;
+
+```
+#### top|right|left|bottom
+设置元素的不同方向的偏移量
+##### 值支持类型
+number: px,rpx,%
+##### 语法
+``` css
+top: 10px;
+top: 10rpx;
+top: 10%;
+```
+#### z-index
+控制着元素的堆叠覆盖顺序。
+##### 值支持类型
+number
+##### 语法
+``` css
+z-index: 1;
+```
+#### display
+设置元素的布局方式。
+##### 值支持类型
+flex/none
+##### 语法
+``` css
+/* 默认 */
+display:flex
+/* 隐藏 */
+display:none
+```
+#### align-content
+设置多根轴线的对齐方式。
+##### 值支持类型
+enum: flex-start, flex-end, center, stretch, space-between, space-around, space-evenly
+##### 语法
+``` css
+/** 支持 **/
+align-content: flex-start;
+align-content: flex-end;
+align-content: center;
+align-content: stretch;
+align-content: space-between;
+align-content: space-around;
+align-content: space-evenly;
+
+/** 不支持 **/
+align-content: safe center;
+align-content: unsafe center;
+```
+#### align-items
+设置单根轴线上的子元素的对齐方式。默认会是交叉轴上的。
+##### 值支持类型
+enum: flex-start, flex-end, center, stretch, baseline
+##### 语法
+``` css
+/** 支持 **/
+align-items: flex-start;
+align-items: flex-end;
+align-items: center;
+align-items: stretch;
+align-items: baseline;
+
+/** 不支持 **/
+align-items: first baseline;
+align-items: last baseline;
+```
+#### align-self
+设置单个子元素在单根轴线上的对齐方式
+##### 值支持类型
+enum: auto, flex-start, flex-end, center, stretch, baseline
+##### 语法
+``` css
+/** 支持 **/
+align-self: auto;
+align-self: flex-start;
+align-self: flex-end;
+align-self: center;
+align-self: stretch;
+align-self: baseline;
+
+/** 不支持 **/
+align-self: first baseline;
+align-self: last baseline;
+```
+#### flex
+仅支持 flex-grow | flex-shrink | flex-basis 这种顺序，值以空格分隔按顺序赋值
+##### 值支持类型
+flex: number number px/rpx
+##### 语法
+``` css
+/** 简写 **/
+flex: 1;
+/* flex-grow | flex-shrink | flex-basis */
+flex: 0 1 1;
+```
+#### flex-grow
+设置子盒子的放大比例
+##### 值支持类型
+number
+##### 语法
+```css
+flex-grow: 1;
+```
+#### flex-shrink
+设置子盒子的缩放比例。
+##### 值支持类型
+number
+##### 语法
+```css
+flex-shrink: 1;
+```
+#### flex-basis
+设置在分配多余空间之前，子盒子的初始主轴尺寸。
+##### 值支持类型
+number px|rpx|%
+##### 语法
+``` css
+flex-shrink: 10px;
+flex-shrink: 10rpx;
+flex-shrink: 20%;
+```
+#### flex-direction
+设置主轴的方向。
+##### 值支持类型
+enum: row, row-reverse, column, column-reverse
+##### 语法
+``` css
+flex-direction: row;
+flex-direction: row-reverse;
+flex-direction: column;
+flex-direction: column-reverse;
+
+```
+#### flex-wrap
+设置元素是否换行。当值为wrap时，alignItems：center不生效。
+##### 值支持类型
+enum: wrap, nowrap, wrap-reverse
+##### 语法
+``` css
+flex-wrap: wrap;
+flex-wrap: nowrap;
+flex-wrap: wrap-reverse;
+```
+#### flex-flow
+是flex-direction flex-wrap 缩写，仅支持 flex-flow: flex-direction flex-wrap 这种顺序，值以空格分隔按顺序赋值
+```css
+/* flex-direction */
+flex-flow: row;
+/* flex-direction| flex-wrap*/
+flex-flow: row no-wrap;
+```
+
+### View Style
+#### margin
+margin 是 margin-top|margin-right|margin-left|margin-bottom 的缩写模式, 目前仅支持四种缩写模式。
+##### 值支持类型
+string: 'auto'
+number: rpx，px, %
+##### 语法
+``` css
+/* all */
+margin: 2px;
+
+/* top and bottom | left and right */
+margin: 5% auto;
+
+/* top | left and right | bottom */
+margin: 1rpx auto 2rpx;
+
+/* top | right | bottom | left */
+margin: 1rpx 2rpx 2rpx ;
+```
+#### margin-top|margin-bottom|margin-right|margin-left
+##### 值支持类型
+number: rpx，px, %
+##### 语法
+``` css
+margin-top: 2px;
+margin-top: 2rpx;
+margin-top: 10%;
+```
+#### padding
+padding是padding-left、padding-right、padding-left、padding-bottom的缩写模式, 目前仅支持四种缩写模式。
+##### 值支持类型
+string: 'auto'
+number: rpx，px, %
+##### 语法
+``` css
+/* all */
+padding: 2px;
+
+/* top and bottom | left and right */
+padding: 5% auto;
+
+/* top | left and right | bottom */
+padding: 1rpx auto 2rpx;
+
+/* top | right | bottom | left */
+padding: 1rpx 2rpx 2rpx ;
+```
+#### padding-top|padding-bottom|padding-left|padding-right
+##### 值支持类型
+number: rpx，px, %
+##### 语法
+``` css
+/** padding-top **/
+padding-top: 2px;
+padding-top: 2rpx;
+padding-top: 10%;
+```
+#### border
+border 是 border-width|border-style|border-color 的缩写模式, 目前仅支持 width | style | color 这种排序，值以空格分隔按顺序赋值
+```css
+/* width | style | color */
+border: 1px solid red;
+border: 1px;
+border: 1px solid;
+border: 1px double pink;
+```
+#### border-color
+设置边框的颜色, 目前只支持统一设置，不支持缩写。
+##### 值支持类型
+color: 参考[Color](https://reactnative.dev/docs/colors)
+##### 语法
+``` css
+/* all border */
+/** 支持 **/
+border-color: red;
+```
+#### border-style
+设置边框的样式, 目前只支持统一设置，不支持缩写。
+##### 值支持类型
+enum: solid|dotted|dashed
+##### 语法
+``` css
+/** 支持 **/
+/* all border */
+border-color: 'solid';
+border-color: 'dotted';
+border-color: 'dashed';
+
+/** 不支持 **/
+border-style: double;
+border-style: groove;
+border-style: ridge;
+border-style: dotted solid;
+border-style: hidden double dashed;
+border-style: none solid dotted dashed;
+```
+#### border-width
+设置边框的宽度，目前只支持统一设置，不支持缩写。
+##### 值支持类型
+number: px rpx %
+##### 语法
+``` css
+/* all border */
+border-width: 2px;
+```
+#### border-top-color|border-bottom-color|border-left-color|border-right-color
+设置各边框的颜色
+##### 值支持类型
+color: 参考[Color](https://reactnative.dev/docs/colors)
+##### 语法
+``` css
+border-top-color: red;
+```
+#### border-top-width|border-bottom-width|border-left-width|border-right-width
+设置各边框的宽度
+##### 值支持类型
+number: px rpx
+##### 语法
+``` css
+border-top-width: 2px;
+```
+#### border-radius
+设置border的圆角格式，支持一种缩写方式
+##### 值支持类型
+仅支持 border-radius 0px|border-radius 0px 0px 0px 0px（值以空格分隔按顺序赋值）
+number: px rpx %
+##### 语法
+``` css
+/* all */
+border-radius: 2px;
+/* top-left | top-right | bottom-right | bottom-left */
+border-radius: 10px 10px 10px 0;
+```
+#### border-bottom-left-radius|border-bottom-right-radius|border-top-left-radius|border-top-right-radius
+##### 值支持类型
+number: px rpx %
+##### 语法
+``` css
+border-bottom-left-radius: 2px;
+```
+
+### Text Style
+#### color
+##### 值支持类型
+color: 参考[Color](https://reactnative.dev/docs/colors)
+##### 语法
+``` css
+color: orange;
+color: #fff;
+color: #fafafa;
+color: rgb(255, 255, 255);
+color: rgba(255, 99, 71, 0.2)
+```
+#### font-family
+可设置系统字体，引入字体文件，暂时不支持。
+##### 值支持类型
+string
+##### 语法
+``` css
+font-family: "PingFangSC-Regular"
+```
+#### font-size
+可设置字体的大小
+##### 值支持类型
+number: px,rpx
+##### 语法
+``` css
+font-size: 12px;
+font-size: 12rpx;
+```
+#### font-style
+设置文本的字体样式。
+##### 值支持类型
+enum: normal，italic
+##### 语法
+``` css
+font-style: italic;
+font-style: normal;
+```
+#### font-weight
+设置文字的权重。
+##### 值支持类型
+enum: 100，200，300，400，500，600，800，900,normal,bold
+##### 语法
+``` css
+font-weight: 100;
+font-weight: 200;
+font-weight: 300;
+font-weight: 400;
+font-weight: 500;
+font-weight: 600;
+font-weight: 700;
+font-weight: 800;
+font-weight: 900;
+
+font-weight: normal;
+font-weight: bold;
+```
+#### font-variant
+设置文本的字体变体
+##### 值支持类型
+enum: small-caps, oldstyle-nums, lining-nums, tabular-nums, proportional-nums
+##### 语法
+``` css
+font-variant: small-caps;
+font-variant: oldstyle-nums;
+font-variant: lining-nums;
+font-variant: tabular-nums;
+font-variant: lining-nums;
+font-variant: proportional-nums;
+```
+#### letter-spacing
+定义字符之间的间距
+##### 值支持类型
+px,rpx
+##### 语法
+``` css
+letter-spacing: 2px;
+letter-spacing: 2rpx;
+```
+#### line-height
+设置行高。
+##### 值支持类型
+px,rpx,%
+##### 语法
+``` css
+line-height: 16px
+line-height: 16rpx
+line-height: 100%
+line-height: 1
+```
+#### text-align
+设置文本的水平对齐方式。
+##### 值支持类型
+enum: left, right, center, justify
+##### 语法
+``` css
+/** 支持 **/
+text-align: left;
+text-align: right;
+text-align: center;
+text-align: justify;
+
+/** 不支持 **/
+text-align: match-parent;
+text-align: auto;
+text-align: justify-all;
+```
+#### text-decoration-line
+设置文本的装饰线样式。
+##### 值支持类型
+enum: none, underline, line-through, underline line-through
+##### 语法
+``` css
+/** 支持 **/
+text-decoration-line: none;
+text-decoration-line: underline;
+text-decoration-line: line-through;
+text-decoration-line: underline line-through;
+
+/** 不支持 **/
+text-decoration-line: overline;
+```
+#### text-transform
+设置文本的大小写转换。
+##### 值支持类型
+ enum: none, uppercase, lowercase, capitalize
+##### 语法
+``` css
+/** 支持 **/
+text-transform: none;
+text-transform: uppercase;
+text-transform: lowercase;
+text-transform: capitalize;
+
+/** 不支持 **/
+text-transform: none;
+text-transform: uppercase;
+text-transform: lowercase;
+text-transform: capitalize;
+```
+#### text-shadow
+设置文本阴影
+##### 值支持类型
+仅支持 offset-x | offset-y | blur-radius | color 排序，值以空格分隔按顺序赋值
+##### 语法
+```css
+text-shadow: 1rpx 3rpx 0 #2E0C02;
+```
+
+### Background Style
+背景相关的属性
+#### background-color
+表示背景色，可以在任何标签上使用。
+##### 值支持类型
+color: 参考[Color](https://reactnative.dev/docs/colors)
+##### 语法
+``` css
+/* all border */
+background-color: red;
+```
+#### background-image
+表示背景图，只能在view上使用
+##### 值支持类型
+仅支持
+##### 语法
+``` css
+background-image: url("https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg");
+
+/* 不支持 */
+background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5));
+```
+#### background-size
+表示背景大小，只能在view上使用
+##### 值支持类型
+number 支持 px|rpx|%，枚举值支持 contain|cover|auto；
+支持一个值:这个值指定图片的宽度，图片的高度隐式的为 auto；
+支持两个值:第一个值指定图片的宽度，第二个值指定图片的高度；
+不支持逗号分隔的多个值：设置多重背景!!!
+##### 语法
+``` css
+/* 支持 */
+background-size: 50%;
+background-size: 50% 25%;
+background-size: contain;
+background-size: cover;
+background-size: auto;
+background-size: 20px auto;
+
+/ * 不支持 * /
+background-size: 50%, 25%, 25%;
+```
+#### background-repeat
+表示背景图是否重复，只能在view上使用
+##### 值支持类型
+enum: no-repeat
+##### 语法
+``` css
+background-repeat: no-repeat;
+
+/* 不支持 */
+background-repeat: repeat;
+```
+#### background
+表示背景的组合属性，只能在view上使用
+##### 值支持类型
+仅支持 background-image | background-color | background-size | background-repeat，具体每个属性的支持情况参见上面具体属性支持的文档
+##### 语法
+```css
+/* 支持 */
+background: url("https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg") pink contain no-repeat;
+background: #000;
+background: url("https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg") pink;
+
+/* 不支持 */
+background: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5));
+```
+
+### Shadow Style
+#### box-shadow
+此属性是阴影颜色、阴影的偏移量
+##### 值支持类型
+仅支持 offset-x | offset-y | blur-radius | color 排序，值以空格分隔按顺序赋值
+##### 语法
+```css
+/* offset-x | offset-y | blur-radius | color */
+box-shadow: 0 1px 3px rgba(139,0,0,0.32);
+```
+
+## 附录
+### RN 不支持的属性
+若设置以下不支持的属性会被 mpx 编译处理时丢弃，有编译 error 提示
+
+| 描述 | 不支持的属性 |
+| -------------- | --------------------------------------------------------------------------------------|
+| 双端都不支持 | box-sizing white-space text-overflow animation transition |
+| ios 不支持 | vertical-align |
+| android 不支持 | text-decoration-style text-decoration-color shadow-offset shadow-opacity shadow-radius |
+
+
+### RN 支持的枚举值
+RN 支持的枚举值映射如下表，其他不支持的枚举值会被 mpx 编译处理时丢弃，设置无效
+
+|prop|value 枚举|
+| --- | --- |
+|overflow|visible hidden scroll|
+|border-style|solid dotted dashed|
+|display|flex none|
+|pointer-events|auto none|
+|position|relative absolute|
+|vertical-align|auto top bottom center|
+|font-variant|small-caps oldstyle-nums lining-nums tabular-nums proportional-nums
+|text-align|left right center justify|
+|font-style|normal italic|
+|font-weight|normal bold 100-900|
+|text-decoration-line|none underline line-through 'underline line-through'|
+|text-transform|none uppercase lowercase capitalize|
+|user-select|auto text none contain all|
+|align-content|flex-start flex-end none center stretch space-between space-around|
+|align-items|flex-start flex-end center stretch baseline|
+|align-self|auto flex-start flex-end center stretch baseline|
+|justify-content|flex-start flex-end center space-between space-around space-evenly none|
+|background-repeat|no-repeat|
+
+### 缩写支持
+RN 仅支持部分常用的缩写形式，具体参加下表：
+
+|缩写属性|支持的缩写格式|备注|
+| --- | --- | --- |
+|text-decoration|仅支持 text-decoration-line text-decoration-style text-decoration-color|顺序固定，值以空格分隔后按按顺序赋值|
+|margin|margin: 0;margin: 0 auto;margin: 0 auto 10px;margin: 0 10px 10px 20px;|-|
+|padding|padding: 0;padding: 0 auto;padding: 0 auto 10px;padding: 0 10px 10px 20px;|-|
+|text-shadow|仅支持 offset-x offset-y blur-radius color 排序|顺序固定，值以空格分隔后按按顺序赋值|
+|border|仅支持 border-width border-style border-color|顺序固定，值以空格分隔后按按顺序赋值|
+|box-shadow|仅支持 offset-x offset-y blur-radius color|顺序固定，值以空格分隔后按按顺序赋值|
+|flex|仅支持 flex-grow flex-shrink flex-basis|顺序固定，值以空格分隔后按按顺序赋值|
+|flex-flow|仅支持 flex-direction flex-wrap|顺序固定，值以空格分隔后按按顺序赋值|
+|border-radius|支持 border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius|顺序固定，值以空格分隔后按按顺序赋值；当设置 border-radius: 0 相当于同时设置了4个方向|
+|background|仅支持 background-image background-color background-size background-repeat|顺序不固定，具体每个属性的支持情况参见上面具体属性支持的文档；background-size 缩写仅支持枚举值不支持 number 值
diff --git a/docs-vuepress/rn-template.md b/docs-vuepress/rn-template.md
new file mode 100644
index 0000000000..5f224977c8
--- /dev/null
+++ b/docs-vuepress/rn-template.md
@@ -0,0 +1,382 @@
+# Mpx转RN模版使用指南
+
+## 模版指令
+目前 Mpx 输出 React Native 仅支持以下指令，具体使用范围可参考如下文档
+
+| 指令名 | 说明 |
+| --------- | ---------------------------------- |
+| wx:if | 根据表达式的值的来有条件地渲染元素 |
+| wx:elif | 根据表达式的值的来有条件地渲染元素，前一兄弟元素必须有 wx:if 或 wx:elif |
+| wx:else | 不需要表达式，前一兄弟元素必须有 wx:if 或 wx:elif |
+| wx:show | 根据表达式的值的来有条件地渲染元素，与 wx:if 所不同的是不会移除节点，而是设置节点的 style 为 display: none |
+| wx:style | 动态绑定 style 样式 |
+| wx:class | 动态绑定 class 样式 |
+| wx:for | 在组件上使用 wx:for 绑定一个数组，即可使数组中各项的数据重复渲染该组件 |
+| wx:for-item | 指定数组当前元素的变量名 |
+| wx:for-index | 指定数组当前下标的变量名 |
+| wx:key | 指定列表中项目的唯一的标识符 |
+| wx:ref | 获取节点信息 |
+| mpxTagName | 动态转换标签 |
+| component | 使用 component is 动态切换组件 |
+| @mode | 使用 @ 符号来指定某个节点或属性只在某些平台下有效 |
+| @_mode | 隐式属性条件编译，仅控制节点的展示，保留节点属性的平台转换能力 |
+| @env | 自定义 env 目标应用，来实现在不同应用下编译产出不同的代码 |
+
+## 事件编写
+目前 Mpx 输出 React Native 的事件编写遵循小程序的事件编写规范，支持事件的冒泡及捕获
+
+普通事件绑定
+```js
+
+ Click here!
+
+```
+
+绑定并阻止事件冒泡
+```js
+
+ Click here!
+
+```
+
+事件捕获
+
+```js
+
+ outer view
+
+ inner view
+
+
+```
+
+中断捕获阶段和取消冒泡阶段
+
+```js
+
+ outer view
+
+
+```
+
+在此基础上也新增了事件处理内联传参的增强机制。
+
+```html
+
+
+ b
+
+
+```
+
+除此之外，Mpx 也支持了动态事件绑定
+
+```html
+
+
+
+ {{item}}
+
+
+
+```
+注意事项：
+
+当同一个元素上同时绑定了 catchtap 和 bindtap 事件时:
+
+两个事件都会被触发执行。
+但是是否阻止事件冒泡的行为,会以模板上第一个绑定的事件标识符为准。
+如果第一个绑定的是 catchtap，那么不管后面绑定的是什么,都会阻止事件冒泡。
+如果第一个绑定的是 bindtap，则不会阻止事件冒泡。
+
+同理,如果同一个元素上绑定了 capture-bind:tap 和 bindtap:
+
+事件的执行时机会根据模板上第一个绑定事件的标识符来决定:
+如果第一个绑定的是 capture-bind:tap，则事件会在捕获阶段触发。
+如果第一个绑定的是 bindtap，则事件会在冒泡阶段触发。
+
+## 基础组件
+
+目前 Mpx 输出 React Native 仅支持以下组件，具体使用范围可参考如下文档
+
+### view
+视图容器。
+
+属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| ----------------------- | ------- | ------------- | ---------------------------------------------------------- |
+| hover-class | string | | 指定按下去的样式类。 |
+| hover-start-time | number | 50 | 按住后多久出现点击态，单位毫秒|
+| hover-stay-time | number | 400 | 手指松开后点击态保留时间，单位毫秒 |
+| enable-offset | Number | false | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息|
+
+事件
+
+| 事件名 | 说明 |
+| ----------------| --------------------------------------------------- |
+| bindtap | 点击的时候触发 |
+
+
+### text
+文本。
+
+属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| ----------------------- | ------- | ------------- | ---------------------------------------------------------- |
+| user-select | boolean | `false` | 文本是否可选。 |
+| disable-default-style | boolean | `false` | 会内置默认样式，比如fontSize为16。设置`true`可以禁止默认的内置样式。 |
+| enable-offset | Number | false | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息|
+
+
+事件
+
+
+| 事件名 | 说明 |
+| ----------------| --------------------------------------------------- |
+| bindtap | 点击的时候触发 |
+
+注意事项
+1. 未包裹 text 标签的文本，会自动包裹 text 标签。
+2. text 组件开启 enable-offset 后，offsetLeft、offsetWidth 获取时机仅为组件首次渲染阶段
+
+### image
+图片。
+
+属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| ----------------------- | ------- | ------------- | ---------------------------------------------------------- |
+| src | String | `false` | 图片资源地址，支持本地图片资源及 base64 格式数据，暂不支持 svg 格式 |
+| mode | String | `scaleToFill` | 图片裁剪、缩放的模式，适配微信 image 所有 mode 格式 |
+| enable-offset | Number | `false` | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息|
+
+事件
+
+| 事件名 | 说明 |
+| ----------------| --------------------------------------------------- |
+| binderror | 当错误发生时触发，event.detail = { errMsg } |
+| bindload | 当图片载入完毕时触发，event.detail = { height, width } |
+
+注意事项
+
+1. image 组件默认宽度320px、高度240px
+2. image 组件进行缩放时，计算出来的宽高可能带有小数，在不同webview内核下渲染可能会被抹去小数部分
+
+### input
+输入框。
+
+属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| ----------------------- | ------- | ------------- | ---------------------------------------------------------- |
+| value | String | | 输入框的初始内容 |
+| type | String | `text` | input 的类型，不支持 `safe-password`、`nickname` |
+| password | Boolean | `false` | 是否是密码类型 |
+| placeholder | String | | 输入框为空时占位符 |
+| placeholder-class | String | | 指定 placeholder 的样式类，仅支持 color 属性 |
+| placeholder-style | String | | 指定 placeholder 的样式，仅支持 color 属性 |
+| disabled | Boolean | `false` | 是否禁用 |
+| maxlength | Number | `140` | 最大输入长度，设置为 -1 的时候不限制最大长度 |
+| auto-focus | Boolean | `false` | (即将废弃，请直接使用 focus )自动聚焦，拉起键盘 |
+| focus | Boolean | `false` | 获取焦点 |
+| confirm-type | String | `done` | 设置键盘右下角按钮的文字，仅在 type='text' 时生效 |
+| confirm-hold | Boolean | `false` | 点击键盘右下角按钮时是否保持键盘不收起 |
+| cursor | Number | | 指定 focus 时的光标位置 |
+| cursor-color | String | | 光标颜色 |
+| selection-start | Number | `-1` | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 |
+| selection-end | Number | `-1` | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 |
+| enable-offset | Number | `false` | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息|
+
+事件
+
+| 事件名 | 说明 |
+| ---------------------| ---------------------------------------------------------------------------------- |
+| bindinput | 键盘输入时触发，event.detail = { value, cursor }，不支持 `keyCode` |
+| bindfocus | 输入框聚焦时触发，event.detail = { value }，不支持 `height` |
+| bindblur | 输入框失去焦点时触发，event.detail = { value }，不支持 `encryptedValue`、`encryptError` |
+| bindconfirm | 点击完成按钮时触发，event.detail = { value } |
+| bind:selectionchange | 选区改变事件, event.detail = { selectionStart, selectionEnd } |
+
+方法
+
+可通过 `ref` 方式调用以下组件实例方法
+
+| 方法名 | 说明 |
+| ---------------------| ----------------------------------- |
+| focus | 使输入框得到焦点 |
+| blur | 使输入框失去焦点 |
+| clear | 清空输入框的内容 |
+| isFocused | 返回值表明当前输入框是否获得了焦点 |
+
+
+### textarea
+多行输入框。
+
+属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| ----------------------- | ------- | ------------- | ---------------------------------------------------------- |
+| value | String | | 输入框内容 |
+| type | String | `text` | input 的类型，不支持 `safe-password`、`nickname` |
+| placeholder | String | | 输入框为空时占位符 |
+| placeholder-class | String | | 指定 placeholder 的样式类，仅支持 color 属性 |
+| placeholder-style | String | | 指定 placeholder 的样式，仅支持 color 属性 |
+| disabled | Boolean | `false` | 是否禁用 |
+| maxlength | Number | `140` | 最大输入长度，设置为 -1 的时候不限制最大长度 |
+| auto-focus | Boolean | `false` | (即将废弃，请直接使用 focus )自动聚焦，拉起键盘 |
+| focus | Boolean | `false` | 获取焦点 |
+| auto-height | Boolean | `false` | 是否自动增高，设置 auto-height 时，style.height不生效 |
+| confirm-type | String | `done` | 设置键盘右下角按钮的文字，不支持 `return` |
+| confirm-hold | Boolean | `false` | 点击键盘右下角按钮时是否保持键盘不收起 |
+| cursor | Number | | 指定 focus 时的光标位置 |
+| cursor-color | String | | 光标颜色 |
+| selection-start | Number | `-1` | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 |
+| selection-end | Number | `-1` | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 |
+| enable-offset | Number | `false` | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息|
+
+事件
+
+| 事件名 | 说明 |
+| ---------------------| ---------------------------------------------------------------------------------- |
+| bindinput | 键盘输入时触发，event.detail = { value, cursor }，不支持 `keyCode` |
+| bindfocus | 输入框聚焦时触发，event.detail = { value }，不支持 `height` |
+| bindblur | 输入框失去焦点时触发，event.detail = { value }，不支持 `encryptedValue`、`encryptError` |
+| bindconfirm | 点击完成按钮时触发，event.detail = { value } |
+| bindlinechange | 输入框行数变化时调用，event.detail = { height: 0, lineCount: 0 }，不支持 `heightRpx` |
+| bind:selectionchange | 选区改变事件, {selectionStart, selectionEnd} |
+
+方法
+
+可通过 `ref` 方式调用以下组件实例方法
+
+| 方法名 | 说明 |
+| ---------------------| ----------------------------------- |
+| focus | 使输入框得到焦点 |
+| blur | 使输入框失去焦点 |
+| clear | 清空输入框的内容 |
+| isFocused | 返回值表明当前输入框是否获得了焦点 |
+
+
+### button
+按钮。
+
+属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| ----------------------- | ------- | ------------- | --------------------------------------------------------- |
+| size | String | `default` | 按钮的大小 |
+| type | String | `default` | 按钮的样式类型 |
+| plain | Boolean | `false` | 按钮是否镂空，背景色透明 |
+| disabled | Boolean | `false` | 是否禁用 |
+| loading | Boolean | `false` | 名称前是否带 loading 图标 |
+| open-type | String | | 微信开放能力，当前仅支持 `share` |
+| hover-class | String | | 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果 |
+| hover-start-time | Number | `20` | 按住后多久出现点击态，单位毫秒 |
+| hover-stay-time | Number | `70` | 手指松开后点击态保留时间，单位毫秒 |
+| enable-offset | Number | `false` | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息|
+
+
+### scroll-view
+可滚动视图区域。
+
+属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| ----------------------- | ------- | --------- | -------------------------------------------------- |
+| scroll-x | Boolean | `false` | 允许横向滚动动 |
+| scroll-y | Boolean | `false` | 允许纵向滚动 |
+| upper-threshold | Number | `50` | 距顶部/左边多远时(单位 px),触发 scrolltoupper 事件 |
+| lower-threshold | Number | `50` | 距底部/右边多远时(单位 px),触发 scrolltolower 事件 |
+| scroll-top | Number | `0` | 设置纵向滚动条位置 |
+| scroll-left | Number | `0` | 设置横向滚动条位置 |
+| scroll-with-animation | Boolean | `false` | 在设置滚动条位置时使用动画过渡 |
+| enable-back-to-top | Boolean | `false` | 点击状态栏的时候视图会滚动到顶部 |
+| enhanced | Boolean | `false` | scroll-view 组件功能增强 |
+| refresher-enabled | Boolean | `false` | 开启自定义下拉刷新 |
+| scroll-anchoring | Boolean | `false` | 开启滚动区域滚动锚点 |
+| refresher-default-style | String | `'black'` | 设置下拉刷新默认样式,支持 `black`、`white`、`none`，仅安卓支持 |
+| refresher-background | String | `'#fff'` | 设置自定义下拉刷新背景颜色，仅安卓支持 |
+| refresher-triggered | Boolean | `false` | 设置当前下拉刷新状态,true 表示已触发 |
+| paging-enabled | Number | `false` | 分页滑动效果 (同时开启 enhanced 属性后生效)，当值为 true 时，滚动条会停在滚动视图的尺寸的整数倍位置 |
+| show-scrollbar | Number | `true` | 滚动条显隐控制 (同时开启 enhanced 属性后生效)|
+| enable-offset | Number | `false` | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息|
+
+
+事件
+
+| 事件名 | 说明 |
+| ----------------| ------------------ |
+| binddragstart| 滑动开始事件，同时开启 enhanced 属性后生效|
+| binddragging| 滑动事件，同时开启 enhanced 属性后生效 |
+| binddragend| 滑动结束事件，同时开启 enhanced 属性后生效 |
+| bindscrolltoupper | 滚动到顶部/左边触发 |
+| bindscrolltolower | 滚动到底部/右边触发 |
+| bindscroll | 滚动时触发 |
+| bindrefresherrefresh| 自定义下拉刷新被触发 |
+
+注意事项
+
+1. 目前不支持自定义下拉刷新节点，使用 slot="refresher" 声明无效，在 React Native 环境中还是会被当作普通节点渲染出来
+
+### swiper
+滑块视图容器。
+
+属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| ----------------------- | ------- | ------------------ | ------------------------------------|
+| indicator-dots | Boolean | `false` | 是否显示面板指示点 |
+| indicator-color | color | `rgba(0, 0, 0, .3)` | 指示点颜色 |
+| indicator-active-color | color | `#000000` | 当前选中的指示点颜色 |
+| autoplay | Boolean | `false` | 是否自动切换 |
+| current | Number | `0` | 当前所在滑块的 index |
+| interval | Number | `5000` | 自动切换时间间隔 |
+| duration | Number | `500` | 滑动动画时长 |
+| circular | Boolean | `false` | 是否采用衔接滑动 |
+| vertical | Boolean | `false` | 滑动方向是否为纵向 |
+| previous-margin | String | `0` | 前边距，可用于露出前一项的一小部分，接受px |
+| next-margin | String | `0` | 后边距，可用于露出后一项的一小部分，接受px |
+| enable-offset | Number | `false` | 设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息|
+
+
+事件
+
+| 事件名 | 说明 |
+| ----------------| ------------------ |
+| bindchange| current 改变时会触发 change 事件，event.detail = {current, source}|
+
+### swiper-item
+1. 仅可放置在swiper组件中，宽高自动设置为100%。
+
+属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| ----------------------- | ------- | ------------------ | ------------------------------------|
+| item-id | string | `无` | 该 swiper-item 的标识符 |