m8-framework-mcp 1.0.0

package/docs/m8mpdoc-develop/015-/345/267/245/347/250/213/345/214/226/xmapp.md

@@ -0,0 +1,77 @@
+# 新点小程序改造为迅盟小程序
+
+为了方便项目产品快速基于已有工程改造，提供此文档。
+
+可基于已有工程，快速根据文档步骤改造支持。
+
+新点小程序改造为迅盟小程序，其中主要的问题就是使用的`EJSAPI`要改为迅盟容器的`API`。
+
+## 项目中引入兼容迅盟的`EJS`文件
+
+1、引入兼容迅盟的`EJS`文件:
+
+若项目使用`EJSv4`版本，`@epoint-mrc/ejsv4@4.1.1-sp2`版本开始支持兼容迅盟`API`，请确保项目安装的`@epoint-mrc/ejsv4`的包版本在`4.1.1-sp2`及以上。
+
+若项目使用`EJSv3`版本，需要在`src/shared/ejs/v3`目录下添加兼容迅盟`API`的`EJS`文件，文件资源可在此下载：[EJSv3 兼容迅盟 API 文件](http://app.epoint.com.cn/ejsdoc/showcase/ejsv3.xm.zip)。
+
+然后修改`src/shared/ejs/ejsloader.vue`文件，添加引入`v3`文件的语句:
+
+**注意**：引入`ejs`核心文件后，需要将`ejs`变量绑定全局。
+
+![](assets/014/xm_v3.png)
+
+确保项目中添加了兼容迅盟的`EJS`文件后，修改`src/shared/config.js`的配置，引入迅盟环境下的`API`:
+
+![](assets/014/xm_config.png)
+
+2、引入迅盟`JSSDK`:
+
+<!-- **若要改造为H5应用：**
+
+在`src/shared/ejs`目录下添加迅盟`JSSDK`文件：[迅盟 JSSDK 文件](http://app.epoint.com.cn/ejsdoc/showcase/xmmp.sdk.min.zip)。
+
+修改`src/shared/boot.js`文件，引入迅盟`JSSDK`文件:
+
+**注意**： 迅盟的`JSSDK`中也注册了`JSBridge`全局变量，为了解决冲突，要在`EJS`文件引入之前引入迅盟的`JSSDK`。
+
+![](assets/014/xm_boot.png)
+
+**若要改造为迅盟小程序应用：** -->
+
+直接在`src/pages/index.html`中引入迅盟小程序的`SDK`即可：
+
+![](assets/014/xm_index.png)
+
+## 业务代码中修改EJSAPI为迅盟API
+
+`EJS`兼容的部分迅盟`API`已经列在该文档中：
+
+[新点小程序容器JSSDK文档说明V0.3](http://app.epoint.com.cn/ejsdoc/showcase/新点小程序容器JSSDK文档说明V0.3.docx)
+
+兼容的`API`仍然可以通过`ejs`来调用，不在上述文档中的`API`都需要改为迅盟容器的`API`，通过`xm`来调用。
+
+[迅盟小程序容器JSSDK文档说明V1.1](http://app.epoint.com.cn/ejsdoc/showcase/xm小程序容器JSSDK文档说明V1.1.doc)
+
+若原本使用`EJS`容器的选人方法，在迅盟容器中会失效，需要修改为`EJS`中`H5`环境下的选人`API`: `ejs.contact.select`，具体使用方法可参考`EJS`文档。
+
+**TIP**: 在`M8`框架中调用基于`mui`框架的`H5`选人`API`相关知识库：[`M8`框架中调用`H5`选人](https://fdoc.epoint.com.cn/onlinedoc/kfzknowledge/kfzknowledge/kfzknowledge_detail?rowguid=579cea2c-bd5c-4fab-a977-3a7e41c712a6&ProcessVersionInstanceGuid=a39c9aae-f7cb-4bc4-b16d-c359df0eaa60&_dialogId_=F900B13E-E6EA-48B1-81B5-71359225A979&_winid=w2937&_t=524297)
+
+该知识库中的资源请在此下载：
+
+[mui资源](http://app.epoint.com.cn/ejsdoc/showcase/js.zip)
+
+[H5contact配置文件](http://app.epoint.com.cn/ejsdoc/showcase/H5contact.zip)
+
+## 修改涉及导航栏操作
+
+由于迅盟小程序没有开放导航栏设置`API`，原有涉及在导航栏的操作需要重新修改按钮位置，比如邮件列表切换、写邮件右上角发送按钮等。
+
+## 打包成迅盟小程序
+
+迅盟小程序默认读取项目下`plugin.json`配置文件指定应用首页地址，这点与新点小程序相同，无需更改。
+
+需要注意的是，若项目所用的`M8`框架有打包`dll`文件的步骤，需要修改`dll`文件打包配置，迅盟小程序无需dll抽取配置，否则无法加载页面。修改`build/publicdll/dll.config.js`文件，注释掉生成dll的语句
+
+![](assets/015/nodll.png)
+
+编写完业务代码后，点击`M8`框架插件`小程序-上传`打包小程序。

package/docs/m8mpdoc-develop/015-/345/267/245/347/250/213/345/214/226//344/270/216/345/216/237/347/224/237/351/241/271/347/233/256/350/236/215/345/220/210.md

@@ -0,0 +1,61 @@
+# 与原生小程序项目融合
+
+## 背景：
+
+有些老项目是由小程序原生代码开发，现在需要做新增功能并且同时接入第三方，这种情况下为了方便跨端开发的新功能可以正常接入老项目，需要能够把老的原生小程序整合到跨端框架里，保持一套代码。
+
+## 支持的平台项目
+
+- 原生微信小程序项目
+
+- 原生支付宝小程序项目
+
+## 步骤
+
+总体方案就是将跨端框架开发的项目作为老项目的一个分包接入。
+
+以下以一个微信小程序示例进行介绍：
+
+1. 首先在项目根目录新建`project`目录，用于存放原生老项目：
+
+![](assets/015/old-project.png)
+
+2. 然后运行以下命令，将跨端项目打包为一个微信小程序分包:
+
+其中`sub1`为分包名，可自行定义
+
+```
+npm run build:mp-weixin -- --subpackage=sub1
+```
+
+3. 打包完成后，将该分包拷贝至老项目根目录下：
+
+![](assets/015/old-project1.png)
+
+4. 手动将分包配置添加到老项目的`app.json`中:
+
+![](assets/015/old-project2.png)
+
+注意，如果项目开启了异步化分包，需要额外在`app.json`中添加异步化分包的路径：
+
+![](assets/015/old-project3.png)
+
+默认的跨端组件库异步分包路径为(以微信小程序为例, `${sub-name}`为项目分包名)：
+
+`${sub-name}/node-modules/@epoint-mrc/em-components/src/components`
+
+`${sub-name}/node-modules/@epoint-mrc/em-components/src/sub_components`
+
+5. 用微信开发者工具打开该老项目测试效果。
+
+## 注意
+
+1. 跨端项目打包成一个分包后，`App.vue`中的`onLaunch`会在首次进入该分包时触发。
+
+2. 跨端开发时需要将资源(图片，css，js等)、页面的绝对路径调整为相对路径，否则打包到原生小程序中时，可能出现路径查找错误。
+
+3. 最后请注意下融合后的项目是否符合各家小程序平台对包大小的限制：
+
+  - 微信小程序：整个小程序所有分包大小不超过 20M，单个分包/主包大小不能超过 2M
+
+  - 支付宝小程序：整个小程序所有分包大小不超过 8MB，单个分包或主包大小不能超过 2MB。

package/docs/m8mpdoc-develop/015-/345/267/245/347/250/213/345/214/226//351/200/202/350/200/201/345/214/226/346/226/271/346/241/210.md

@@ -0,0 +1,74 @@
+# M8.3 框架适老化方案
+
+为了方便项目产品基于已有工程快速改造，提供此文档。
+
+可基于已有工程，根据文档步骤快速改造应用。
+
+## 原理
+
+移动前端框架采用`rem`布局进行适老化调整：
+
+`rem(root em)`是一个相对单位，基准是相对根节点字体大小。
+
+比如，根节点设置`font-size=12px`，非根元素设置`width：2rem;`，那么非根元素的宽度转换成`px`就是`24px`。
+
+将整个页面的元素样式单位转换成 rem，就可以通过根元素 html 的字体大小，控制整个页面的元素大小。
+
+## 如何改造
+
+1. 首先安装 postcss 插件：`npm i postcss-pxtorem@5.1.1 -S`;
+
+2. 修改项目`postcss.config.js`, 在`plugins`中添加该插件，注意要在`@epoint-mrc/em-cli/lib/postcss-px-to-viewport`之前引入，参考：
+
+```js
+require('postcss-pxtorem')({
+    rootValue: 16, // (Number | Function) 代表根元素字体大小或根据input参数返回根元素字体大小
+    unitPrecision: 5, // （数字）允许 REM 单位增长到的十进制数字。
+    propList: ['font-size'], // （数组）可以从 px 更改为 rem 的属性。
+    selectorBlackList: [], //（数组）要忽略并保留为 px 的选择器
+    replace: true, // （布尔值）替换包含 rems 的规则而不是添加回退。
+    mediaQuery: false, // （布尔值）允许在媒体查询中转换 px。
+    minPixelValue: 0 // （数字）设置要替换的最小像素值。
+    // exclude: //（字符串，正则表达式，函数）要忽略并保留为 px 的文件路径。
+});
+```
+
+3. 在入口文件`main.js`添加全局方法，用于设置基准值：
+
+```js
+// 获取当前基准值
+Vue.prototype.$getRootFontSize = () => {
+    let result = uni.getStorageSync('root_font_size');
+
+    if (!result) {
+        // 设置默认值
+        Vue.prototype.$setRootFontSize('16px');
+
+        return '16px';
+    }
+
+    return result;
+};
+
+// 设置当前基准值
+Vue.prototype.$setRootFontSize = (value) => {
+    uni.setStorageSync('root_font_size', value);
+};
+```
+
+4. 在每个页面上添加`page-meta`节点设置页面根节点字体大小：
+
+```html
+<page-meta :root-font-size="$getRootFontSize()"></page-meta>
+```
+
+注意调用`$setRootFontSize`重置基准值时，需要刷新页面才会看到效果，在小程序中可以调用`uni.reLaunch`方法重新进入页面：
+
+```js
+// 重置基准值
+this.$setRootFontSize('22px');
+// 关闭其他页面，并重新打开页面
+uni.reLaunch({
+    url: 'index'
+});
+```

package/docs/m8mpdoc-develop/016-/350/247/206/350/247/211/350/247/204/350/214/203//347/247/273/345/212/250/350/247/206/350/247/211/350/256/276/350/256/241/350/247/204/350/214/2032.0.md

@@ -0,0 +1 @@
+<iframe width="100%" frameborder="0" src="https://onlinepreview.epoint.com.cn?ssl=1&fname=移动视觉设计规范2.0.pdf&furl=https://designplatform.epoint.com.cn/epoint-web/rest/frame/base/attach/attachAction/getContent?isCommondto=true&attachGuid=f337da47-eef6-41b4-826b-64c1ec3d8887" style="height: 80vh"></frame>

package/docs/m8mpdoc-develop/017-/345/206/205/347/275/256/347/273/204/344/273/266/001-view.md

@@ -0,0 +1,56 @@
+所有的视图组件，如 view 等，本身不显示任何可视化元素。它们的用途都是为了包裹其他真正显示的组件。
+
+### view
+
+视图容器。
+
+它类似于传统 html 中的 div，用于包裹各种元素内容。
+
+**属性说明**
+
+| 属性名                 | 类型    | 默认值 | 说明                                                                                                                                    |
+| :--------------------- | :------ | :----- | :-------------------------------------------------------------------------------------------------------------------------------------- |
+| hover-class            | String  | none   | 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果                                                                            |
+| hover-stop-propagation | Boolean | false  | 指定是否阻止本节点的祖先节点出现点击态，H5、支付宝小程序不支持（支付宝小程序文档中都有此属性，实测未支持） |
+| hover-start-time       | Number  | 50     | 按住后多久出现点击态，单位毫秒                                                                                                          |
+| hover-stay-time        | Number  | 400    | 手指松开后点击态保留时间，单位毫秒                                                                                                      |
+
+**示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/view/view)
+
+以下示例代码，来自于[hello uni-app 项目](https://github.com/dcloudio/hello-uniapp)。
+
+::: preview https://hellouniapp.dcloud.net.cn/pages/component/view/view
+
+```html
+<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
+<template>
+    <view>
+        <view class="uni-padding-wrap uni-common-mt">
+            <view class="uni-title uni-common-mt">
+                flex-direction: row
+                <text>\n横向布局</text>
+            </view>
+            <view class="uni-flex uni-row">
+                <view class="flex-item uni-bg-red">A</view>
+                <view class="flex-item uni-bg-green">B</view>
+                <view class="flex-item uni-bg-blue">C</view>
+            </view>
+            <view class="uni-title uni-common-mt">
+                flex-direction: column
+                <text>\n纵向布局</text>
+            </view>
+            <view class="uni-flex uni-column">
+                <view class="flex-item flex-item-V uni-bg-red">A</view>
+                <view class="flex-item flex-item-V uni-bg-green">B</view>
+                <view class="flex-item flex-item-V uni-bg-blue">C</view>
+            </view>
+        </view>
+    </view>
+</template>
+```
+
+:::
+
+**Tips**
+
+-   小程序平台如果使用 `<div>` ，编译时会被转换为 `<view>`。

package/docs/m8mpdoc-develop/017-/345/206/205/347/275/256/347/273/204/344/273/266/002-scroll-view.md

@@ -0,0 +1,233 @@
+### scroll-view
+
+可滚动视图区域。用于区域滚动。
+
+需注意在 webview 渲染的页面中，区域滚动的性能不及页面滚动。
+
+**属性说明**
+
+| 属性名                  | 类型          | 默认值  | 说明                                                                                                                   | 平台差异说明                                 |
+| :---------------------- | :------------ | :------ | :--------------------------------------------------------------------------------------------------------------------- | :------------------------------------------- |
+| scroll-x                | Boolean       | false   | 允许横向滚动                                                                                                           |                                              |
+| scroll-y                | Boolean       | false   | 允许纵向滚动                                                                                                           |                                              |
+| upper-threshold         | Number/String | 50      | 距顶部/左边多远时（单位 px），触发 scrolltoupper 事件                                                                  |                                              |
+| lower-threshold         | Number/String | 50      | 距底部/右边多远时（单位 px），触发 scrolltolower 事件                                                                  |                                              |
+| scroll-top              | Number/String |         | 设置竖向滚动条位置                                                                                                     |                                              |
+| scroll-left             | Number/String |         | 设置横向滚动条位置                                                                                                     |                                              |
+| scroll-into-view        | String        |         | 值应为某子元素 id（id 不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素                                   |                                              |
+| scroll-with-animation   | Boolean       | false   | 在设置滚动条位置时使用动画过渡                                                                                         |                                              |
+| enable-back-to-top      | Boolean       | false   | iOS 点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向                                                       | 微信小程序                         |
+| refresher-enabled       | Boolean       | false   | 开启自定义下拉刷新                                                                                                     | H5、微信小程序基础库 2.10.1+ |
+| refresher-threshold     | Number        | 45      | 设置自定义下拉刷新阈值                                                                                                 | H5、微信小程序基础库 2.10.1+ |
+| refresher-default-style | String        | "black" | 设置自定义下拉刷新默认样式，支持设置 black，white，none，none 表示不使用默认样式                                       | H5、微信小程序基础库 2.10.1+ |
+| refresher-background    | String        | "#FFF"  | 设置自定义下拉刷新区域背景颜色                                                                                         | H5、微信小程序基础库 2.10.1+ |
+| refresher-triggered     | Boolean       | false   | 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发                                          | H5、微信小程序基础库 2.10.1+ |
+| enable-flex             | Boolean       | false   | 启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。                  | 微信小程序 2.7.3                             |
+| scroll-anchoring        | Boolean       | false   | 开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS overflow-anchor 属性。 | 微信小程序 2.8.2                             |
+| @scrolltoupper          | EventHandle   |         | 滚动到顶部/左边，会触发 scrolltoupper 事件                                                                             |                                              |
+| @scrolltolower          | EventHandle   |         | 滚动到底部/右边，会触发 scrolltolower 事件                                                                             |                                              |
+| @scroll                 | EventHandle   |         | 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}                          |                                         |
+| @refresherpulling       | EventHandle   |         | 自定义下拉刷新控件被下拉                                                                                               | H5、微信小程序基础库 2.10.1+ |
+| @refresherrefresh       | EventHandle   |         | 自定义下拉刷新被触发                                                                                                   | H5、微信小程序基础库 2.10.1+ |
+| @refresherrestore       | EventHandle   |         | 自定义下拉刷新被复位                                                                                                   | H5、微信小程序基础库 2.10.1+ |
+| @refresherabort         | EventHandle   |         | 自定义下拉刷新被中止                                                                                                   | H5、微信小程序基础库 2.10.1+ |
+
+使用竖向滚动时，需要给 `<scroll-view>` 一个固定高度，通过 css 设置 height；使用横向滚动时，需要给`<scroll-view>`添加`white-space: nowrap;`样式。
+
+**示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/scroll-view/scroll-view)
+
+以下示例代码，来自于[hello uni-app 项目](https://github.com/dcloudio/hello-uniapp)。
+
+::: preview https://hellouniapp.dcloud.net.cn/pages/component/scroll-view/scroll-view
+
+> Template
+
+```html
+<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
+<template>
+    <view>
+        <view class="uni-padding-wrap uni-common-mt">
+            <view class="uni-title uni-common-mt">
+                Vertical Scroll
+                <text>\n纵向滚动</text>
+            </view>
+            <view>
+                <scroll-view
+                    :scroll-top="scrollTop"
+                    scroll-y="true"
+                    class="scroll-Y"
+                    @scrolltoupper="upper"
+                    @scrolltolower="lower"
+                    @scroll="scroll"
+                >
+                    <view id="demo1" class="scroll-view-item uni-bg-red">A</view>
+                    <view id="demo2" class="scroll-view-item uni-bg-green">B</view>
+                    <view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
+                </scroll-view>
+            </view>
+            <view @tap="goTop" class="uni-link uni-center uni-common-mt">点击这里返回顶部</view>
+
+            <view class="uni-title uni-common-mt">
+                Horizontal Scroll
+                <text>\n横向滚动</text>
+            </view>
+            <view>
+                <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
+                    <view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
+                    <view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>
+                    <view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>
+                </scroll-view>
+            </view>
+            <view class="uni-common-pb"></view>
+        </view>
+    </view>
+</template>
+```
+
+> Script
+
+```html
+<script>
+export default {
+    data() {
+        return {
+            scrollTop: 0,
+            old: {
+                scrollTop: 0
+            }
+        };
+    },
+    methods: {
+        upper: function (e) {
+            console.log(e);
+        },
+        lower: function (e) {
+            console.log(e);
+        },
+        scroll: function (e) {
+            console.log(e);
+            this.old.scrollTop = e.detail.scrollTop;
+        },
+        goTop: function (e) {
+            // 解决view层不同步的问题
+            this.scrollTop = this.old.scrollTop;
+            this.$nextTick(function () {
+                this.scrollTop = 0;
+            });
+            uni.showToast({
+                icon: 'none',
+                title: '纵向滚动 scrollTop 值已被修改为 0'
+            });
+        }
+    }
+};
+</script>
+```
+
+> Style
+
+```html
+<style>
+.scroll-Y {
+    height: 300rpx;
+}
+.scroll-view_H {
+    white-space: nowrap;
+    width: 100%;
+}
+.scroll-view-item {
+    height: 300rpx;
+    line-height: 300rpx;
+    text-align: center;
+    font-size: 36rpx;
+}
+.scroll-view-item_H {
+    display: inline-block;
+    width: 100%;
+    height: 300rpx;
+    line-height: 300rpx;
+    text-align: center;
+    font-size: 36rpx;
+}
+</style>
+```
+
+:::
+
+### 自定义下拉刷新
+
+注意自定义下拉刷新的性能不及 pages.json 中配置的原生下拉刷新。
+
+::: preview
+
+> Template
+
+```html
+<template>
+    <view>
+        <scroll-view
+            style="height: 300px;"
+            scroll-y="true"
+            refresher-enabled="true"
+            :refresher-triggered="triggered"
+            :refresher-threshold="100"
+            refresher-background="lightgreen"
+            @refresherpulling="onPulling"
+            @refresherrefresh="onRefresh"
+            @refresherrestore="onRestore"
+            @refresherabort="onAbort"
+        ></scroll-view>
+    </view>
+</template>
+```
+
+> Script
+
+```html
+<script>
+export default {
+    data() {
+        return {
+            triggered: false
+        };
+    },
+    onLoad() {
+        this._freshing = false;
+        setTimeout(() => {
+            this.triggered = true;
+        }, 1000);
+    },
+    methods: {
+        onPulling(e) {
+            console.log('onpulling', e);
+        },
+        onRefresh() {
+            if (this._freshing) return;
+            this._freshing = true;
+            setTimeout(() => {
+                this.triggered = false;
+                this._freshing = false;
+            }, 3000);
+        },
+        onRestore() {
+            this.triggered = 'restore'; // 需要重置
+            console.log('onRestore');
+        },
+        onAbort() {
+            console.log('onAbort');
+        }
+    }
+};
+</script>
+```
+
+:::
+
+**Tips**
+
+-   平台小程序中，请勿在 scroll-view 中使用 map、video 等平台小程序原生组件。平台小程序中 scroll-view 中也不要使用 canvas、textarea 平台小程序原生组件。更新：微信基础库 2.4.4 起支持了平台小程序原生组件在 scroll-view、swiper、movable-view 中的使用。
+-   scroll-view 不适合放长列表，有性能问题。长列表滚动和下拉刷新，应该使用原生导航栏搭配页面级的滚动和下拉刷新实现。
+-   scroll-into-view 的优先级高于 scroll-top。
+-   scroll-view 是区域滚动，不会触发页面滚动，无法触发 pages.json 配置的下拉刷新、页面触底 onReachBottomDistance、titleNView 的 transparent 透明渐变。
+-   如果遇到 scroll-top、scroll-left、refresher-triggered 属性设置不生效的问题参考：[组件属性设置不生效解决办法](https://uniapp.dcloud.io/tutorial/vue-api.html#%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98)
+-   scroll-view 的滚动条设置，可通过 css 的-webkit-scrollbar 自定义，包括隐藏滚动条。

package/docs/m8mpdoc-develop/017-/345/206/205/347/275/256/347/273/204/344/273/266/003-match-media.md

@@ -0,0 +1,43 @@
+### match-media
+
+media query 匹配检测节点。
+
+类似于网页开发中使用媒体查询来适配大屏小屏，match-media 是一个可适配不同屏幕的基本视图组件。可以指定一组 media query 媒体查询规则，满足查询条件时，这个组件才会被展示。
+
+例如在 match-media 组件中放置一个侧边栏，媒体查询规则设置为宽屏才显示，就可以实现在 PC 宽屏显示该侧边栏，而在手机窄屏中不显示侧边栏的效果。
+
+**平台兼容性**
+
+| h5  | 微信小程序     | 支付宝小程序 |
+| :-- | :------------- | :----------- |
+| √   | 基础库 2.11.1+ | √            |
+
+注意：支付宝小程序，暂不支持监听屏幕动态改变，即只执行一次媒体查询。
+
+**属性说明**
+
+| 属性名      | 类型   | 默认值 | 必填 | 说明                                |
+| :---------- | :----- | :----- | :--- | :---------------------------------- |
+| min-width   | number |        | 否   | 页面最小宽度（ px 为单位）          |
+| max-width   | number |        | 否   | 页面最大宽度（ px 为单位）          |
+| width       | number |        | 否   | 页面宽度（ px 为单位）              |
+| min-height  | number |        | 否   | 页面最小高度（ px 为单位）          |
+| max-height  | number |        | 否   | 页面最大高度（ px 为单位）          |
+| height      | number |        | 否   | 页面高度（ px 为单位）              |
+| orientation | string |        | 否   | 屏幕方向（ landscape 或 portrait ） |
+
+**match-media 示例**
+
+```html
+<template>
+    <view>
+        <match-media :min-width="375" :max-width="800">
+            <view>当页面最小宽度 375px， 页面宽度最大 800px 时显示</view>
+        </match-media>
+
+        <match-media :min-height="400" :orientation="landscape">
+            <view>当页面高度不小于 400px 且屏幕方向为横向时展示这里</view>
+        </match-media>
+    </view>
+</template>
+```