m8-framework-mcp 1.0.0 → 1.0.1

package/docs/m8mpdoc-develop/001-/351/241/265/351/235/242/345/274/200/345/217/221/000-CSS/350/257/255/346/263/225.md

@@ -1,217 +0,0 @@
-# CSS 语法
-
-## CSS 支持
-
--   [css 预处理器](https://developer.mozilla.org/zh-CN/docs/Glossary/CSS_preprocessor)
-
-## 页面样式与布局
-
-`M8` 的 css 与 web 的 css 基本一致。本文没有讲解 css 的用法。在你了解 web 的 css 的基础之上，本文讲述一些样式相关的注意事项。
-
-## 尺寸单位
-
-`M8` 支持的通用 css 单位统一使用 px
-
--   `px` 即屏幕像素
-
-vue 页面支持也下面这些普通 H5 单位。
-
--   `vh` viewpoint height，视窗高度，1vh 等于视窗高度的 1%
--   `vw` viewpoint width，视窗宽度，1vw 等于视窗宽度的 1%
-
-## 样式导入
-
-使用`@import`语句可以导入外联样式表，`@import`后跟需要导入的外联样式表的相对路径，用`;`表示语句结束。
-
-**示例代码：**
-
-```html
-<style>
-    @import '../../common/uni.css';
-
-    .uni-card {
-        box-shadow: none;
-    }
-</style>
-```
-
-## 内联样式
-
-框架组件上支持使用 style、class 属性来控制组件的样式。
-
--   style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
-
-```html
-<view :style="{color:color}" />
-```
-
--   class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上`.`，样式类名之间用空格分隔。
-
-```html
-<view class="normal_view" />
-```
-
-## 选择器
-
-目前支持的选择器有：
-
-| 选择器           | 样例           | 样例描述                                       |
-| :--------------- | :------------- | :--------------------------------------------- |
-| .class           | .intro         | 选择所有拥有 class="intro" 的组件              |
-| #id              | #firstname     | 选择拥有 id="firstname" 的组件                 |
-| element          | view           | 选择所有 view 组件                             |
-| element, element | view, checkbox | 选择所有文档的 view 组件和所有的 checkbox 组件 |
-| ::after          | view::after    | 在 view 组件后边插入内容，**仅 vue 页面生效**  |
-| ::before         | view::before   | 在 view 组件前边插入内容，**仅 vue 页面生效**  |
-
-**注意：**
-
--   在 `M8` 中不能使用 `*` 选择器。
--   微信小程序自定义组件中仅支持 class 选择器
--   `page` 相当于 `body` 节点，例如：
-
-    ```css
-    <!-- 设置页面背景颜色，使用 scoped 会导致失效 -- > page {
-        background-color: #ccc;
-    }
-    ```
-
-## 全局样式与局部样式
-
-定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。
-
-**注意：**
-
--   App.vue 中通过 `@import` 语句可以导入外联样式，一样作用于每一个页面。
-
-## CSS 变量
-
-`M8` 提供内置 CSS 变量
-
-| CSS 变量            | 描述                   | 平台小程序 | H5                   |
-| :------------------ | :--------------------- | :----- | :------------------- |
-| --status-bar-height | 系统状态栏高度         | 25px   | 0                    |
-| --window-top        | 内容区域距离顶部的距离 | 0      | NavigationBar 的高度 |
-| --window-bottom     | 内容区域距离底部的距离 | 0      | TabBar 的高度        |
-
-**注意：**
-
--   `var(--status-bar-height)` 此变量在微信小程序环境为固定 `25px`
--   由于在 H5 端，不存在原生导航栏和 tabbar，也是前端 div 模拟。如果设置了一个固定位置的居底 view，在平台小程序端是在 tabbar 上方，但在 H5 端会与 tabbar 重叠。此时可使用`--window-bottom`，不管在哪个端，都是固定在 tabbar 上方。
-
-**代码块**
-
-示例 1 - 普通页面使用 css 变量：
-
-```html
-<template>
-    <view>
-        <view class="status_bar">
-            <!-- 这里是状态栏 -->
-        </view>
-        <view>状态栏下的文字</view>
-    </view>
-</template>
-<style>
-    .status_bar {
-        height: var(--status-bar-height);
-        width: 100%;
-    }
-</style>
-```
-
-```html
-<template>
-    <view>
-        <view class="toTop">
-            <!-- 这里可以放一个向上箭头，它距离底部tabbar上浮10px-->
-        </view>
-    </view>
-</template>
-<style>
-    .toTop {
-        bottom: calc(var(--window-bottom) + 10px);
-    }
-</style>
-```
-
-## 固定值
-
-`M8` 中以下组件的高度是固定的，不可修改：
-
-| 组件          | 描述       | H5   |
-| :------------ | :--------- | :--- |
-| NavigationBar | 导航栏     | 44px |
-| TabBar        | 底部选项卡 | 50px |
-
-各小程序平台，包括同小程序平台的 iOS 和 Android 的高度也不一样。
-
-## Flex 布局
-
-为支持跨平台，框架建议使用 Flex 布局，关于 Flex 布局可以参考外部文档[A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)、[阮一峰的 flex 教程](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)等。
-
-## 背景图片
-
-`M8` 支持使用在 css 里设置背景图片，使用方式与普通 `web` 项目大体相同，但需要注意以下几点：
-
--   支持 base64 格式图片。
--   支持网络路径图片。
--   平台小程序不支持在 css 中使用本地文件，包括本地的背景图和字体文件。需以 base64 方式方可使用。
--   使用本地路径背景图片需注意：
-    1. 为方便开发者，在背景图片小于 40kb 时，`M8` 编译到不支持本地背景图的平台时，会自动将其转化为 base64 格式；
-    2. 图片大于等于 40kb，会有性能问题，不建议使用太大的背景图，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用。
-    3. 本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径。
-    ```css
-    .test2 {
-        background-image: url('~@/static/logo.png');
-    }
-    ```
-
-**注意**
-
--   微信小程序不支持相对路径（真机不支持，开发工具支持）
-
-## 字体图标
-
-`M8` 支持使用字体图标，使用方式与普通 `web` 项目相同，需要注意以下几点：
-
--   支持 base64 格式字体图标。
--   支持网络路径字体图标。
--   平台小程序不支持在 css 中使用本地文件，包括本地的背景图和字体文件。需以 base64 方式方可使用。
--   网络路径必须加协议头 `https`。
--   从 [http://www.iconfont.cn](http://www.iconfont.cn) 上拷贝的代码，默认是没加协议头的。
--   从 [http://www.iconfont.cn](http://www.iconfont.cn) 上下载的字体文件，都是同名字体（字体名都叫 iconfont，安装字体文件时可以看到）。
--   使用本地路径图标字体需注意：
-    1. 为方便开发者，在字体文件小于 40kb 时，`M8` 会自动将其转化为 base64 格式；
-    2. 字体文件大于等于 40kb，仍转换为 base64 方式使用的话可能有性能问题，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用；
-    3. 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。
-    ```css
-    @font-face {
-        font-family: test1-icon;
-        src: url('~@/static/iconfont.ttf');
-    }
-    ```
-
-**示例：**
-
-```html
-<template>
-    <view>
-        <view>
-            <text class="test">&#xe600;</text>
-            <text class="test">&#xe687;</text>
-            <text class="test">&#xe60b;</text>
-        </view>
-    </view>
-</template>
-<style>
-    @font-face {
-        font-family: 'iconfont';
-        src: url('https://at.alicdn.com/t/font_865816_17gjspmmrkti.ttf') format('truetype');
-    }
-    .test {
-        font-family: iconfont;
-        margin-left: 20rpx;
-    }
-</style>
-```

package/docs/m8mpdoc-develop/001-/351/241/265/351/235/242/345/274/200/345/217/221/000-ES6/346/224/257/346/214/201.md

@@ -1,14 +0,0 @@
-# ES6 支持
-`M8` 在支持绝大部分 ES6 API 的同时，也支持了 ES7 的 await/async。
-
-ES6 API 的支持，详见如下：
-- 因为iOS上不允许三方js引擎，所以iOS上不区分小程序、H5，各端均仅依赖iOS版本。
-- 各端Android版本有差异：
-    * H5端数据见caniuse；
-    
-    * 微信小程序[详见](https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/js-support.html#%E5%AE%A2%E6%88%B7%E7%AB%AF%20ES6%20API%20%E6%94%AF%E6%8C%81%E6%83%85%E5%86%B5)
-
-    * 支付宝小程序[详见](https://docs.alipay.com/mini/framework/implementation-detail)
-
-**注意**
-- 默认不需要在微信工具里继续开启es6转换。但如果用了微信的wxml自定义组件（wxcomponents目录下），`M8`编译器并不会处理这些文件中的es6代码，需要去微信工具里开启转换。

package/docs/m8mpdoc-develop/001-/351/241/265/351/235/242/345/274/200/345/217/221/000-/344/273/200/344/271/210/346/230/257/346/235/241/344/273/266/347/274/226/350/257/221.md

@@ -1,176 +0,0 @@
-# 什么是条件编译
-
-## 条件编译
-
-条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
-
-**写法：**以 <span style="color:#859900;"> #ifdef</span> 或 <span style="color:#859900;"> #ifndef</span> 加<b style="color:#268BD2"> %PLATFORM%</b> 开头，以 <span style="color:#859900;">#endif</span> 结尾。
-
-- <span style="color:#859900;"> #ifdef</span>：if defined 仅在某平台存在
-- <span style="color:#859900;"> #ifndef</span>：if not defined 除了某平台均存在
-- <b style="color:#268BD2"> %PLATFORM%</b>：平台名称
-
-<table><thead><tr><th>条件编译写法</th><th>说明</th></tr></thead><tbody><tr><td><div class="code"><span class="token comment"><span style="color:#859900;"> #ifdef</span><b style="color:#268BD2"> H5</b></span><br>需条件编译的代码<br><span class="token comment"> <span style="color:#859900;"> #endif</span></span></div></td><td>仅出现在 H5 平台下的代码</td></tr><tr><td><div class="code"><span class="token comment"> <span style="color:#859900;"> #ifdef</span><b style="color:#268BD2"> MP-ALIPAY</b></span><span style="color:#859900;"> || </span><b style="color:#268BD2">MP-WEIXIN</b><br>需条件编译的代码<br><span class="token comment"> <span style="color:#859900;"> #endif</span></span></div></td><td>在支付宝小程序或微信小程序平台存在的代码（这里只有||，不可能出现&&，因为没有交集）</td></tr><tr><td><div class="code"><span class="token comment"> <span style="color:#859900;"> #ifndef</span><b style="color:#268BD2"> H5</b></span><br>需条件编译的代码<br><span class="token comment"> <span style="color:#859900;"> #endif</span></span></div></td><td>除了 H5 平台，其它平台均存在的代码（只出现在平台小程序中的代码）</td></tr></tbody></table>
-
-<b style="color:#268BD2"> %PLATFORM%</b> **可取值如下：**
-
-| 值                      | 生效条件                                                                          |
-| :---------------------- | :-------------------------------------------------------------------------------- |
-| H5                      | H5                                                                                |
-| MP-WEIXIN               | 微信小程序                                                                        |
-| MP-ALIPAY               | 支付宝小程序                                                                      |
-
-**支持的文件**
-
-- .vue
-- .js
-- .css
-<!-- - pages.json -->
-- 各预编译语言文件，如：.scss、.less、.stylus、.ts、.pug
-
-**注意：**
-
-- 条件编译是利用注释实现的，在不同语法里注释写法不一样，js 使用 `// 注释`、css 使用 `/* 注释 */`、vue 模板里使用 `<!-- 注释 -->`；
-- 使用条件编译请保证`编译前`和`编译后`文件的正确性，比如 json 文件中不能有多余的逗号；
-
-### API 的条件编译
-
-<pre v-pre="" data-lang="javascript"><code class="lang-javascript code"><span class="token comment">//<span style="color:#859900;"> #ifdef</span><b style="color:#268BD2">  %PLATFORM%</b></span>
-平台特有的API实现
-<span class="token comment">//<span style="color:#859900;"> #endif</span></span></code></pre>
-
-示例，如下代码仅在 `微信小程序` 下出现:
-
-```js
-//#ifdef MP-WEIXIN
-uni.chooseVideo({
-  success: (res) => {
-    console.log(res);
-  },
-});
-//#endif
-```
-
-示例，如下代码不会在 `H5` 平台上出现：
-
-```js
-//#ifndef H5
-uni.chooseVideo({
-  success: (res) => {
-    console.log(res);
-  },
-});
-//#endif
-```
-
-除了支持单个平台的条件编译外，还支持**多平台**同时编译，使用 || 来分隔平台名称。
-
-示例，如下代码会在 `支付宝小程序` 和 `微信小程序` 平台上出现：
-
-```js
-//#ifdef MP-ALIPAY || MP-WEIXIN
-uni.chooseVideo({
-  success: (res) => {
-    console.log(res);
-  },
-});
-//#endif
-```
-
-### 组件的条件编译
-
-<pre v-pre="" data-lang="html"><code class="lang-html code"><span class="token comment">&lt;!-- <span style="color:#859900;"> #ifdef</span><b style="color:#268BD2">  %PLATFORM%</b> --&gt;</span>
-平台特有的组件
-<span class="token comment">&lt;!-- <span style="color:#859900;"> #endif</span> --&gt;</span></code></pre>
-
-示例，如下公众号关注组件仅会在微信小程序中出现：
-
-```html
-<view>
-  <view>微信公众号关注组件</view>
-  <view>
-    <!-- M8未封装，但可直接使用微信原生的official-account组件-->
-    <!-- #ifdef MP-WEIXIN -->
-    <official-account></official-account>
-    <!-- #endif -->
-  </view>
-</view>
-```
-
-### 样式的条件编译
-
-<pre v-pre="" data-lang="css"><code class="lang-css code"><span class="token comment">/* <span style="color:#859900;"> #ifdef</span><b style="color:#268BD2">  %PLATFORM% </b> */</span>
-平台特有样式
-<span class="token comment">/* <span style="color:#859900;"> #endif </span> */</span></code></pre>
-
-**注意：** 样式的条件编译，无论是 css 还是 sass/scss/less/stylus 等预编译语言中，必须使用 `/*注释*/` 的写法。
-
-正确写法
-
-```js
-/* #ifdef MP-WEIXIN */
-.wx-color{
-    color:#f00;
-}
-/* #endif */
-```
-
-错误写法
-
-```js
-//#ifdef MP-WEIXIN
-.wx-color{
-    color:#f00;
-}
-//#endif
-```
-
-<!-- ### pages.json 的条件编译
-
-下面的页面，只有运行至 `微信小程序` 时才会编译进去。
-
-```js
-//#ifdef MP-WEIXIN
-{
-    "path":"pages/api/speech/speech",
-    "style":{
-        "navigationBarTitleText":"语音识别"
-    }
-}
-//#endif
-```
-
-不同平台下的特有功能，以及小程序平台的分包，都可以通过 pages.json 的条件编译来更好地实现。这样，就不会在其它平台产生多余的资源，进而减小包体积。
-
-json 的条件编译，如不同平台的 key 名称相同，cli 项目下开发者自己安装的校验器会报错，需自行关闭这些校验器对 json 相同 key 的校验规则。 -->
-
-### static 目录的条件编译
-
-在不同平台，引用的静态资源可能也存在差异，通过 static 的的条件编译可以解决此问题，static 目录下新建不同平台的专有目录（目录名称同 `%PLATFORM%` 值域,但字母均为小写），专有目录下的静态资源只有在特定平台才会编译进去。
-
-如以下目录结构，`a.png` 只有在 `微信小程序` 平台才会编译进去，`b.png` 在所有平台都会被编译。
-
-<pre v-pre="" data-lang="">
-	<code class="lang-" style="padding:0">
-┌─static                
-│  ├─mp-weixin
-│  │  └─a.png     
-│  └─b.png
-├─main.js        
-├─App.vue      
-├─manifest.json 
-└─pages.json     
-	</code>
-</pre>
-
-<!-- ### 整体目录条件编译
-
-如果想把各平台的页面文件更彻底的分开，也可以在`M8`项目`src`目录创建`platforms`目录，然后在下面进一步创建`mp-weixin`等子目录，存放不同平台的文件。
-
-**注意**
-
-- `platforms`目录下只支持放置页面文件（即页面 vue 文件），如果需要对其他资源条件编译建议使用 static 目录的条件编译 -->
-
-### 注意
-
-- 有些跨端工具可以提供 js 的条件编译或多态，但这对于实际开发远远不够。`M8`不止是处理 js，任何代码都可以多端条件编译，才能真正解决实际项目的跨端问题。另外所谓多态在实际开发中会造成大量冗余代码，很不利于复用和维护。举例，微信小程序主题色是绿色，而支付宝小程序是蓝色，你的应用想分平台适配颜色，只有条件编译是代码量最低、最容易维护的。

package/docs/m8mpdoc-develop/001-/351/241/265/351/235/242/345/274/200/345/217/221/000-/345/274/200/345/217/221/350/247/204/350/214/203.md

@@ -1,167 +0,0 @@
-# 开发规范
-
-为了实现多端兼容，综合考虑编译速度、运行性能等因素，`M8跨端框架` 约定了如下开发规范：
-
--   页面文件遵循 [Vue 单文件组件 (SFC) 规范](https://vue-loader.vuejs.org/zh/spec.html)
--   组件标签靠近微信小程序规范，详见以下介绍。
--   数据绑定及事件处理同 `Vue.js` 规范，同时补充了页面的生命周期，具体可查看[生命周期](/m8mpdoc/index.html?file=001-%E9%A1%B5%E9%9D%A2%E5%BC%80%E5%8F%91/009-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F)的介绍。
--   为兼容多端运行，建议使用 flex 布局进行开发
--   跨端框架所有页面默认会在模板的第一层节点内部添加`ejs`的UI模块节点，所以页面模板的第一层节点尽量使用`view`或者`div`标签，请不要使用自定义组件作为第一层节点
-
-## 组件规范
-
-### 组件的属性类型
-
-组件的属性，有多种类型：
-
-| 类型         | 描述           | 注解                                                                                                                                                     |
-| :----------- | :------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Boolean      | 布尔值         | 组件写上该属性，不管该属性等于什么，其值都为 `true`，只有组件上没有写该属性时，属性值才为 `false`。如果属性值为变量，变量的值会被转换为 `Boolean` 类型。 |
-| Number       | 数字           | 1, 2.5                                                                                                                                                   |
-| String       | 字符串         | "string"                                                                                                                                                 |
-| Array        | 数组           | [ 1, "string" ]                                                                                                                                          |
-| Object       | 对象           | { key: value }                                                                                                                                           |
-| EventHandler | 事件处理函数名 | `handlerName` 是 methods 中定义的事件处理函数名                                                                                                          |
-| Any          | 任意属性       |                                                                                                                                                     |
-
-下面的例子演示了组件的属性设置 boolean 值和数字的例子。注意`false`作为一个 js 变量，在组件的属性中使用时，属性前面需增加`:`冒号前缀，属性值仍使用引号包裹，但引号里不是字符串，而是 js。
-
-```html
-<template>
-    <view>
-        <button size="mini" :disabled="false" hover-start-time="20">按钮</button>
-    </view>
-</template>
-```
-
-### 公共属性列表
-
-每个组件都有各自定义的属性，但所有 框架 的内置组件，都有如下属性：
-
-| 属性名  | 类型         | 描述                 | 注解                                                                              |
-| :------ | :----------- | :------------------- | :-------------------------------------------------------------------------------- |
-| id      | String       | 组件的唯一标示       | 一般用于获取组件上下文对象，需要保持整个页面唯一                                  |
-| ref     | String       | vue 中组件的唯一标示 | 用来给子组件注册引用信息                                                          |
-| class   | String       | 组件的样式类         | 在对应的 css 中定义的样式类                                                       |
-| style   | String       | 组件的内联样式       | 可以动态设置的内联样式                                                            |
-| hidden  | Boolean      | 组件是否隐藏         | 所有组件默认是显示的                                                              |
-| data-\* | Any          | 自定义属性           | 组件上触发的事件时，会发送给事件处理函数                                          |
-| @\*     | EventHandler | 组件的事件           | 详见各组件详细文档，事件绑定参考 [事件处理器](/tutorial/vue-basics?id=事件处理器) |
-
-除了上述公共属性，还有一类特殊属性以`v-`开头，称之为 vue 指令，如 v-if、v-else、v-for、v-model等。
-
-### 内置组件
-
-M8 跨端框架的组件，分为内置组件和参考 vant 规范开发的跨端组件。
-
-内置组件在框架中已经内置，无需将内置组件的文件导入项目，也无需注册内置组件，随时可以直接使用，比如`<view>`组件。
-
-除了框架提供的内置组件和封装的跨端组件，其他组件需要将组件导入项目中才可以使用。
-
-框架为开发者提供了一系列内置组件，类似 HTML 里的基础标签元素。
-
-但 框架 的内置组件与 HTML 不同，而是与平台小程序相同，可更好的满足手机端的使用习惯。
-
-虽然不推荐使用 HTML 标签，但实际上如果开发者写了`div`等标签，在编译到非 H5 平台时也会被编译器转换为`view`标签，类似的还有`span`转`text`、`a`转`navigator`等，包括 css 里的元素选择器也会转。但为了管理方便、策略统一，新写代码时仍然建议使用 view 等组件。
-
-开发者可以通过组合这些基础组件进行快速开发。在需要复用的情况下可封装成自定义组件。
-
-框架的内置组件规范，与平台小程序规范相近。如果了解微信小程序开发的话，对内置组件会感觉很熟悉。但需要注意组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 `@change="eventName"`
-
-```html
-<picker mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="bindDateChange">
-    <view class="picker">当前选择: {{date}}</view>
-</picker>
-```
-
-### 组件的类别
-
-框架支持的组件分为 vue 组件和平台小程序自定义组件。
-
-如果你还不了解这两种组件，可以参阅各自的文档
-
--   vue 组件：[文档](https://uniapp.dcloud.net.cn/tutorial/vue-components?id=%e6%a6%82%e5%bf%b5)
--   平台小程序自定义组件：其规范不是 vue 规范，而是平台小程序规范，[文档](https://uniapp.dcloud.net.cn/tutorial/miniprogram-subject.html#小程序自定义组件支持)
-
-日常开发来讲，推荐使用 vue 组件。框架支持平台小程序组件主要是为了兼容更多生态资源。
-
-如果自定义组件符合 框架 的`easycom`组件规范，则可以免注册，直接使用。`easycom`相关[详见](/m8mpdoc/index.html?file=0001-前期准备/005-pages)
-
-如果组件不符合 easycom 规范，则需要在代码里手动 import 和注册组件，然后才能使用。
-
-### 平台小程序原生组件
-
-#### 平台小程序原生组件说明
-
-平台小程序的 vue 页面，主体是 webview 渲染的。为了提升性能，平台小程序的 vue 页面下部分 ui 元素，比如导航栏、tabbar、video、map 使用了原生控件。这种方式被称为混合渲染。
-
-虽然提升了性能，但平台小程序原生组件带来了其他问题：
-
-1. 前端组件无法覆盖原生控件的层级问题
-2. 平台小程序原生组件不能嵌入特殊前端组件(如 scroll-view)
-3. 原生控件 ui 无法灵活自定义
-4. 原生控件在 Android 上，字体会渲染为 rom 的主题字体，而 webview 如果不经过单独改造不会使用 rom 主题字体
-
-H5端和新点小程序端的页面，不存在混合渲染的情况，它们或者全部是前端渲染、或者全部是原生渲染，不涉及层级问题。
-
-#### 混合渲染模式下平台小程序原生组件的使用限制
-
-由于平台小程序原生组件脱离在 WebView 渲染流程外，因此在使用时有以下限制：
-
--   平台小程序原生组件的层级是**最高**的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。后插入的平台小程序原生组件可以覆盖之前的平台小程序原生组件。
--   平台小程序原生组件无法在 scroll-view、swiper、picker-view、movable-view 中使用。
--   同层渲染支持：微信基础库 2.4.4 起支持了 video 的同层渲染、微信基础库 2.8.3 支持 map 的同层渲染。支持同层渲染后，相关组件的时候不再有层级问题，无需再使用 cover-view 覆盖，也可以内嵌入 swiper 等组件。
--   需要注意的是，微信原生组件的「同层渲染」能力可能会在特定情况下失效，一方面你需要在开发时稍加注意，另一方面同层渲染失败会触发 `bindrendererror` 事件，可在必要时根据该回调做好 UI 的回退。
-
-可在组件中监听同层失败回调 bindrendererror 来判断
-
--   部分 CSS 样式无法应用于平台小程序原生组件，例如：
-    -   无法对平台小程序原生组件设置 CSS 动画；
-    -   无法定义平台小程序原生组件为 position: fixed；
-    -   不能在父级节点使用 overflow: hidden 来裁剪平台小程序原生组件的显示区域。
--   在平台小程序端真机上，平台小程序原生组件会遮挡 vConsole 弹出的调试面板。
-
-#### 内置组件里的平台小程序原生组件
-
-框架的内置组件里，有一批平台小程序原生组件，如 video、map...
-
-这些组件如果用于 vue 页面，也就是 webview 渲染时，会造成层级高于普通前端组件的情况。
-
-它们的层级需要使用 cover-view 等特殊组件才能覆盖。
-
-框架中平台小程序原生组件清单如下：
-
--   [map](/m8mpdoc/index.html?file=017-内置组件/018-map)
--   [video](/m8mpdoc/index.html?file=017-内置组件/010-video)
--   [camera](/m8mpdoc/index.html?file=017-内置组件/008-camera)（仅微信小程序支持）
--   [canvas](/m8mpdoc/index.html?file=017-内置组件/013-canvas)（仅在微信小程序表现为微信小程序原生组件）
--   [input](/m8mpdoc/index.html?file=017-内置组件/019-input "input")（仅在微信小程序、支付宝小程序中且 input 置焦时表现为平台小程序原生组件，其中支付宝小程序的 input 仅为 text 且置焦时才表现为平台小程序原生组件）
--   [textarea](/m8mpdoc/index.html?file=017-内置组件/020-textarea)（仅在微信小程序表现为微信原生组件）
--   [live-player](/m8mpdoc/index.html?file=017-内置组件/011-live-player)（仅微信小程序直接使用 video 组件可同时实现拉流）
--   [live-pusher](/m8mpdoc/index.html?file=017-内置组件/012-live-pusher)（仅微信小程序支持）
--   [cover-view](/m8mpdoc/index.html?file=017-内置组件/005-cover-view)
--   [cover-image](/m8mpdoc/index.html?file=017-内置组件/006-cover-image)
-
-#### 其他原生界面元素
-
-除了平台小程序原生组件外，框架在非 H5 端还有其他原生界面元素，清单如下：
-
--   原生 navigationBar 和 tabbar（pages.json 里配置的）。
--   web-view 组件虽然不是原生的，但这个组件相当于一个原生 webview 覆盖在页面上，并且平台小程序上 web-view 组件是强制全屏的，无法在上面覆盖前端元素
--   弹出框：chooseImage、chooseVideo 等弹出元素也无法被前端组件覆盖
-
-#### vue 页面层级覆盖解决方案
-
-为了解决 webview 渲染中平台小程序原生组件层级最高的限制，框架提供了 `cover-view` 和 `cover-image` 组件，让其覆盖在平台小程序原生组件上。
-
-`cover-view`只能覆盖平台小程序原生组件，不能覆盖其他原生界面元素。比如 cover-view 可以覆盖 video、map，但无法覆盖原生导航栏、tabbar、web-view。
-
-微信小程序在基础库 2.4.0 起已支持 video 组件的同层渲染，2.7.0 起支持 map 组件的同层渲染。可以被前端元素通过调节 zindex 来遮挡，也支持在 scroll-view 等组件中内嵌这 2 个平台小程序原生组件。但 video 全屏时，仍需要 cover-view 覆盖。
-
-如果你的层级覆盖问题比较简单，不用嵌套，且有跨端需求，就使用 cover-view。
-
-**更多组件**
-
-除了内置组件、框架封装的跨端组件，插件市场还有更多扩展组件、模板，具体见[插件市场](https://ext.dcloud.net.cn/)。
-
-关于其他 vue 的 web 组件库、平台小程序组件库是否能在 框架 中使用的问题，参考[https://ask.dcloud.net.cn/article/35489](https://ask.dcloud.net.cn/article/35489)

package/docs/m8mpdoc-develop/001-/351/241/265/351/235/242/345/274/200/345/217/221/000-/345/274/225/347/224/250CSS.md

@@ -1,15 +0,0 @@
-# 引用CSS
-
-使用`@import`语句可以导入外联样式表，`@import`后跟需要导入的外联样式表的相对路径，用`;`表示语句结束。
-
-**示例代码：**
-
-```html
-<style>
-    @import "../../common/uni.css";
-
-    .em-card {
-        box-shadow: none;
-    }
-</style>
-```

package/docs/m8mpdoc-develop/001-/351/241/265/351/235/242/345/274/200/345/217/221/000-/345/274/225/347/224/250JS.md

@@ -1,42 +0,0 @@
-# 引用JS
-
-### js 文件引入
-
-> `js`文件或`script`标签内（包括 renderjs 等）引入`js`文件时，可以使用相对路径和绝对路径，形式如下
-
-```js
-// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
-import add from '@/common/add.js';
-// 相对路径
-import add from '../../common/add.js';
-```
-
-**注意**
-
-- js 文件不支持使用`/`开头的方式引入
-
-## NPM支持
-
-`M8`支持使用**npm**安装第三方包。
-
-此文档要求开发者们对**npm**有一定的了解，因此不会再去介绍**npm**的基本功能。如若之前未接触过**npm**，请翻阅[NPM官方文档](https://docs.npmjs.com/getting-started/what-is-npm)进行学习。
-
-**安装依赖**
-
-在项目根目录执行命令安装npm包：
-```shell
-npm install packageName --save
-```
-
-**使用**
-
-安装完即可使用npm包，js中引入npm包：
-```js
-import package from 'packageName'
-const package = require('packageName')
-```
-
-**注意**
-
-* node_modules 目录必须在项目根目录下。
-* 非 H5 端不支持使用含有 dom、window 等操作的 vue 组件和 js 模块，安装的模块及其依赖的模块使用的 API 必须是 `M8` 已有的 API（兼容平台小程序 API），比如：支持[高德地图微信小程序 SDK](https://www.npmjs.com/package/amap-wx)。类似[jQuery](https://www.npmjs.com/package/jquery) 等库只能用于H5端。