m8-framework-mcp 1.0.0

package/docs/m8mpdoc-develop/014-/345/270/270/350/247/201/351/227/256/351/242/230//350/267/250/347/253/257/345/274/200/345/217/221/345/270/270/350/247/201/351/227/256/351/242/230.md

@@ -0,0 +1,126 @@
+# 跨端开发 FAQ
+
+## 1、编译到支付宝无法正常获取$slots
+
+这是 uniapp 框架的 bug，在 JS 中获取`$slots`为`undefined`，在模板中默认插槽 `$slots.default` 无法正常判断，但是具名插槽可以使用 `$slots.xxx`进行判断。
+暂时只能通过其他方法绕过这个问题。
+
+比如，若`label`插槽为空，就隐藏`label`，此时无法通过`$slots`判断该插槽是否为空，可以通过`:empty`匹配空节点，来修改空节点的样式：
+
+```css
+.label {
+    color: $cell-label-color;
+
+    &:empty {
+        display: none;
+    }
+}
+```
+
+## 2、具名插槽带有连字符，且同时带有后备内容，编译到微信小程序时，无法正常展示
+
+写法例如：
+
+```js
+<slot name="right-icon">
+    <em-icon name="arrow"></em-icon>
+</slot>
+```
+
+uniapp 编译到小程序时，会编译成以下代码：
+
+```js
+<block wx:if="{{$slots.right-icon}}">
+    <slot name="right-icon"></slot>
+</block>
+<block wx:else>
+    <em-icon name="arrow"></em-icon>
+</block>
+```
+
+所以遇到这种问题，请换一种插槽命名方式，不要使用连字符。
+
+## 3、button 组件无法触发 form 的提交事件，小程序端无法正常获取表单项的值
+
+（1）使用跨端组件库二次封装的 `em-form` 组件时，提交按钮必须使用跨端组件库封装的 `em-button` 组件。同样的，在使用 框架 内置的 `form` 组件时，也只能使用内置的 `button` 组件。否则组件不配套时，点击提交按钮会无法正常触发表单的提交功能。
+
+（2）小程序端在 `form` 内的自定义组件内有 `input` 表单控件时，或者用普通标签实现表单控件，例如评分，无法在 `form` 的 `submit` 事件内获取组件内表单控件值，此时可以使用 `behaviors`。具体请看官方文档：[form | uni-app 官网](https://uniapp.dcloud.io/component/form.html)
+
+在自定义实现的表单控件中添加 `behaviors：uni://form-field`：
+
+```js
+export default {  
+ name: 'compInput',  
+ behaviors: ['uni://form-field'],
+}
+```
+
+## 4、向子组件传递函数时，函数中的 this 指向问题
+
+在 H5 中，父组件向子组件传递函数，若该函数中使用了 `this`，则 `this` 会正常指向父组件。
+
+而编译到小程序时，传递的函数都会变成子组件的方法，`this` 都会指向子组件，所以该函数可能不会按照预期执行。
+
+可以在子组件调用父组件传过来的函数时，将函数的 `this` 通过 `bind`、`call` 或者 `apply` 方法指向父组件:
+
+```js
+this.propFunc.call(this.$root);
+```
+
+可参考 `field` 组件和示例。
+建议通过 `props` 传递的函数中，不要使用 `this`，或者将传递的方法改为事件由子组件来触发。
+
+## 5、微信小程序的 slot 在 v-for 中无法正常使用
+
+小程序不支持在 v-for 中设置 slot，建议将需要循环渲染的内容拆出来单独封装成一个组件，在拆出来的组件上使用 v-for。
+
+## 6、微信小程序没有作用域插槽
+
+微信小程序不支持作用域插槽，但是框架支持结构插槽。
+
+使用解构插槽时，框架编译到小程序会自动编译成[抽象节点](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/generics.html)。 
+
+想要通过`slot`向子节点传参时，请使用解构插槽。
+
+## 7.支付宝不支持文件类型选择上传，只支持图片、视频、音频上传
+
+支付宝小程序不支持`file`类型上传，如果需要上传 pdf 类似文件
+请单独使用支付宝小程序-文件管理系统：https://opendocs.alipay.com/mini/02pmiu
+
+## 8、微信小程序使用 image 的 src 导入图片在模拟器上显示，真机调试图片不显示的解决方法
+
+1、若为本地图片，可能是图片路径中含有中文或者空格，将图片路径中文或者空格删去即可。若仍未解决，可以尝试将 src 的相对路径改为绝对路径，可能和文件层深的问题有关。本地图片资源建议都放在 `static` 目录下，且建议使用绝对路径：`/static/images/xxx.png`
+
+2、在线图片时，尝试将图片前缀的 `http` 改为 `https`, 若未解决 可以尝试查看网站域名的合法性。
+
+## 9、支付宝小程序配置 model event 不生效，只能使用默认的 input 事件来实现 v-model
+
+在支付宝小程序中，若要实现`v-model`功能，请将绑定的`props`字段设置成`value`，子组件内部触发值改变时，只能通过触发`input`事件进行修改。
+
+## 10、popup等弹出层进行滚动时，会触发底部页面滚动
+
+在H5和微信小程序中，若要禁止滚动穿透，只需在蒙版的最外层节点上设置`@touchmove.stop.prevent`，若蒙版内部也需要滚动，此时可以使用`scroll-view`组件进行包裹。
+
+但在支付宝小程序中，设置`@touchmove.stop.prevent`是无法禁止滚动穿透的，所以在支付宝中，可以在蒙版弹出时，给底层的内容设置`overflow: hidden`样式，来规避这个问题。
+
+## 11、支付宝小程序v-for中的点击事件无效，报错
+
+需要注意v-for的:key不能使用(item, index)的index作为key，请使用item中的相关唯一标识字段作为for循环的key标识。
+
+## 12、支付宝小程序父页面onLoad中设置的data，传递给子组件，无法在子子组件mounted中获取
+
+需要注意，onLoad为页面级生命周期，mounted为组件级生命周期。
+
+vue生命周期保证顺序执行created > mounted。无法保证页面级生命周期和组件级生命周期的顺序执行。
+
+支付宝小程序子组件的mounted回调先于页面级的onLoad回调执行，所以在子组件mounted中需要使用$nextTick来获取传递过来的数据。
+
+## 13、支付宝小程序页面加载后子组件的没有执行created、mounted等生命周期
+
+支付宝小程序的组件不能作为页面来使用，请排查组件vue是否被写在了router.js中定义成了页面。删除该组件的路由配置即可。
+
+## 14、支付宝小程序span标签添加click事件无效
+
+uni在编译小程序时会把div标签转换为view，span标签转换为text等。
+
+如果在小程序中出现事件绑定无效，可以尝试将标签改为标准的uni内置组件，例如view。

package/docs/m8mpdoc-develop/014-/345/270/270/350/247/201/351/227/256/351/242/230//350/267/250/347/253/257/346/241/206/346/236/266/345/256/211/345/205/250/345/237/237/351/200/202/351/205/215.md

@@ -0,0 +1,153 @@
+# M8 安全适配区域匹配
+
+## 背景：
+
+因各版本型号的手机均在项目上出现不同情况下安全区域被遮挡等问题，为统一处理，现提供以下代码进行处理。
+
+## vue 示例相关代码
+
+<font color="red">iphone 机型可以通过 ios 提供的新特性进行适配，而安卓生态百花齐放，也没有安全适配区的一个概念，机型涉及刘海屏、水滴屏、全面屏等，所以对于它的适配，在ejs容器中采用 JSBridge 方案，在小程序中使用uniapp提供的--status-bar-height变量</font>
+
+```html
+<!-- html部分 -->
+<template>
+    <div
+        :style="{ '--statusBarHeight': statusBarHeight + 'px' }"
+        :class="['container', isIos ? 'ioswrap' : 'androidwrap']"
+    >
+        <div class="header" id="header">顶部的安全适配区</div>
+        <div class="main2" id="main">
+            <div v-for="item in 50" :key="item">{{ item }}</div>
+        </div>
+        <div class="footer" id="footer">底部的安全适配区</div>
+    </div>
+</template>
+
+<!-- js部分 -->
+<script>
+    export default {
+        name: 'List',
+        // 定义用到的数据，在template中使用{{ }}包裹，自动实现绑定
+        data() {
+            return {
+                isIos: ejs.os.ios,
+                statusBarHeight: '0px'
+            };
+        },
+        // 实例创建完成后调用
+        created() {
+            let that = this;
+
+            // #ifdef H5
+            if (ejs.os.ejs) {
+                // ejs环境获取真实状态栏高度
+                ejs.device.getDeviceInfo({
+                    success: function (result) {
+                        that.statusBarHeight = result.statusBarHeight;
+                    },
+                    error: function (error) {
+                        ejs.ui.alert(JSON.stringify(error));
+                    }
+                });
+            }
+            // #endif
+        },
+        // 实例DOM被挂载后调用
+        mounted() {
+            // #ifdef H5
+            if (ejs.os.ejs) {
+                ejs.navigator.hide({
+                    success: function (result) {},
+                    error: function (error) {}
+                });
+            }
+            // #endif
+        }
+    };
+</script>
+
+<!-- css部分 -->
+<style lang="scss" scoped>
+    $safe-top: 50px;
+    $safe-bottom: 50px;
+
+    /* 适配 iphone 底部安全区 */
+    .safe-area-inset-top {
+        /* iOS 11.2 以下机型 */
+        padding-top: constant(safe-area-inset-top);
+        /* iOS 11.2 以上机型*/
+        padding-top: env(safe-area-inset-top);
+    }
+
+    .safe-area-inset-bottom {
+        padding-bottom: constant(safe-area-inset-bottom);
+        padding-bottom: env(safe-area-inset-bottom);
+    }
+
+    .ioswrap {
+        .header {
+            @extend .safe-area-inset-top;
+            position: fixed;
+            top: 0;
+            left: 0;
+            z-index: 100;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: $safe-top;
+            background-color: #f5f6f7;
+        }
+
+        .footer {
+            @extend .safe-area-inset-bottom;
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            z-index: 100;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: $safe-bottom;
+            background-color: #f5f6f7;
+        }
+    }
+
+    .androidwrap {
+        .header {
+            position: fixed;
+            top: 0;
+            left: 0;
+            z-index: 100;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: $safe-top;
+            background-color: #f5f6f7;
+            // #ifdef H5
+            padding-top: var(--statusBarHeight);
+            // #endif
+            // #ifndef H5
+            padding-top: var(--status-bar-height);
+            // #endif
+        }
+
+        .footer {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            z-index: 100;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: $safe-bottom;
+            background-color: #f5f6f7;
+        }
+    }
+</style>
+```

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

@@ -0,0 +1,42 @@
+# 三方平台安装构建跨端框架
+
+# 背景
+
+由于移动前端跨端框架的核心依赖为公司内部私有化依赖，安装 `npm install` 时需要在公司内网环境。
+
+导致如果需要将跨端框架代码上传到一些需要对代码工程构建的三方平台时，无法安装框架依赖。
+
+# 解决办法
+
+目前思路为在本地工程安装依赖时，指定 npm 缓存目录为当前目录下的`.cache`文件夹，本地执行 `npm install`时将 npm 缓存安装到本地目录下，提交三方平台时将 npm 缓存提交到三方平台。
+
+缺点是提交至三方平台时需要提交 npm 缓存目录，造成提交体积变大。
+
+# 操作过程：
+
+## 配置修改
+
+修改工程目录下 `.npmrc` 文件：
+
+```bash
+# 原有配置不动
+
+# 底部增加一行配置，指定npmcache为当前目录
+cache = ./.cache
+```
+
+## 安装依赖
+
+删除 `node_modules` 目录，删除 `package-lock.json` 文件，重新执行 `npm install` 依赖安装。
+
+## 压缩提交
+
+安装完成后本地工程会出现 `.cache` 文件夹，将该文件夹与代码工程一起打包压缩，提交到三方平台。
+
+---
+
+## 注意
+
+此时工程下的 `.cache` 目录会被代码版本管理索引，一般不需要提交到代码版本管理。此时需要将 `.cache` 目录排除在版本管理之外，可以修改 `.gitignore` 文件，增加 `.cache` 目录，忽略该目录的 git 版本管理。
+
+如果是 svn ，同理需要忽略该文件目录。

package/docs/m8mpdoc-develop/015-/345/267/245/347/250/213/345/214/226/Pinia/347/232/204/344/275/277/347/224/250.md

@@ -0,0 +1,88 @@
+# Pinia 的使用
+
+## 前言
+
+`Pinia` 是 Vue 的专属状态管理库，Pinia 的基本使用方法可以阅读 [Pinia 官方文档](https://pinia.vuejs.org/zh/ 'Pinia官方文档')
+
+## 文件位置
+
+M8.4 移动前端框架内的 `Pinia` 文件为每一个模块文件夹下的`store.ts`，框架内部已处理好自动引用。
+
+```
+ejs.m8.project
+    ├── src
+    │   ├── pages
+    │   │   ├── [module_name]                 // 以模块名命名的文件夹
+    │   │   │       ├── [module_name_A].vue
+    │   │   │       ├── [module_name_B].vue
+    │   │   │       ├── store.ts              // 对应此模块的pinia定义
+```
+
+## store.ts
+
+```js
+import { defineStore } from 'pinia';
+
+// 使用说明：
+// 你可以任意命名 `defineStore()` 的返回值，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。
+// (比如 `useUserStore`，`useCartStore`，`useProductStore`)
+export const useIndexStore = defineStore(
+    // 第一个参数是你的应用中 Store 的唯一 ID。
+    'index',
+    {
+        // 你可以认为 state 是 store 的数据 (data)
+        state: () => ({
+            moduleInfo: '状态信息'
+        }),
+        // getters 是 store 的计算属性 (computed)
+        getters: {
+            moduleInfoData: (state) => state.moduleInfo + '数据'
+        },
+        // 而 actions 则是方法 (methods)
+        actions: {
+            setModuleInfo(data) {
+                this.moduleInfo = data;
+            }
+        }
+    }
+);
+```
+
+## vue 文件内使用
+
+获取 Pinia 中定义的状态：
+
+```js
+import { useIndexStore } from './store';
+
+const indexStore = useIndexStore();
+
+console.log(indexStore.moduleInfo);
+// 状态信息
+```
+
+更改 Pinia 中定义的状态：
+
+```js
+indexStore.setModuleInfo('M8移动前端跨端框架');
+```
+
+## 类似 Vuex 的辅助函数
+
+```js
+import { useIndexStore } from './store';
+import { mapState, mapActions } from 'pinia';
+
+export default {
+  computed: {
+    // 其他计算属性
+    // ...
+    // 允许读取 this.moduleInfo
+    ...mapState(useIndexStore, ['moduleInfo']),
+  },
+  methods: {
+    // 允许读取 this.setModuleInfo()
+    ...mapActions(useIndexStore, ['setModuleInfo']),
+  },
+}
+```

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

@@ -0,0 +1,60 @@
+<!--
+ * @作者: 吴松泽
+ * @创建时间: 2022-04-22 10:20:44
+ * @修改时间: 2022-04-22 16:56:22
+ * @版本: [1.0]
+ * @版权: 国泰新点软件股份有限公司
+ * @描述: 个性化组件统一入口
+-->
+# 个性化组件统一入口
+
+产品项目可以通过统一的个性化组件入口，将个性化组件统一管理。方便产品项目快速对所有页面全局使用的组件维护和管理。
+
+## 定义个性化组件文件路径：
+
+```
+ejs.m8.mobileframe
+    ├── src
+    │   ├── components
+    │   │   ├── custom_components
+    │   │   │   ├── index.js       // 统一个性化组件入口
+```
+
+## 统一个性化入口文件：
+
+在统一入口文件内，通过`import`引入业务需要使用到的组件，默认组件仍然从`@components`引入导出。
+
+如果存在个性化的组件，在`custom_components`下重新定义组件，替换引用默认的组件导出。例如示例代码中的`Field组件`
+
+```js
+// 文件位置：src/components/custom_components/index.js
+import vanButton from '@components/button';
+import vanCell from '@components/cell';
+import vanHeader from '@components/header';
+// import vanField from '@components/field';
+import vanField from '@components_custom/field';
+
+export {
+    vanButton,
+    vanCell,
+    vanHeader,
+    vanField
+};
+```
+
+## 统一个性化组件使用
+
+在业务代码vue文件中使用：
+
+引入地址可以简写`@components_custom`，实际引入地址为`src/components/custom_components/index.js`
+
+```js
+// ...
+import { vanHeader, vanField } from '@components_custom';
+export default {
+    components: {
+        vanHeader,
+        vanField
+    },
+// ...
+```