npm - m8-framework-mcp - Versions diffs - 1.0.0 → 1.0.3 - Mend

m8-framework-mcp 1.0.0 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (389) hide show

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 DELETED Viewed

@@ -1,186 +0,0 @@
-# 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 DELETED Viewed

@@ -1,30 +0,0 @@
-# 三方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 DELETED Viewed

@@ -1,87 +0,0 @@
-# 个性化框架组件
-个性化组件可以基于框架的跨端组件二次封装，这样方便后续更新框架组件，以及对框架组件进行异步分包。
-以下以个性化 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 DELETED Viewed

@@ -1,29 +0,0 @@
-# 传值动态样式
-场景：
-例：根据传过来的色值，动态修改组件内背景色
-## 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 DELETED Viewed

@@ -1,29 +0,0 @@
-# 修改组件内样式
-有时我们需要修改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 DELETED Viewed

@@ -1,22 +0,0 @@
-## **处理新点小程序跨域问题**
-新点小程序包是一个包含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 DELETED Viewed

@@ -1,183 +0,0 @@
-# 检测变化的注意事项
- 由于 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 DELETED Viewed

@@ -1,26 +0,0 @@
-# 安卓真机调试
-基于微软的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> -->