m8-framework-mcp 1.0.0

package/docs/m8mpdoc-develop/006-Util/345/267/245/345/205/267/351/233/206/013-5.otherapi.md

@@ -0,0 +1,137 @@
+# 扩展-其他API
+
+## 使用场景
+
+一些扩展的API。
+
+### Util.openSetting(OBJECT)
+
+调起客户端小程序设置界面，返回用户设置的操作结果。
+
+**平台差异**
+
+|  H5   | 新点小程序 | 微信小程序 | 支付宝小程序 |
+| :---: | :--------: | :--------: | :----------: |
+|   X   |     X      |     √      |      √       |
+
+|属性|类型|必填|说明|
+|---|---|---|---|---|
+|success|function|否|接口调用成功的回调函数|
+|fail|function|否|接口调用失败的回调函数|
+|complete|function|否|接口调用结束的回调函数（调用成功、失败都会执行）|
+
+**success 返回参数**
+
+|属性|类型|说明|
+|---|---|---|
+|authSetting|Object|用户授权结果，其中 key 为 [scope](#scope-列表) 值，value 为 Boolean 值，表示用户是否允许授权|
+
+**代码示例**
+
+```javascript
+Util.openSetting({
+  success(res) {
+    console.log(res.authSetting)
+  }
+});
+```
+
+### Util.getSetting(OBJECT)
+获取用户的当前设置。
+
+**平台差异**
+
+|  H5   | 新点小程序 | 微信小程序 | 支付宝小程序 |
+| :---: | :--------: | :--------: | :----------: |
+|   X   |     X      |     √      |      √       |
+
+|属性|类型|默认值|必填|说明|
+|---|---|---|---|---|
+|withSubscriptions|Boolean|false |否|是否同时获取用户订阅消息的订阅状态，默认不获取。注意：withSubscriptions 只返回用户勾选过订阅面板中的“总是保持以上选择，不再询问”的订阅消息。 **（微信小程序 2.10.1 支持）**|
+|success|function||否|接口调用成功的回调函数|
+|fail|function||否|接口调用失败的回调函数|
+|complete|function||否|接口调用结束的回调函数（调用成功、失败都会执行）|
+
+
+**success 返回参数**
+
+|属性|类型|说明|
+|---|---|---|
+|authSetting|Object|用户授权结果，其中 key 为 [scope](#scope-列表) 值，value 为 Boolean 值，表示用户是否允许授权|
+|subscriptionsSetting|SubscriptionsSetting|用户订阅消息设置，接口参数`withSubscriptions`值为`true`时才会返回。**（微信小程序 2.10.1 支持）**|
+
+#### 示例代码
+```js
+Util.getSetting({
+   success(res) {
+      console.log(res.authSetting)
+   }
+})
+```
+
+##### scope-列表
+
+
+| scope                        | 描述         | 平台差异说明                        |
+| ---------------------------- | ------------ | ----------------------------------- |
+| scope.userInfo               | 用户信息     |                                     |
+| scope.userLocation           | 地理位置     |                                     |
+| scope.userLocationBackground | 后台定位     | 微信小程序                          |
+| scope.address                | 通信地址     |                                     |
+| scope.record                 | 录音功能     |                                     |
+| scope.writePhotosAlbum       | 保存到相册   |  |
+| scope.camera                 | 摄像头       |                                     |
+| scope.invoice                | 获取发票     | 微信小程序                          |
+| scope.invoiceTitle           | 发票抬头     | 微信小程序                          |
+| scope.werun                  | 微信运动步数 | 微信小程序                          |
+
+注意：scope.userLocation 权限需要在 manifest.json 配置 permission
+
+### Util.getAccountInfoSync()
+
+获取当前帐号信息，可以返回小程序的Appid。
+
+**平台差异**
+
+|  H5   | 新点小程序 | 微信小程序 | 支付宝小程序 |
+| :---: | :--------: | :--------: | :----------: |
+|   X   |     X      |     √      |      X      |
+
+**返回值**
+
+**Object**
+
+帐号信息
+
+| 属性 | 类型 | 说明 |
+| --- | --- | --- |
+| miniProgram | Object| 小程序帐号信息 |
+| plugin | Object | 插件帐号信息（仅在插件中调用时包含这一项） |
+| appName | string| 智能小程序名称 (仅百度小程序支持) |
+| lastAppURL | string| 智能小程序最近一次打开的调起协议 (仅百度小程序支持) |
+| scheme | string| 调起协议的协议头 (仅百度小程序支持) |
+
+
+**miniProgram 的结构**
+
+| 属性 | 类型 | 说明 |
+| --- | --- | --- |
+| appId | string | 小程序 appId |
+
+
+**plugin 的结构**
+
+| 属性 | 类型 | 说明 |
+| --- | --- | --- |
+| appId | string | 插件 appId |
+| version | string | 插件版本号 |
+
+
+**示例代码**
+
+```js
+const accountInfo = Util.getAccountInfoSync();
+console.log(accountInfo.miniProgram.appId); // 小程序 appId
+console.log(accountInfo.plugin.appId); // 插件 appId
+console.log(accountInfo.plugin.version); // 插件版本号， 'a.b.c' 这样的形式
+```

package/docs/m8mpdoc-develop/006-Util/345/267/245/345/205/267/351/233/206/014-util-mpVerifyManager.md

@@ -0,0 +1,363 @@
+# 三方小程序登录管理器
+
+## 说明：
+
+三方小程序登录管理器，基于框架SSO服务，实现在三方小程序中授权获取手机号码、验证、注册、绑定、登出、注销等功能。
+
+## 支持版本：
+
+#### 移动前端框架：
+
+`ejs.m8.mobileframe@8.3.9`
+
+`@epoint-mrc/utils@1.0.8`
+
+#### 服务端：
+
+内部版：`F9框架版本F9.5.3`
+
+公众版（个人/法人）：`F9框架版本F9.5.3` ，支持迁移到`身份宝v1.1.0-sp1`
+
+## 使用场景：
+
+支持在微信小程序、支付宝小程序（计划）内使用。
+
+支持在公司框架SSO服务公众版（个人/法人）、内部版中使用。
+
+**平台差异**
+
+|  H5   | 新点小程序 | 微信小程序 | 支付宝小程序 |
+| :---: | :--------: | :--------: | :----------: |
+|   X   |     X      |     √      |   √（计划） |
+
+### 注意
+
+由于使用到了微信获取用户手机号码code，微信限制小程序注册主体需要为企业注册。
+
+开发调试时，开发者工具需要使用该小程序微信管理后台申请的开发人员账号登录，才能在开发者工具内进行提调试。
+
+## API：
+
+### Util.mpVerifyManager.init(object)
+
+初始化三方小程序登录管理器。初始化只需要初始化一次，建议放在main.js里。
+
+__参数说明__
+
+| 参数 |必填| 参数类型 | 可选值 | 说明 |
+| :------------- |:-------------:|:-------------:|:-------------|:-------------|
+| ssoUrl | 是 | String |  | sso服务地址。例如：`https://domain:port/epoint-shell-member-center-demo/` |
+| loginType | 是 | String | `mp`、`ep` | 登录类型：公众版（mp）；内部版（ep） |
+| ep3rdAppid | 是 | String |  | 三方系统应用id，通过框架三方集成平台获取 | <!-- TODO补充后端文档 -->
+| ep3rdPlatid | 是 | String |  | 三方集成平台id，通过框架三方集成平台获取 |<!-- TODO补充后端文档 -->
+| authorizeRouterPath | 否 | String |  | 授权登录页面。用户openId如果sso中未绑定，会跳转到授权登录页面，授权获取手机号。支持其他个性化路由地址。默认为`/modules/innerlogin/index` |
+| registerRouterPath | 否 | String |  | 注册页路由地址。授权获取的手机号码如果未在系统中存在，会跳转到注册页面。支持其他个性化路由地址。默认为`/modules/innerlogin/page/register/register` |
+| noMobileBindRouterPath | 否 | String |  | 提示未注册手机号页面。默认为`/modules/innerlogin/page/bind/mobilebind` |
+| legalPersonRouterPath | 否 | String |  | 法人登录多身份选择路由地址。默认为`/modules/innerlogin/page/register/login_choice_identity` |
+| registerLegalRouterPath | 否 | String |  | 法人注册路由地址。默认为`/modules/innerlogin/page/register/register_legal` |
+| useManagerToken | 否 | boolean |  | Util.ajax 是否使用登录管理器获取的 token |
+| appGuid | 否 | String |  | 当使用内部版登录时，为了展示EMP平台上对应的应用程序的Client_Id的隐私授权页面，需要在隐私授权协议连接中拼接appGuid |
+| plugins | 否 | Array |  | 插件，可以进行个性化业务拦截处理 |
+| userType | 否 | String |`P`、`L`| 用户登录类型。公众版登录时，需要传参`P`（个人）/ `L`（法人）；内部版登录时可不传。默认为`P` |
+
+
+**示例**
+```js
+// 初始化平台小程序用户身份管理器。初始化只需要初始化一次，建议放在main.js里。
+Util.mpVerifyManager.init({
+    // ssoUrl: sso服务地址
+    ssoUrl: 'https://domain:port/epoint-shell-member-center-demo/',
+    //  登录类型：公众版（mp）；内部版（ep）
+    loginType: 'mp',
+    // 三方系统应用id，通过框架三方集成平台获取
+    ep3rdAppid: 'applet',
+    // 三方集成平台id，通过框架三方集成平台获取
+    ep3rdPlatid: 'weixin'
+});
+```
+
+### Util.mpVerifyManager.login(object)
+
+触发小程序登录流程
+
+__参数说明__
+
+| 参数 |必填| 参数类型 | 可选值 | 说明 |
+| :------------- |:-------------:|:-------------:|:-------------:|:-------------|
+| userType | 否 | String |`P`、`L`| 用户登录类型。公众版登录时，需要传参`P`（个人）/ `L`（法人）；内部版登录时可不传。默认为`P` |
+| useCacheToken | 否 | Boolean | `true`、`false`  | 是否使用缓存的token。默认为`true` |
+
+__返回参数__
+
+| 参数 |参数类型| 说明 |
+| :------------- |:-------------:|:-------------|
+| login_status | String | 登录状态码 |
+| login_text | String | 登录状态描述 |
+| access_token | String | 访问令牌 |
+| refresh_token | String | 刷新令牌 |
+| expires_in | String | 令牌有效期 |
+| jsessionid | String | 会话id |
+
+
+
+**示例**
+```js
+// ...
+await Util.mpVerifyManager.login({
+    // 用户类型：P：个人、L：法人
+    userType: 'P'
+});
+// 登录成功之后的请求会自动携带token
+// Util.ajax(...)
+// ...
+```
+
+### Util.mpVerifyManager.logout()
+
+用户登出，清空用户登录信息
+
+**示例**
+```js
+Util.mpVerifyManager.logout();
+```
+
+
+### Util.mpVerifyManager.getUserAuth()
+
+获取用户登录信息
+
+__返回参数__
+
+| 参数 |参数类型| 说明 |
+| :------------- |:-------------:|:-------------|
+| login_status | String | 登录状态码 |
+| login_text | String | 登录状态描述 |
+| access_token | String | 访问令牌 |
+| refresh_token | String | 刷新令牌 |
+| expires_in | String | 令牌有效期 |
+| jsessionid | String | 会话id |
+
+**示例**
+```js
+const userAuth = await Util.mpVerifyManager.getUserAuth();
+```
+
+## API页面说明
+
+三方小程序登录管理器内置了相关页面，用于授权登录、验证、注册等。如果需要个性化页面，可以在初始化时传入个性化路由地址。
+
+### 目录结构
+
+默认目录结构如下
+
+```
+ejs.m8.mobileframe
+    |- src
+    |   |- modules                                     // 框架集成的业务组件模块
+    |   |   |- innerlogin                              // 三方小程序登录管理器内置模块
+    |   |   |   |- pages                               // 具体页面
+    |   |   |   |   |- bind
+    |   |   |   |   |   |- mobilebind.vue              // 号码未绑定账号页面
+    |   |   |   |   |- demo
+    |   |   |   |   |   |- demo.vue                    // 三方小程序示例页面入口
+    |   |   |   |   |   |- internal.vue                // 三方小程序内部版登录示例页面
+    |   |   |   |   |   |- public.vue                  // 三方小程序公众版登录示例页面
+    |   |   |   |   |- register
+    |   |   |   |   |   |- login_choice_identity.vue   // 公众版法人登录多账号选择页面
+    |   |   |   |   |   |- privacy_footer.vue          // 通用隐私授权协议
+    |   |   |   |   |   |- register_legal.vue          // 公众版法人注册页面
+    |   |   |   |   |   |- register.vue                // 公众版个人注册页面
+    |   |   |   |   |   |- webview.vue                 // 在线隐私协议webview展示页面
+    |   |   |   |- plugin
+    |   |   |   |   |- plugin.js                       // 个性化插件示例
+    |   |   |   |- index.vue                           // 登录入口，手机号码授权页面
+
+```
+
+## plugin插件说明
+
+三方小程序登录管理器内置了个性化插件，用于个性化业务拦截处理。如果需要在登录流程进行拦截处理，可以在初始化时传入个性化插件。
+
+### 钩子
+
+以下生命周期钩子函数，是由 compiler 暴露， 可以通过如下方式访问：
+
+```js
+compiler.hooks.someHook.tap('MyPlugin', () => {
+  /* ... */
+});
+// 或者
+compiler.hooks.someHook.tapAsync('MyPlugin', () => {
+    return new Promise((resolve) => {
+        /* ... */
+        resolve();
+    });
+});
+```
+
+目前提供的均为异步钩子，可以通过 tap 或 tapAsync 来注册。
+
+#### beforeLogin
+
+`AsyncHook`
+
+登录前钩子，在执行Util.mpVerifyManager.init前触发。
+
+- 回调参数：`MpVerifyManager`
+
+```js
+compiler.hooks.beforeLogin.tap('MyPlugin', () => {
+    /* ... */
+});
+```
+
+#### afterLogin
+
+`AsyncHook`
+
+登录后钩子，从SSO服务或者本地缓存中获取用户登录信息后触发。
+
+- 回调参数：`MpVerifyManager`
+
+```js
+compiler.hooks.afterLogin.tap('MyPlugin', () => {
+    /* ... */
+});
+```
+
+#### beforeSaveUserAuth
+
+`AsyncHook`
+
+保存用户登录信息之前触发
+
+- 回调参数：`userAuth`
+
+```js
+compiler.hooks.beforeSaveUserAuth.tap('MyPlugin', () => {
+    /* ... */
+});
+```
+
+#### beforeGetUserAuth
+
+`AsyncHook`
+
+获取用户登录信息之前触发
+
+- 回调参数：`userAuth`
+
+```js
+compiler.hooks.beforeSaveUserAuth.tap('MyPlugin', () => {
+    /* ... */
+});
+```
+
+#### afterClearUserAuth
+
+`AsyncHook`
+
+清除用户登录信息之后触发
+
+- 回调参数：`userAuth`
+
+```js
+compiler.hooks.afterClearUserAuth.tap('MyPlugin', () => {
+    /* ... */
+});
+```
+
+#### beforeLogout
+
+`AsyncHook`
+
+登出之前触发
+
+- 回调参数：`MpVerifyManager`
+
+```js
+compiler.hooks.beforeLogout.tap('MyPlugin', () => {
+    /* ... */
+});
+```
+
+#### afterLogout
+
+`AsyncHook`
+
+登出之后触发
+
+- 回调参数：`MpVerifyManager`
+
+```js
+compiler.hooks.afterLogout.tap('MyPlugin', () => {
+    /* ... */
+});
+```
+
+#### getMpCode
+
+`AsyncHook`
+
+获取三方小程序code之前触发，适用于非微信、支付宝小程序时，获取对应的code。
+
+- 回调参数：`MpVerifyManager`
+
+```js
+compiler.hooks.getMpCode.tapAsync('MyPlugin', (mpVerifyManager) => {
+    return new Promise((resolve) => {
+        // 模拟api调用
+        setTimeout(function() {
+            mpVerifyManager.code = 'xxx';
+            resolve();
+        }, 3000);
+    });
+});
+```
+
+### 注册使用plugin示例
+
+```js
+// 定义插件
+class PluginDemo {
+    constructor() {
+        this.name = 'PluginDemo';
+    }
+    // 插件执行内容定义在apply方法中
+    apply(compiler) {
+        // 插件示例
+        compiler.hooks.beforeLogin.tap('MyPlugin', () => {
+            ejs.ui.showWaiting('请稍等');
+        });
+        // 插件示例带回调
+        compiler.hooks.afterLogin.tapAsync('MyPlugin', () => {
+            return new Promise((resolve) => {
+                ejs.ui.closeWaiting();
+                resolve();
+            });
+        });
+    }
+}
+
+// 初始化平台小程序用户身份管理器。初始化只需要初始化一次，建议放在main.js里。
+Util.mpVerifyManager.init({
+    // ...其他配置
+    // 初始化时传入个性化插件
+    plugins: [new PluginDemo()],
+});
+```
+
+
+### 附：小程序登录流程
+
+#### 公众版
+
+![小程序登录流程-公众版](assets/006/public.png)
+
+#### 内部版
+
+![小程序登录流程-内部版](assets/006/internal.png)
+
+#### 页面相关截图
+
+![小程序登录流程](assets/006/mp-prtsc.png)

package/docs/m8mpdoc-develop/009-UI/347/273/204/344/273/266/000-/347/273/204/344/273/266/345/272/223/344/270/213/350/275/275/344/275/277/347/224/250.md

@@ -0,0 +1,188 @@
+# 组件库下载和使用
+
+`@epoint-mrc/em-components` 是基于 M8 跨端框架开发的，符合新点小程序规范的跨端组件库。
+
+**M8 移动前端跨端框架已默认集成了本组件库，开发者无须再次下载。**
+
+**同时，跨端框架已配置好了`easycom`配置，vue 文件内无需引用、注册跨端 UI 组件，可直接在 template 中使用。**
+
+#### 通过函数调用的组件
+
+组件库中部分组件可以通过函数调用。
+
+为简化引入方式，在跨端框架中，将这些组件函数注册成为全局函数，当使用函数方式调用组件时，会在编译时自动引入对应文件。
+
+以下是跨端框架为组件库注册的全局函数：
+
+```js
+// 框架通过 ProvidePlugin 插件为页面注入对应文件
+new webpack.ProvidePlugin({
+    // 键为全局函数名，值为该函数对应的文件路径
+    Toast: [require.resolve('@epoint-mrc/em-components/src/components/em-toast/index.js'), 'default'],
+    Dialog: [require.resolve('@epoint-mrc/em-components/src/components/em-dialog/index.js'), 'default'],
+    EmMap: [require.resolve('@epoint-mrc/em-components/src/components/em-map/index.js'), 'default'],
+    Notify: [require.resolve('@epoint-mrc/em-components/src/components/em-notify/index.js'), 'default'],
+    ImagePreview: [require.resolve('@epoint-mrc/em-components/src/components/em-image-preview/index.js'), 'default'],
+    SelectPerson: [require.resolve('@epoint-mrc/em-components/src/components/em-select-person/index.js'), 'default'],
+    Locale: [require.resolve('@epoint-mrc/em-components/src/components/locale/index.js'), 'default'],
+    // 方便ejs调用的专属组件
+    EjsApi: [require.resolve('@epoint-mrc/em-components/src/components/ejs-api/index.js'), 'default'],
+}),
+```
+
+## 组件的公共属性
+
+每个组件都有以下两个公共属性，方便开发者简单修改组件样式。
+
+| 参数         |        说明        | 类型   | 默认值 | ::: ifdef M83 weex 端支持 ::: endif  |
+| :----------- | :----------------: | :----- | :----- | :----------------------------------- |
+| custom-class | 自定义组件额外类名 | string | -      | 否                                   |
+| custom-style | 自定义组件额外样式 | string | -      | 是（有可能不会生效，优先级规则不同） |
+
+**注意**
+
+1. 直接在组件上设置`class`来修改样式，在小程序中可能不会生效，所以建议通过以上两个属性修改组件样式。
+
+2. 以上属性旨在为开发者需要简单修改样式的场景下提供便利，例如设置组件间的间距等。
+
+3. 若有更复杂的样式修改，或者需要修改组件内部节点的样式，以上属性无法满足，建议直接通过样式穿透修改内部节点样式。
+
+4. 小程序有一套自己的样式隔离策略，这与`vue`的`scoped`属性不同，若开启了小程序的样式隔离，通过`::v-deep`也无法作用在子组件内部。
+   支付宝小程序的样式隔离是默认关闭的，所以可以在外部对子组件内部节点类名进行修改。而微信小程序一般情况下自定义组件的样式隔离是默认开启的，所以若要修改组件库中的组件的样式，可以有两种方式：
+
+（1）跨端组件库通过微信小程序的外部样式类实现 `custom-class` 功能，简单场景下，可以通过`custom-class` 修改组件最外层的样式。
+
+（2）若要修改组件内部节点样式，请添加样式隔离选项关闭微信小程序默认的样式隔离：
+
+```js
+export default {
+    options: {
+        styleIsolation: 'shared'
+    }
+};
+```
+
+然后就可以直接对子组件的类名选择器进行修改。关于微信小程序的样式隔离请看：[组件样式隔离](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB)。
+
+部分框架组件由于内部设置了`styleIsolation: 'shared'`，导致在微信小程序端无法正常使用 `custom-class`，这种情况下请使用 `custom-style` 或者参考以上第四点使用样式穿透直接修改组件内部样式类。
+微信小程序端无法正常使用 `custom-class`的组件有：`em-field`、`em-search`、`em-date-picker`、`em-steps`。
+
+5. 注意，使用子组件的插槽时，插槽内的自定义节点样式选择器请不要嵌套在子组件内部节点样式类选择器中，这样写的样式在微信小程序中不会生效。
+
+```html
+<em-panel title="标题" desc="描述信息" status="状态">
+    <view class="text">容器</view>
+</em-panel>
+```
+
+```scss
+::v-deep .em-panel {
+    .text {
+        color: red; // 这个不会生效
+    }
+}
+
+.text {
+    color: yellow; // 这个正常生效
+}
+```
+
+::: ifdef M84
+
+## M8.4 调整
+
+M8.4 框架改为使用 Vue3，跨端组件库在 M8.3 基础上要相应做出一些调整：
+
+**1. v-model 双向绑定**
+
+所有组件双向绑定的默认 prop 由`value`改为`modelValue`，默认触发事件由`input`改为`update:modelValue`;
+
+**2. 作用域插槽注意**
+
+测试发现当前版本的 uniapp 框架存在以下 bug：
+
+支付宝小程序端，默认插槽如果是一个作用域插槽，且设置了后备内容，在父组件访问子组件的数据时，该默认插槽不会正常渲染。
+
+例如以下情况，父组件中的子组件将不会显示默认插槽中自定义的内容：
+
+子组件`child-component`：
+
+```html
+<template>
+    <view class="content">
+        <slot :msg="msg">后备内容</slot>
+    </view>
+</template>
+
+<script setup lang="ts">
+    const msg = '你好';
+</script>
+```
+
+父组件：
+
+```html
+<template>
+    <view class="content">
+        <child-component>
+            <template #default="{ msg }">{{ msg }}</template>
+        </child-component>
+    </view>
+</template>
+```
+
+解决方案：可以换一种方式，通过判断是否存在 `$slots.default` 来设置后备内容。
+
+即: 将以上子组件`child-component`改为下面的代码：
+
+```html
+<template>
+    <view class="content">
+        <view v-if="!$slots.default">后备内容</view>
+        <template v-else>
+            <slot :msg="msg"></slot>
+        </template>
+    </view>
+</template>
+
+<script setup lang="ts">
+    const msg = '你好';
+</script>
+```
+
+**3. 组合式 API 注意**
+
+为了适配组合式 API，全局组件新增默认的`ref`值`emXXXRef`。
+
+如果项目使用组合式 API 编写代码，使用如`Toast`这样的全局组件时，在支付宝小程序端，原本的默认`ref`值`emToast`会与引入 setup 中的组件名冲突，所以新增一个`ref`值`emToastRef`来进行兼容。
+
+同时，为了让全局方法可以拿到页面中的组件节点，需要使用 `defineExpose` 将`ref`变量暴露出来。
+
+示例：
+
+```html
+<template>
+    <view class="content">
+        <em-button @click="onClick">点击提示</em-button>
+        <em-toast ref="emToastRef"></em-toast>
+    </view>
+</template>
+
+<script setup lang="ts">
+    import { ref } from 'vue';
+
+    const emToastRef = ref();
+
+    const onClick = () => {
+        Toast('测试');
+    };
+
+    defineExpose({
+        emToastRef
+    });
+</script>
+```
+
+M8.4 框架中，建议全局组件的`ref`值都改为`emXXXRef`，与组件名进行区分。
+
+::: endif