m8-framework-mcp 1.0.0

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

@@ -0,0 +1,90 @@
+#### canvas
+
+画布。
+
+**属性说明**
+
+| 属性名         | 类型        | 默认值 | 说明                                                                | 平台差异说明           |
+| :------------- | :---------- | :----- | :------------------------------------------------------------------ | :--------------------- |
+| type           | String      |        | 指定 canvas 类型，支持 2d (2.9.0) 和 webgl                          | 微信小程序 2.7.0+ 支持 |
+| canvas-id      | String      |        | canvas 组件的唯一标识符                                             |                        |
+| disable-scroll | Boolean     | false  | 当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新    |                        |
+| hidpi          | Boolean     | true   | 是否启用高清处理                                                    | H5 支持                |
+| @longtap       | EventHandle |        | 手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动 |                        |
+| @error         | EventHandle |        | 当发生错误时触发 error 事件，detail = {errMsg: 'something wrong'}   |                        |
+
+**注意事项：**
+
+-   canvas 标签默认宽度 300px、高度 225px，动态修改 canvas 大小后需要重新绘制。
+-   h5中单个尺寸过大的 canvas 在 iOS/Safari 无法绘制（具体限制尺寸未公布）。
+-   同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作。
+-   canvas 在微信小程序中为原生组件，层级高于前端组件，请勿内嵌在 scroll-view、movable-view 中使用。
+-   平台小程序，因为通信阻塞，难以绘制非常流畅的 canvas 动画。h5 不存在此问题。
+
+**示例：** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/canvas/canvas)
+
+::: preview https://hellouniapp.dcloud.net.cn/pages/component/canvas/canvas
+
+> Template
+
+```html
+<template>
+    <view>
+        <canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas" id="firstCanvas"></canvas>
+        <canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas" id="secondCanvas"></canvas>
+        <canvas
+            style="width: 400px; height: 500px;"
+            canvas-id="secondCanvas"
+            id="secondCanvas"
+            @error="canvasIdErrorCallback"
+        ></canvas>
+    </view>
+</template>
+```
+
+> Script
+
+```html
+<script>
+export default {
+    onReady: function (e) {
+        var context = uni.createCanvasContext('firstCanvas');
+        context.setStrokeStyle('#00ff00');
+        context.setLineWidth(5);
+        context.rect(0, 0, 200, 200);
+        context.stroke();
+        context.setStrokeStyle('#ff0000');
+        context.setLineWidth(2);
+        context.moveTo(160, 100);
+        context.arc(100, 100, 60, 0, 2 * Math.PI, true);
+        context.moveTo(140, 100);
+        context.arc(100, 100, 40, 0, Math.PI, false);
+        context.moveTo(85, 80);
+        context.arc(80, 80, 5, 0, 2 * Math.PI, true);
+        context.moveTo(125, 80);
+        context.arc(120, 80, 5, 0, 2 * Math.PI, true);
+        context.stroke();
+        context.draw();
+    },
+    methods: {
+        canvasIdErrorCallback: function (e) {
+            console.error(e.detail.errMsg);
+        }
+    }
+};
+</script>
+```
+
+:::
+
+相关 api：`Util.createCanvasContext`
+
+**扩展阅读**
+
+canvas 的常用用途有图表和图片处理，在插件市场有大量基于 canvas 的插件，可搜索 [图表](https://ext.dcloud.net.cn/search?q=图表) 、 [头像裁剪](https://ext.dcloud.net.cn/search?q=头像裁剪) 、 [海报](https://ext.dcloud.net.cn/search?q=海报) 、 [二维码](https://ext.dcloud.net.cn/search?q=%E4%BA%8C%E7%BB%B4%E7%A0%81) 。
+
+关于图表
+
+-   H5 端流行的 echart 报表因为涉及大量 dom 操作，无法跨端使用，而 wx-chart 在跨端和更新方面都不足。如考虑平台小程序，推荐使用全端可用的[uChart](https://ext.dcloud.net.cn/plugin?id=271)。
+-   如只考虑 H5 端，也可以继续使用 echart、f2 等常规 web 图表。
+-   如不考虑平台小程序，那么 H5，也可以通过 renderjs 技术来使用 echart、f2 等 web 图表，功能性能比 uchart 更好。[什么是 renderjs](https://uniapp.dcloud.io/frame?id=renderjs)、[基于 renderjs 使用 echart 的示例](https://ext.dcloud.net.cn/plugin?id=1207)

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

@@ -0,0 +1,151 @@
+#### web-view
+
+`web-view` 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面。
+
+> 各小程序平台，web-view 加载的 url 需要在后台配置域名白名单，包括内部再次 iframe 内嵌的其他 url 。
+
+**属性说明**
+
+| 属性名   | 类型         | 说明                                                                                                                                                           | 平台差异说明                                                                                                          |
+| :------- | :----------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------- |
+| src      | String       | webview 指向网页的链接                                                                                                                                         |                                                                                                                  |
+| allow    | String       | 用于为 [iframe](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe) 指定其[特征策略](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/策略特征) | H5 支持                                                                                                               |
+| sandbox  | String       | 该属性对呈现在 [iframe](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe) 框架中的内容启用一些额外的限制条件。                                 | H5 支持                                                                                                               |
+| @message | EventHandler | 网页向应用 `postMessage` 时，会在特定时机（后退、组件销毁、分享）触发并收到消息。                                                                              | H5 暂不支持（可以直接使用 [window.postMessage](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage)） |
+
+**src**
+
+| 来源 | H5  | 微信小程序 | 支付宝小程序 |
+| :--- | :-: | :--------: | :----------: |
+| 网络 |  √  |     √      |      √       |
+| 本地 |  √  |     x      |      x       |
+
+::: preview https://hellouniapp.dcloud.net.cn/pages/component/web-view/web-view
+
+```html
+<template>
+    <view>
+        <web-view src="https://uniapp.dcloud.io/static/web-view.html"></web-view>
+    </view>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {};
+        }
+    };
+</script>
+
+<style></style>
+```
+
+:::
+
+注意：
+
+-   平台小程序仅支持加载网络网页，不支持本地 html
+-   平台小程序端 web-view 组件一定有原生导航栏，下面一定是全屏的 web-view 组件，navigationStyle: custom 对 web-view 组件无效。
+
+<pre v-pre="" data-lang="">
+	<code class="lang-" style="padding:0">
+┌─components           
+├─hybrid              
+│  └─html
+│     ├─css
+│     │  └─test.css
+│     ├─img
+│     │  └─icon.png
+│     ├─js
+│     │  └─test.js
+│     └─local.html
+├─pages              
+│  └─index
+│     └─index.vue  
+├─static              
+├─main.js             
+├─App.vue              
+├─manifest.json      
+└─pages.json         
+	</code>
+</pre>
+
+**示例** [查看示例](https://hellouniapp.dcloud.net.cn/pages/component/web-view/web-view)
+
+```html
+<template>
+    <view>
+        <web-view src="/hybrid/html/local.html"></web-view>
+    </view>
+</template>
+```
+
+`<web-view>` 加载的网页中支持调用部分 API 接口（网页中需引入`uni.webview.js`，最新版地址：[https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.4.js](https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.4.js)：
+
+| 方法名           | 平台差异说明                                   |
+| :--------------- | :--------------------------------------------- |
+| page.open        |                                                |
+| page.replace     |                                                |
+| page.close       |                                                |
+| Util.postMessage | H5 暂不支持（可以直接使用 window.postMessage） |
+
+##### Util.postMessage(OBJECT)
+
+网页向应用发送消息，在 `<web-view>` 的 `message` 事件回调 `event.detail.data` 中接收消息。
+
+**Tips**
+
+-   传递的消息信息，必须写在 data 对象中。
+-   `event.detail.data` 中的数据，以数组的形式接收每次 post 的消息。（注：支付宝小程序除外，支付宝小程序中以对象形式接受）
+
+##### `web-view`组件的层级问题
+
+web-view 组件在 平台小程序中层级较高，如需要在 vue 页面中写代码为 web-view 组件覆盖内容，平台小程序端无解，只能由 web-view 的组件自己弹出 div。
+
+##### web-view 组件的浏览器内核说明
+
+-   H5 端的 web-view 其实是被转为 iframe 运行，使用的是当前的浏览器
+-   平台小程序的 web-view 使用的是平台小程序自带的浏览器内核，不同厂商不一样，[详见](https://ask.dcloud.net.cn/article/1318)
+
+**注意事项**
+
+-   `<web-view>` 组件默认铺满全屏并且层级高于前端组件。H5 端可以改为直接使用 iframe。
+-   `<web-view>` 组件所在窗口的标题，跟随页面的 `<title>` 值的变化而变化（不含 H5 端）。
+-   平台小程序平台， `src` 指向的链接需登录平台小程序管理后台配置域名白名单。`H5` 无此限制。
+
+##### FAQ
+
+Q：web-view 的页面怎么和应用内的页面交互？
+A：调用 uni 相关的 API，就可以实现页面切换及发送消息。参考：[在 web-view 加载的 HTML 中调用 uni 的 API](https://ask.dcloud.net.cn/article/35083)
+
+Q: web-view 加载H5页面，内部跳转冲突如何解决
+A：使用 uni.webView.navigateTo...
+
+uni.webView.navigateTo 示例，注意 uni sdk 放到 body 下面
+
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+    <head>
+        ...
+    </head>
+    <body>
+        <noscript>
+            <strong>Please enable JavaScript to continue.</strong>
+        </noscript>
+        <div id="app"></div>
+        <!-- built files will be auto injected -->
+    </body>
+    <!-- uni 的 SDK -->
+    <!-- 需要把 uni.webview.1.5.4.js 下载到自己的服务器 -->
+    <script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script>
+    <script>
+        document.addEventListener('UniAppJSBridgeReady', function () {
+            uni.webView.getEnv(function (res) {
+                console.log('当前环境：' + JSON.stringify(res));
+            });
+            // uni.webView.navigateTo(...)
+        });
+    </script>
+</html>
+```

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

@@ -0,0 +1,308 @@
+### component
+
+渲染一个“元组件”为动态组件。依 `is` 的值，来决定哪个组件被渲染。[详见](https://cn.vuejs.org/v2/api/#component)
+
+**平台差异说明**
+
+| H5  | 微信小程序 | 支付宝小程序 |
+| :-: | :--------: | :----------: |
+|  √  |     x      |      x       |
+
+### template
+
+跨端框架支持在 `template` 模板中嵌套 `<template/>` 和 `<block/>`，用来进行 列表渲染和 条件渲染。
+
+`<template/>` 和 `<block/>` 并不是一个组件，它们仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
+
+`<block/>` 在不同的平台表现存在一定差异，推荐统一使用 `<template/>`。
+
+**平台差异说明**
+
+| H5  | 微信小程序 | 支付宝小程序 |
+| :-: | :--------: | :----------: |
+|  √  |     √      |      √       |
+
+**代码示例**
+
+```html
+<template>
+    <view>
+        <template v-if="test">
+            <view>test 为 true 时显示</view>
+        </template>
+        <template v-else>
+            <view>test 为 false 时显示</view>
+        </template>
+    </view>
+</template>
+<script>
+    export default {
+        data() {
+            return {
+                test: true
+            };
+        }
+    };
+</script>
+```
+
+```html
+<template>
+    <view>
+        <block v-for="(item,index) in list" :key="index">
+            <view>{{item}} - {{index}}</view>
+        </block>
+    </view>
+</template>
+```
+
+### slot
+
+`<slot>` 元素作为组件模板之中的内容分发插槽。`<slot>` 元素自身将被替换。
+
+详细用法，请参考下面教程的链接。[通过插槽分发内容](https://cn.vuejs.org/v2/guide/components.html#%E9%80%9A%E8%BF%87%E6%8F%92%E6%A7%BD%E5%88%86%E5%8F%91%E5%86%85%E5%AE%B9)
+
+**平台差异说明**
+
+| H5  | 微信小程序 | 支付宝小程序 |
+| :-: | :--------: | :----------: |
+|  √  |     √      |      √       |
+
+#### 编译作用域
+
+当你想在一个插槽中使用数据时，例如：
+
+```html
+<navigation-link url="/profile">Logged in as {{ user.name }}</navigation-link>
+```
+
+该插槽跟模板的其它地方一样可以访问相同的实例 `property` (也就是相同的“作用域”)，而不能访问 `<navigation-link>` 的作用域。例如 `url` 是访问不到的：
+
+```html
+<navigation-link url="/profile">
+    Clicking here will send you to: {{ url }}
+    <!--
+		这里的 `url` 会是 undefined，
+		因为其 (指该插槽的) 内容是_传递给_ <navigation-link> 的
+		而不是在 <navigation-link> 组件*内部*定义的。
+	-->
+</navigation-link>
+```
+
+> 记住规则：**父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。**
+
+#### 具名插槽
+
+需要多个插槽时，可以利用 `<slot>` 元素的一个特殊的特性：`name` 来定义具名插槽
+
+-   `<base-layout>` 子组件模板：
+
+```html
+<template>
+    <view class="container">
+        <header>
+            <!-- 我们希望把页头放这里 -->
+            <slot name="header"></slot>
+        </header>
+        <main>
+            <!-- 我们希望把主要内容放这里 -->
+            <slot></slot>
+        </main>
+        <footer>
+            <!-- 我们希望把页脚放这里 -->
+            <slot name="footer"></slot>
+        </footer>
+    </view>
+</template>
+```
+
+-   在向具名插槽提供内容的时候，我们可以在一个 `<template>` 元素上使用 `v-slot` 指令，并以 v-slot 的参数的形式提供其名称：
+
+```html
+<template>
+    <view>
+        <!-- 父组件使用子组件`<base-layout>`，节点上使用slot特性： -->
+        <base-layout>
+            <template v-slot:header>
+                <view>Here might be a page title</view>
+            </template>
+            <template v-slot:default>
+                <view>A paragraph for the main content.</view>
+                <view>And another one.</view>
+            </template>
+            <template v-slot:footer>
+                <view>Here's some contact info</view>
+            </template>
+        </base-layout>
+    </view>
+</template>
+```
+
+现在 `<template>` 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 `<template>` 中的内容都会被视为默认插槽的内容。
+
+> v-slot 只能添加在 `<template>` 上
+>
+> 一个不带 name 的 `<slot>` 出口会带有隐含的名字 “default” 。
+>
+> 强烈推荐具名插槽命名时不要使用带短横线的名称，这类插槽名编译到平台小程序中会有问题。
+
+##### 具名插槽的缩写
+
+跟 v-on 和 v-bind 一样，`v-slot` 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 **#**。例如 `v-slot:header` 可以被重写为 `#header` ：
+
+```html
+<template>
+    <view>
+        <!-- 父组件使用子组件`<base-layout>`，节点上使用slot特性： -->
+        <base-layout>
+            <template #header>
+                <view>Here might be a page title</view>
+            </template>
+
+            <view>A paragraph for the main content.</view>
+            <view>And another one.</view>
+
+            <template #footer>
+                <view>Here's some contact info</view>
+            </template>
+        </base-layout>
+    </view>
+</template>
+```
+
+### 作用域插槽
+
+注：仅H5端和新点小程序端支持作用域插槽，其他平台小程序请使用解构插槽
+
+在作用域插槽内，父组件可以拿到子组件的数据。子组件可以在 `slot` 标签上绑定属性值。
+
+有时让插槽内容能够访问子组件中才有的数据是很有用的。
+
+```html
+<!-- 子组件 <current-user>-->
+<template>
+    <view>
+        <slot>{{ user.lastName }}</slot>
+    </view>
+</template>
+```
+
+我们可能想换掉默认内容，用名而非姓来显示。如下：
+
+```html
+<template>
+    <view>
+        <current-user>{{ user.firstName }}</current-user>
+    </view>
+</template>
+```
+
+然而上述代码不会正常工作，因为只有 `<current-user>` 组件可以访问到 user 而我们提供的内容是在父级渲染的。
+
+为了让 user 在父级的插槽内容中可用，我们可以将 user 作为 `<slot>` 元素的一个 `attribute` 绑定上去：
+
+```html
+<!-- 子组件 <current-user>-->
+<template>
+    <view>
+        <slot :user="user">{{user.lastName}}</slot>
+    </view>
+</template>
+<script>
+    export default {
+        data() {
+            return {
+                user: {
+                    lastName: 'bar',
+                    firstName: 'foo'
+                }
+            };
+        }
+    };
+</script>
+```
+
+绑定在 `<slot>` 元素上的 `attribute` 被称为**插槽 prop**。现在在父级作用域中，我们可以使用带值的 `v-slot` 来定义我们提供的插槽 `prop` 的名字：
+
+```html
+<template>
+    <view>
+        <current-user>
+            <template v-slot:default="slotProps">{{ slotProps.user.firstName }}</template>
+        </current-user>
+    </view>
+</template>
+```
+
+在这个例子中，我们选择将包含所有插槽 `prop` 的对象命名为 `slotProps` ，但你也可以使用任意你喜欢的名字。
+
+##### 独占默认插槽的缩写语法
+
+就像假定未指明的内容对应默认插槽一样，不带参数的 `v-slot` 被假定对应默认插槽：
+
+```html
+<template>
+    <view>
+        <current-user>
+            <template v-slot="slotProps">{{ slotProps.user.firstName }}</template>
+        </current-user>
+    </view>
+</template>
+```
+
+**默认插槽的缩写语法不能和具名插槽混用**，因为它会导致作用域不明确：
+
+```html
+<template>
+    <view>
+        <!-- 无效，会导致警告 -->
+        <current-user v-slot="slotProps">
+            {{ slotProps.user.firstName }}
+            <template v-slot:other="otherSlotProps">slotProps is NOT available here</template>
+        </current-user>
+    </view>
+</template>
+```
+
+只要出现多个插槽，请始终为**所有的插槽**使用完整的基于 `<template>` 的语法：
+
+```html
+<template>
+    <view>
+        <current-user>
+            <template v-slot:default="slotProps">{{ slotProps.user.firstName }}</template>
+
+            <template v-slot:other="otherSlotProps">...</template>
+        </current-user>
+    </view>
+</template>
+```
+
+#### 解构插槽 Prop
+
+作用域插槽的内部工作原理是将你的插槽内容包裹在一个拥有单个参数的函数里：
+
+```js
+	function (slotProps) {
+		// 插槽内容
+	}
+```
+
+这意味着 `v-slot` 的值实际上可以是任何能够作为函数定义中的参数的 `JavaScript` 表达式。
+所以在支持的环境下 ( [单文件组件](https://cn.vuejs.org/v2/guide/single-file-components.html) 或 [现代浏览器](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment))，你也可以使用 [ES2015 解构](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) 来传入具体的插槽 `prop`，如下：
+
+```html
+<current-user v-slot="{ user }">{{ user.firstName }}</current-user>
+```
+
+这样可以使模板更简洁，尤其是在该插槽提供了多个 `prop` 的时候。它同样开启了 `prop` 重命名等其它可能，例如将 `user` 重命名为 `person` ：
+
+```html
+<current-user v-slot="{ user: person }">{{ person.firstName }}</current-user>
+```
+
+你甚至可以定义后备内容，用于插槽 `prop` 是 `undefined` 的情形：
+
+```html
+<current-user v-slot="{ user = { firstName: 'Guest' } }">{{ user.firstName }}</current-user>
+```