m8-framework-mcp 1.0.0

package/docs/m8mpdoc-develop/001-/351/241/265/351/235/242/345/274/200/345/217/221/009-/347/224/237/345/221/275/345/221/250/346/234/237vue3.md

@@ -0,0 +1,100 @@
+# 生命周期
+
+M8.4 移动前端框架使用 vue3 ，支持 `组合式 API` 和 `选项式 API` 。
+
+## 使用组合式 API （推荐）
+
+通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。
+
+从 vue 包内导入并使用基础的组合式 API，具体 API 可以参考：[Vue 官网](https://cn.vuejs.org/api/composition-api-lifecycle.html)。从 @dcloudio/uni-app 包内导入 uni-app [应用生命周期](/collocation/App.md#applifecycle)及[页面的生命周期](/tutorial/page.md#lifecycle)。
+
+### 使用 Script Setup
+
+Script Setup 写法导入 API
+
+```html
+<script setup>
+    import { ref, onMounted } from 'vue';
+    import { onReady, onLoad } from '@dcloudio/uni-app';
+    const title = ref('Hello');
+    // uni-app 生命周期
+    onLoad((option) => {
+        console.log('页面 onLoad:', option); // 页面 onLoad: {id: '1', name: 'uniapp'}
+    });
+    onReady(() => {
+        console.log('onReady');
+    });
+    // vue3 生命周期
+    onMounted(() => {
+        console.log(`the component is now mounted.`);
+    });
+</script>
+```
+
+## 使用选项式 API
+
+当时用 `选项式 API` 时，[选项式生命周期](https://cn.vuejs.org/api/options-lifecycle.html)使用方式与 M8.3 相似，即在组件选项中定义生命周期函数。
+
+### 注意
+
+在 Vue3 中组件卸载的生命周期相对于 Vue2 被重新命名
+- beforeDestroy -> beforeUnmount
+- destroyed -> unmounted
+
+```javascript
+export default {
+    name: 'HelloWorld',
+    data() {
+        return {
+            msg: 'Hello Vue3!',
+        };
+    },
+    onLoad() {
+        console.log('onLoad');
+    },
+    created() {
+        console.log('created');
+    },
+    mounted() {
+        console.log('mounted');
+    },
+    updated() {
+        console.log('updated');
+    },
+    beforeUnmount() {
+        console.log('beforeUnmount');
+    },
+    unmounted() {
+        console.log('unmounted');
+    },
+};
+```
+
+## 页面生命周期
+
+**M8.4 跨端框架 支持的页面生命周期函数与 M8.3 保持一致：**
+
+    组合式 API 需要注意，uniapp 提供的页面生命周期需要从 @dcloudio/uni-app 包内导入。
+
+[教程-页面开发-生命周期-M8.3](//app.epoint.com.cn/m8mpdoc/?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)
+
+## 组件生命周期
+
+    组合式 API 需要注意，vue3 提供的生命周期需要从 vue 包内导入。
+
+| 生命周期钩子    | 描述                                                                                                                                                                                                                                              | H5  | App 端 | 微信小程序 |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ------ | ---------- |
+| beforeCreate    | 在实例初始化之后，数据观测`(data observer)`和 `event/watcher` 事件配置之前被调用。[详情](https://v3.cn.vuejs.org/api/options-lifecycle-hooks.html#beforecreate)                                                                                   | √   | √      | √          |
+| created         | 在实例创建完成后被立即调用。[详情](https://v3.cn.vuejs.org/api/options-lifecycle-hooks.html#created)                                                                                                                                              | √   | √      | √          |
+| beforeMount     | 在挂载开始之前被调用：相关的 `render` 函数首次被调用。[详情](https://v3.cn.vuejs.org/api/options-lifecycle-hooks.html#beforemount)                                                                                                                | √   | √      | √          |
+| mounted         | 实例被挂载后调用，这时 `Vue.createApp({}).mount()` 被新创建的 `vm.$el` 替换了。[详情](https://v3.cn.vuejs.org/api/options-lifecycle-hooks.html#mounted)                                                                                           | √   | √      | √          |
+| beforeUpdate    | 数据更新时调用，发生在虚拟 `DOM` 打补丁之前。[详情](https://v3.cn.vuejs.org/api/options-lifecycle-hooks.html#beforeupdate)                                                                                                                        | √   | √      | √          |
+| updated         | 由于数据更改导致的虚拟 `DOM` 重新渲染和打补丁，在这之后会调用该钩子。[详情](https://v3.cn.vuejs.org/api/options-lifecycle-hooks.html#updated)                                                                                                     | √   | √      | √          |
+| activated       | 被 `keep-alive` 缓存的组件激活时调用。[详情](https://v3.cn.vuejs.org/api/options-lifecycle-hooks.html#activated)                                                                                                                                  | √   | √      | x          |
+| deactivated     | 被 `keep-alive` 缓存的组件停用时调用。[详情](https://v3.cn.vuejs.org/api/options-lifecycle-hooks.html#deactivated)                                                                                                                                | √   | √      | x          |
+| beforeUnmount   | 在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。[详情](https://v3.cn.vuejs.org/api/options-lifecycle-hooks.html#beforeunmount)                                                                                                          | √   | √      | √          |
+| unmounted       | 卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。[详情](https://v3.cn.vuejs.org/api/options-lifecycle-hooks.html#unmounted)                                                        | √   | √      | √          |
+| errorCaptured   | 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。[详情](https://v3.cn.vuejs.org/api/options-lifecycle-hooks.html#errorcaptured)                                          | √   | √      | √          |
+| renderTracked   | 跟踪虚拟 `DOM` 重新渲染时调用。钩子接收 `debugger event` 作为参数。此事件告诉你哪个操作跟踪了组件以及该操作的目标对象和键。[详情](https://v3.cn.vuejs.org/api/options-lifecycle-hooks.html#rendertracked)                                         | √   | √      | √          |
+| renderTriggered | 当虚拟 `DOM` 重新渲染为 `triggered.Similarly` 为`renderTracked`，接收 `debugger event` 作为参数。此事件告诉你是什么操作触发了重新渲染，以及该操作的目标对象和键。[详情](https://v3.cn.vuejs.org/api/options-lifecycle-hooks.html#rendertriggered) | √   | √      | √          |
+

package/docs/m8mpdoc-develop/001-/351/241/265/351/235/242/345/274/200/345/217/221/010-/346/236/204/345/273/272.md

@@ -0,0 +1,94 @@
+# 构建
+
+移动前端跨端框架目前支持的构建环境：
+
+-   H5
+
+-   H5-EJS
+
+-   H5-钉钉
+
+-   微信小程序
+
+-   支付宝小程序
+
+-   新点小程序 (>= 8.3.2)
+
+## 构建资源位置
+
+移动前端跨端框架构建后的资源在`dist/build`文件夹下
+
+其中 H5、H5-EJS、H5-钉钉、新点小程序 构建后的资源都在 `dist/build/h5` 下
+
+微信小程序 构建后的资源在 `dist/build/mp-weixin` 下
+
+支付宝小程序 构建后的资源在 `dist/build/mp-alipay` 下
+
+微信小程序、支付宝小程序构建后需要通过微信、支付宝小程序开发者工具，导入对应的构建资源，进行上架预览等操作。
+
+## 构建命令
+
+### H5:
+
+```bash
+npm run build
+```
+
+是否需要 jssdk 环境相关 API，在 config.js 中通过 env 函数控制：
+
+```js
+/**
+* 开发环境常量，ejs、dingtalk
+*/
+env: (function () {
+    // var ENV_H5 = 'uni';
+    // var ENV_EJS = 'native';
+    // var ENV_DD = 'dd';
+    var ENV_EJS_H5 = 'native_uni';
+    // var ENV_DD_H5 = 'dd_uni';
+    // var ENV_ALL = 'native_dd_uni';
+
+    return ENV_EJS_H5;
+})(),
+```
+此处的`uni`表示`uni-app`提供的h5相关API，所以`uni`可以理解为以往的`h5`含义。
+
+框架根据env函数返回的字符串加载指定的jssdk，例如:
+
+`'native_uni'`加载ejs.native和uni.h5的jssdk
+
+`'native_dd_uni'`加载ejs.native、dd和uni.h5的jssdk
+
+### 微信小程序:
+
+微信小程序 构建命令：
+
+```bash
+npm run build:mp-weixin
+```
+
+### 支付宝小程序:
+
+支付宝小程序 构建命令：
+
+```bash
+npm run build:mp-alipay
+```
+
+### EJS-新点小程序
+
+(>= v8.3.2)
+
+EJS-新点小程序 构建命令：
+
+```bash
+npm run build -- --moduleType=mp-epoint --moduleName=m8demo --buildType=build
+```
+
+参数描述：
+
+|属性|必填|描述|默认|
+|:-|:-|:-|:-|:-|
+|moduleType|否|当前构建类型，可选：mp-epoint、mp-epoint-card、h5|h5|
+|moduleName|否|构建模块名称||
+|buildType|否|新点小程序构建类型，可选：build、debug、upload||

package/docs/m8mpdoc-develop/001-/351/241/265/351/235/242/345/274/200/345/217/221/011-/345/217/221/345/270/203.md

@@ -0,0 +1,51 @@
+# 多端发布
+
+## H5 发布
+
+H5 应用构建后，H5 资源在框架工程的 `dist/h5/build` 目录下。一般将 H5 资源打包提供给交付人员，由交付人员将 H5 资源上传至服务器，并提供访问地址。
+
+## 微信小程序发布
+
+微信小程序构建后，小程序资源在框架工程的 `dist/build/mp-weixin` 目录下。
+
+打开微信小程序开发者工具
+
+![alt text](assets/001/image.png)
+
+点击 `导入` 按钮，选择 `dist/build/mp-weixin` 目录。
+
+![alt text](assets/001/image1.png)
+
+填写项目名称和小程序 APPID，不使用云开发，点击确定。
+
+![alt text](assets/001/image2.png)
+
+在打开的微信小程序工具中，测试验证功能正常后，点击上传，发布到微信小程序平台。
+
+![alt text](assets/001/image3.png)
+
+## 支付宝小程序发布
+
+支付宝小程序构建后，小程序资源在框架工程的 `dist/build/mp-alipay` 目录下。
+
+打开支付宝小程序开发者工具
+
+![alt text](assets/001/image4.png)
+
+点击 `打开项目` 按钮，选择 `dist/build/mp-alipay` 目录，点击打开。
+
+![alt text](assets/001/image5.png)
+
+在打开的支付宝小程序开发工具中，选择管理的应用。
+
+![alt text](assets/001/image6.png)
+
+测试验证功能正常后，点击上传，发布到支付宝小程序平台。
+
+![alt text](assets/001/image7.png)
+
+## 新点小程序发布
+
+参考 新点小程序开发指南：
+
+[新点小程序开发指南](https://app.epoint.com.cn/m8fedoc/?file=010-%E6%96%B0%E7%82%B9%E5%B0%8F%E7%A8%8B%E5%BA%8F/003-%E5%BC%80%E5%8F%91%E5%B0%8F%E7%A8%8B%E5%BA%8F)

package/docs/m8mpdoc-develop/002-/350/247/204/350/214/203/344/270/216/346/250/241/345/274/217/000-token/347/232/204/344/275/277/347/224/250.md

@@ -0,0 +1,5 @@
+# token的使用
+
+<script type="text/javascript">
+	window.open("//app.epoint.com.cn/m7fedoc/index/index.php#page=token_use");
+</script>

package/docs/m8mpdoc-develop/002-/350/247/204/350/214/203/344/270/216/346/250/241/345/274/217/002-/345/211/215/345/220/216/347/253/257/346/225/260/346/215/256/344/272/244/344/272/222/345/274/200/345/217/221/346/250/241/345/274/217.md

@@ -0,0 +1,5 @@
+# 前后端数据交互开发模式
+
+<script type="text/javascript">
+	window.open("http://192.168.201.159/mfdoc/index/index.php#page=datainteraction_development_rules");
+</script>

package/docs/m8mpdoc-develop/002-/350/247/204/350/214/203/344/270/216/346/250/241/345/274/217/003-style-guide.md

@@ -0,0 +1,23 @@
+# M8 移动前端框架风格指南
+
+这里是 M8 移动前端框架特有代码结合 Vue 的风格指南，用于 H5 开发在不同平台上保持代码的一致性和质量。这将帮助团队了解如何更好地编写代码，并确保开发的应用在多个平台上的一致性和可维护性。
+
+## 规则归类
+
+### [优先级 A：必要的](./index.html?file=002-规范与模式/003.1-style-guide-a)
+
+这些规则会帮你规避错误，所以学习并接受它们带来的全部代价吧。这里面可能存在例外，但应该非常少，且只有你同时精通 JavaScript 和 Vue 才可以这样做。
+
+### [优先级 B：强烈推荐](./index.html?file=002-规范与模式/003.2-style-guide-b)
+
+这些规则能够在绝大多数工程中改善可读性和开发体验。即使你违反了，代码还是能照常运行，但例外应该尽可能少且有合理的理由。
+
+### [优先级 C：推荐](./index.html?file=002-规范与模式/003.3-style-guide-c)
+
+当存在多个同样好的选项，选任意一个都可以确保一致性。在这些规则里，我们描述了每个选项并建议一个默认的选择。也就是说只要保持一致且理由充分，你可以随意在你的代码库中做出不同的选择。
+
+### [优先级 D：谨慎使用](./index.html?file=002-规范与模式/003.4-style-guide-d)
+
+有些 Vue 特性的存在是为了照顾极端情况或帮助老代码的平稳迁移。当被过度使用时，这些特性会让你的代码难于维护甚至变成 bug 的来源。这些规则是为了给有潜在风险的特性敲个警钟，并说明它们什么时候不应该使用以及为什么。
+
+---