m8-framework-mcp 1.0.0

package/docs/m8mpdoc-develop/014-/345/270/270/350/247/201/351/227/256/351/242/230/webview/344/270/255/345/206/205/345/265/214H5/351/241/265/351/235/242.md

@@ -0,0 +1,186 @@
+# webview中内嵌H5页面
+
+## 加载不同来源的 HTML
+
+1. 若`web-view`中加载的是网络地址，将组件的 src 地址设为可访问的地址即可。
+
+2. 非平台小程序环境下，若需加载本地的 HTML 页面，则必须存放在规定的目录下，即 `src/hybrid/html` 目录。这个hybrid目录不会被编译器编译，所以这里的不能放vue文件。
+
+注意：在本地 HTML 中引入网络资源时，必须补全协议。比如：https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js。
+
+然后修改 `web-view` 的 src 为 `/hybrid/html/xxx.html` 即可。
+
+## H5页面使用 uni、wx、my 等对象
+
+### 引用依赖的文件
+
+##### 使用uni
+
+在 `web-view` 加载的 HTML 中调用 uni 的 API，需要在 HTML 中引用必要的 JS-SDK。
+
+```html
+<!-- uni 的 SDK，必须引用。 -->  
+<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
+```
+
+可使用的API有：`uni.getEnv`、`uni.navigateBack`、`uni.navigateTo`、`uni.postMessage`、`uni.reLaunch`、`uni.redirectTo`、`uni.switchTab`。
+
+若加载的H5页面同样是由跨端框架编译的，需要将以上sdk资源下载至H5页面工程内`static`目录引用：
+
+```js
+import web from '@static/uni.webview.1.5.2.js'
+
+const webview = web.webView;
+
+webview.postMessage({
+    data: {
+        aa:111
+    }
+});
+```
+
+##### 使用wx
+
+在微信小程序中，需要在 HTML 中引入微信的 JS-SDK，使用wx的相关接口进行页面跳转、消息通讯等。
+
+```html
+<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>  
+```
+在h5页面中可以使用的wx接口请参考[微信小程序开发文档](https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html)。
+部分接口使用需要鉴权，相当于开发微信公众号。
+
+**注意：`uni`和`wx`的两个资源文件同时引入时，注意引入的顺序，微信的需要在前。**
+
+若加载的H5页面同样是由跨端框架编译的，需要将以上sdk资源下载至H5页面工程内`static`目录引用（若有报错，需要将`jweixin-1.4.0.js`中的`this`字段改成`window`）：
+
+```js
+import wx from '@static/jweixin-1.4.0.js'
+
+const wxMiniProgram = wx.miniProgram;
+
+wxMiniProgram.postMessage({
+    data: {
+        aa:111
+    }
+});
+```
+
+##### 使用my
+
+在支付宝小程序中，需要在 HTML 中引入支付宝的 JS-SDK，使用my的相关接口进行页面跳转、消息通讯等。
+
+以下JS-SDK只能在支付宝客户端进行访问：
+
+```html
+<script type="text/javascript" src="https://appx/web-view.min.js"></script>  
+```
+
+可以使用的my接口请参考[支付宝小程序开发文档](https://opendocs.alipay.com/mini/component/web-view?pathHash=97f1ab2c)
+
+若加载的H5页面同样是由跨端框架编译的，在`public/index.html`中的`head`标签内插入以上引用，即可在页面中使用my进行页面跳转、消息通讯等接口。
+
+### 调用的时机
+
+在引用`uni`依赖的文件后，h5页面初始化时需要在 HTML 中监听 `UniAppJSBridgeReady` 事件触发后，才能安全调用 uni 的 API。
+
+```js
+document.addEventListener('UniAppJSBridgeReady', function() {  
+    uni.getEnv(function(res) {  
+        console.log('当前环境：' + JSON.stringify(res));  
+    });  
+});
+```
+
+### 页面跳转
+
+支持调用所有的 uni 路由方法，可以实现从 HTML 重新跳转回应用内的页面。
+
+`wx`、`my`使用类似。
+
+```js
+document.querySelector('.btn-list').addEventListener('click', function(evt) {  
+    uni.navigateTo({  
+        url: '/pages/index/index'  
+    });
+});
+```
+
+### 发送消息
+
+**注意：由于`web-view`组件在H5环境会被渲染为`iframe`，父子页面可以通过 `window.postMessage`传递消息，通过监听`message`事件获取传递的消息。**
+
+**以下方法主要说明在平台小程序中如何传递消息**
+
+##### 子页面向父页面传消息
+
+1. 可以通过 `uni.postMessage` 在 HTML 中向应用发送消息。参数格式须是 `data: {}`。也就是说，传递的消息信息必须在 `data` 这个对象中。
+
+```js
+document.addEventListener('UniAppJSBridgeReady', function() {  
+    uni.postMessage({  
+        data: {  
+            action: 'postMessage'  
+        }  
+    });  
+});
+```
+
+2. 应用监听 `web-view` 组件的 `message` 事件，然后在事件回调的 `event.detail.data` 中接收传递过来的消息。注意只在特定时机（后退、组件销毁、分享）才会触发`message`事件，支付宝小程序没有这个限制：
+
+```html
+<template>  
+    <view>  
+        <web-view src="http://192.168.1.1:3000/test.html" @message="handleMessage"></web-view>  
+    </view>  
+</template>  
+```
+```js
+export default {  
+    methods: {  
+        handleMessage(evt) {  
+            console.log('接收到的消息：' + JSON.stringify(evt.detail.data));  
+        }  
+    }  
+}  
+```
+
+##### 父页面向子页面传消息
+
+支付宝小程序中，小程序可通过创建 `WebViewContext` 向 webview 组件传递消息，H5页面通过 `my.onMessage` 接收小程序传过来的消息，具体请查看官方文档：https://opendocs.alipay.com/mini/api/webview-context;
+
+微信小程序中，父页面向子页面传消息只能通过在 url 上拼接参数进行传递。
+
+1. 父页面在url上拼接`query`参数：
+
+```html
+<template>
+    <web-view :src="webviewSrc"></web-view>
+</template>
+```
+```js
+export default {  
+    computed: {
+        webviewSrc() {
+            return `http://192.168.118.8:8081/src/hybrid/html/test.html?msg=${this.msg}`;
+        }
+    }
+}
+```
+
+2. 子页面截取 `query` 参数获取父页面传递的消息：
+
+```js
+export default {  
+    onLoad(option) {
+        // 获取父页面传递的msg
+        this.msg = option.msg;
+    }
+}
+```
+
+该方法只能在初始化时向子页面传递消息，若需动态传参，修改拼接的`query`参数时，H5页面会刷新。
+
+若不想在传参时刷新H5页面，可以将参数改为 hash 拼接，子页面监听 `popstate` 事件监听 hash 变化，hash 变化时截取 hash 值从而获取父页面传递的信息，然后调用 `history.back()` 后退一页以保持原本的历史记录。
+
+可参考相关知识库：https://fdoc.epoint.com.cn/onlinedoc/kfzknowledge/kfzknowledge/handlequestionworkflow?ProcessVersionInstanceGuid=dd0e7832-f38c-4c66-ae1b-4e9ca106a364&WorkItemGuid=b294ad6a-cb8a-403a-8389-b1ad62be49d5&MessageItemGuid=a796009d-3f7b-44e9-9909-97f1e538d6b3&messageGuid=0c511674-b100-412d-a99c-3bf361dab663
+

package/docs/m8mpdoc-develop/014-/345/270/270/350/247/201/351/227/256/351/242/230//344/270/211/346/226/271APP/346/240/207/351/242/230/344/270/215/350/207/252/345/212/250/344/277/256/346/224/271.md

@@ -0,0 +1,30 @@
+# 三方APP标题跳转不自动修改
+
+## 问题描述
+
+项目反馈，苏服办APP的导航栏标题在页面跳转时不会自动修改。
+
+## 问题分析
+
+苏服办APP的导航栏标题在页面跳转时不会自动修改，是因为苏服办APP的导航栏标题是在页面加载时设置的，加载页面后修改的`document.title`不会触发，所以导航栏标题不会自动修改。
+
+M8.2下时，修改`document.title`是在vuerouter的页面跳转前进行修改的，可以正常被苏服办APP响应触发修改标题。
+
+M8.3下时，uniapp在页面加载完成onShow生命周期后触发的`document.title`，是在页面url变化之后修改的，导致苏服办APP不响应标题修改。
+
+目前尝试在M8.3下，无法在页面跳转之前获取下一个页面的标题。
+
+## 解决方案
+
+ - 针对此类APP不实时响应`document.title`的，暂时通过在main.js中，统一混入onReady页面生命周期，调用对应三方APP的JSSDK修改导航栏：
+
+    ```js
+    Vue.mixin({
+        onReady() {
+            const title = document.title;
+            // api.xxx();
+        }
+    });
+    ```
+
+ - 或固定模块下所有页面使用同一个标题。

package/docs/m8mpdoc-develop/014-/345/270/270/350/247/201/351/227/256/351/242/230//344/270/252/346/200/247/345/214/226/346/241/206/346/236/266/347/273/204/344/273/266.md

@@ -0,0 +1,87 @@
+# 个性化框架组件
+
+个性化组件可以基于框架的跨端组件二次封装，这样方便后续更新框架组件，以及对框架组件进行异步分包。
+
+以下以个性化 tag 组件为例:
+
+1、在`src\components\custom_components`目录下新建个性化组件目录 `gxh-tag`，在该组件目录下新建`gxh-tag.vue`文件。
+
+2、个性化时，对于不需要改动的属性，可以直接传给框架的`em-tag`组件，针对需要个性化的部分进行个性化修改。注意，微信、支付宝小程序限制禁止使用`v-bind="$props"`和`v-on="$listeners"`，需要将原有组件所有属性和事件都需要保留传递。示例代码：
+
+```html
+<em-tag
+    :size="size"
+    :mark="mark"
+    :color="color"
+    :plain="plain"
+    :round="round"
+    :textColor="textColor"
+    :closeable="closeable"
+    :type="type"
+    :basicType="basicType"
+    :photo="photo"
+    :status="status"
+    @click="onClick"
+    @close="onClose"
+>
+    <!-- 这里个性化添加一个icon -->
+    <em-icon :name="name"></em-icon>
+    <slot></slot>
+</em-tag>
+```
+
+```js
+import emTag from '@epoint-mrc/em-components/src/components/em-tag/em-tag.vue';
+export default {
+    // 通过extends继承框架组件
+    extends: emTag,
+    props: {
+        name: {
+            type: String,
+            default: 'plus'
+        }
+    }
+};
+```
+
+3、个性化完成后，在页面中引入使用：
+
+```html
+<div class="content">
+    <gxh-tag type="success">标签</gxh-tag>
+</div>
+```
+
+```js
+import gxhTag from '@components_custom/gxh-tag/gxh-tag.vue';
+export default {
+    components: {
+        gxhTag
+    }
+};
+```
+或者也可以通过easycom自动引入：
+
+- 在`src/pages.json`文件的`easycom`字段中添加对个性化组件的引入正则：
+
+```json
+{
+    "easycom": {
+        "autoscan": true,
+        "custom": {
+            "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
+            "^em-(chart)": "@epoint-mrc/em-components/src/sub_components/em-$1/em-$1.vue",
+            "^em-(.*)": "@epoint-mrc/em-components/src/components/em-$1/em-$1.vue",
+            "^gxh-(.*)": "@/components/custom_components/gxh-$1/gxh-$1.vue" // 个性化组件引入的匹配规则
+        }
+    }
+}
+```
+
+- 然后就可以直接在页面中使用以`gxh-`为前缀的个性化组件，不需要手动引入：
+
+```html
+<div class="content">
+    <gxh-tag type="success">标签</gxh-tag>
+</div>
+```

package/docs/m8mpdoc-develop/014-/345/270/270/350/247/201/351/227/256/351/242/230//344/274/240/345/200/274/345/212/250/346/200/201/346/240/267/345/274/217.md

@@ -0,0 +1,29 @@
+# 传值动态样式
+
+场景：
+
+例：根据传过来的色值，动态修改组件内背景色
+
+## CSS变量
+
+![](assets/014/cssvar.png)
+
+在组件跟标签上使用 :style 定义 CSS变量，可以将js中定义的变量赋值到 CSS变量 中
+
+子组件：
+
+![](assets/014/cssvar1.png)
+
+父组件：
+
+![](assets/014/cssvar2.png)
+
+效果：
+
+![](assets/014/cssvar3.png)
+
+<style>
+img {
+    /* width: 500px */
+}
+</style>

package/docs/m8mpdoc-develop/014-/345/270/270/350/247/201/351/227/256/351/242/230//344/277/256/346/224/271/347/273/204/344/273/266/345/206/205/346/240/267/345/274/217.md

@@ -0,0 +1,29 @@
+# 修改组件内样式
+
+有时我们需要修改vant下的组件样式，在`scoped`标签的`<style>` 标签内发现写了对应的class也无法修改，怎么办？
+
+## 为什么？
+
+当`<style>`标签有 `scoped` 属性时，它的 CSS 只作用于当前组件中的元素。
+
+![](assets/014/scoped1.png)
+![](assets/014/scoped.png)
+
+### ::v-deep
+
+我们需要在css前加上 ~~`/deep/`~~ 即可
+
+`v8.2.12`之后请使用`::v-deep`代替`/deep/`，说明参考： [Node Sass to Dart Sass](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/sass.html#%E4%B8%8D%E5%85%BC%E5%AE%B9)
+
+
+![](assets/014/scoped2.png)
+
+![](assets/014/scoped3.png)
+
+
+
+<style>
+img {
+    /* width: 500px */
+}
+</style>

package/docs/m8mpdoc-develop/014-/345/270/270/350/247/201/351/227/256/351/242/230//345/244/204/347/220/206/346/226/260/347/202/271/345/260/217/347/250/213/345/272/217/350/267/250/345/237/237/351/227/256/351/242/230.md

@@ -0,0 +1,22 @@
+## **处理新点小程序跨域问题**
+
+新点小程序包是一个包含html、js、css等资源的zip压缩包，小程序加载时，小程序容器会先把zip包下载到手机客户端本地，然后解压缩加载，此时 origin为 file:// 导致跨域（浏览器同源安全策略）。
+
+使用原生请求不会携带origin请求头，可将前端请求改为小程序容器原生请求。
+
+1、未使用新点移动前端框架开发新点小程序时，可使用下面俩个小程序API代理为原生请求。
+
+* 原生代理请求接口:ejs.stream.fetch
+*  原生容器代理上传文件(标准的表单上传):ejs.stream.uploadMultipartFile
+
+2、使用M8.2新点移动前端框架，可以修改config.js配置项isUseEjsFetchAjax，开启后会自动使用ejs请求代理。但是进行上传附件操作时，需要开发人员对附件的上传单独使用ejs.stream.uploadMultipartFile处理。
+
+![img](assets/014/mobile_origin.png) 
+
+3、使用M8.3新点移动前端跨端框架，开启config.js配置项isUseEjsFetchAjax，自动使用ejs请求代理。进行上传附件操作使用uploader 组件，将组件属性useEjsUpload设置为true则开启使用ejs方法进行选择文件。使用Util.upload方法进行上传文件。
+
+![img](assets/014/mobile_origin1.png) 
+
+Util.upload上传附件时需使用filePath参数同时兼容H5和ejs平台的附件上传。
+
+![img](assets/014/mobile_origin2.png) 

package/docs/m8mpdoc-develop/014-/345/270/270/350/247/201/351/227/256/351/242/230//346/243/200/346/265/213/345/217/230/345/214/226/347/232/204/346/263/250/346/204/217/344/272/213/351/241/271.md

@@ -0,0 +1,183 @@
+# 检测变化的注意事项
+
+ 由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。
+
+ 尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。
+
+## 对于对象
+
+```js
+Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。例如：
+
+var vm = new Vue({
+  data:{
+    a:1
+  }
+})
+
+// `vm.a` 是响应式的
+
+vm.b = 2
+// `vm.b` 是非响应式的
+```
+
+对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property。
+
+但是，可以使用 `Vue.set(object, propertyName, value)` 方法向嵌套对象添加响应式 property。例如，对于：
+
+```js
+Vue.set(vm.someObject, 'b', 2)
+```
+
+您还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名：
+
+```js
+this.$set(this.someObject,'b',2)
+```
+
+有时你可能需要为已有对象赋值多个新 property，比如使用 Object.assign() 或 _.extend()。
+
+但是，这样添加到对象上的新 property 不会触发更新。在这种情况下，你应该用原对象与要混合进去的对象的 property 一起创建一个新的对象。
+
+```js
+// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
+this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
+
+```
+## 对于数组
+
+Vue 不能检测以下数组的变动：
+
+ - 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
+
+ - 当你修改数组的长度时，例如：vm.items.length = newLength
+
+
+举个例子：
+```js
+
+var vm = new Vue({
+  data: {
+    items: ['a', 'b', 'c']
+  }
+})
+vm.items[1] = 'x' // 不是响应性的
+vm.items.length = 2 // 不是响应性的
+```
+
+为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将在响应式系统内触发状态更新：
+
+```js
+// Vue.set
+Vue.set(vm.items, indexOfItem, newValue)
+// Array.prototype.splice
+vm.items.splice(indexOfItem, 1, newValue)
+```
+
+你也可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名：
+
+```js
+vm.$set(vm.items, indexOfItem, newValue)
+
+```
+为了解决第二类问题，你可以使用 splice：
+
+```js
+vm.items.splice(newLength)
+```
+
+## 监听对象下属性
+
+vue提供了watch方法，用于监听实例内data数据的变化。通常写法是：
+
+```js
+new Vue({
+ data: {
+  count: 10，
+  blog:{
+    title:'my-blog',
+    categories:[]
+  }
+ },
+ watch: {
+  count: function (newVal, oldVal) {
+   console.log(`new: %s, old: %s`, newVal, oldVal);
+  }
+ }
+})
+```
+
+上述情况里data中的count属性可以直接监听，但是如果需要监听的数据是对象内的某一属性值的变化，直接watch对象blog是检测不到变化的，这是因为blog这个对象的指向并没有发生改变。
+
+有几个解决方法
+
+### 深度监测
+
+```js
+new Vue({
+ data: {
+  count: 10，
+  blog:{
+    title:'my-blog',
+    categories:[]
+  }
+ },
+ watch: {
+  blog:{
+    handler(newVal,oldVal){
+      console.log(`new: ${newVal}, old: ${oldVal}`);
+    },
+    deep:true
+  }
+ }
+})
+```
+
+里面的deep设为了true，这样的话，如果修改了这个blog中的任何一个属性，都会执行handler这个方法。
+
+不过这样会造成更多的性能开销，尤其是对象里面属性过多，结构嵌套过深的时候。
+
+而且有时候我们就只想关心这个对象中的某个特定属性，这个时候可以这样
+
+### 用字符串来表示对象的属性调用
+
+```js
+new Vue({
+ data: {
+  count: 10，
+  blog:{
+    title:'my-blog',
+    categories:[]
+  }
+ },
+ watch: {
+  'blog.categories'(newVal, oldVal) {
+    console.log(`new:${newVal}, old:${oldVal}`);
+  },
+ }
+})
+```
+
+### 使用computed计算属性
+
+```js
+new Vue({
+ data: {
+  count: 10，
+  blog:{
+    title:'my-blog',
+    categories:[]
+  }
+ },
+ computed: {
+  categories() {
+   return this.blog.categories;
+  }
+ },
+ watch: {
+  categories(newVal, oldVal) {
+   console.log(`new:${newVal}, old:${oldVal}`);
+  },
+ },
+})
+```

package/docs/m8mpdoc-develop/014-/345/270/270/350/247/201/351/227/256/351/242/230//347/234/237/346/234/272/350/260/203/350/257/225.md

@@ -0,0 +1,26 @@
+# 安卓真机调试
+
+基于微软的Edge浏览器，我们能更方便的对APP里的H5应用进行真机调试。
+
+在Edge浏览器内地址栏输入 `edge://inspect` 将会打开 `DevTools` 页面。
+
+
+
+
+![](assets/014/dev.png)
+
+注意：需要安卓容器开启webview的debug模式。
+
+![](assets/014/dev2.png)
+
+我们通过usb链接手机后，访问H5应用页面，在DevTools页面可以看到webview和对应的页面地址
+
+![](assets/014/dev3.png)
+
+
+
+<!-- <style>
+img {
+    width: 900px
+}
+</style> -->