diff --git a/dev/main-react16/src/global.jsx b/dev/main-react16/src/global.jsx
index e5ba4936..0d432c28 100644
--- a/dev/main-react16/src/global.jsx
+++ b/dev/main-react16/src/global.jsx
@@ -75,7 +75,7 @@ microApp.start({
// 'disable-patch-request': true,
// 'keep-router-state': true,
// 'hidden-router': true,
- // 'router-mode': 'custom',
+ // 'router-mode': 'state',
// esmodule: true,
// ssr: true,
// preFetchApps: prefetchConfig,
@@ -87,29 +87,29 @@ microApp.start({
// },
// iframeSrc: 'http://localhost:3000/',
lifeCycles: {
- created (e) {
- console.log('created 全局监听', 'name:', e.detail.name)
+ created (e, appName) {
+ console.log(`子应用${appName}被创建 -- 全局监听`)
},
- beforemount (e) {
- console.log('beforemount 全局监听', 'name:', e.detail.name)
+ beforemount (e, appName) {
+ console.log(`子应用${appName}即将渲染 -- 全局监听`)
},
- mounted (e) {
- console.log('mounted 全局监听', 'name:', e.detail.name)
+ mounted (e, appName) {
+ console.log(`子应用${appName}已经渲染完成 -- 全局监听`)
},
- unmount (e) {
- console.log('unmount 全局监听', 'name:', e.detail.name)
+ unmount (e, appName) {
+ console.log(`子应用${appName}已经卸载 -- 全局监听`)
},
- error (e) {
- console.log('error 全局监听', 'name:', e.detail.name)
+ error (e, appName) {
+ console.log(`子应用${appName}加载出错 -- 全局监听`)
},
- beforeshow (e) {
- console.log('beforeshow 全局监听', 'name:', e.detail.name)
+ beforeshow (e, appName) {
+ console.log(`子应用${appName} beforeshow -- 全局监听`)
},
- aftershow (e) {
- console.log('aftershow 全局监听', 'name:', e.detail.name)
+ aftershow (e, appName) {
+ console.log(`子应用${appName} aftershow -- 全局监听`)
},
- afterhidden (e) {
- console.log('afterhidden 全局监听', 'name:', e.detail.name)
+ afterhidden (e, appName) {
+ console.log(`子应用${appName} afterhidden -- 全局监听`)
},
},
plugins: {
diff --git a/dev/main-react16/src/pages/react16/react16.js b/dev/main-react16/src/pages/react16/react16.js
index b69f3c21..eb94b436 100644
--- a/dev/main-react16/src/pages/react16/react16.js
+++ b/dev/main-react16/src/pages/react16/react16.js
@@ -23,7 +23,7 @@ export default class App extends React.Component {
showMicroApp: true,
testNum: 0,
showModal: false,
- routerMode: 'pure',
+ routerMode: 'state',
baseroute: '/micro-app/demo/react16',
}
@@ -440,7 +440,7 @@ export default class App extends React.Component {
// disable-scopecss
// shadowDOM
// disable-memory-router
- router-mode={this.state.routerMode}
+ // router-mode={this.state.routerMode}
// keep-router-state
// default-page='/micro-app/react16/page2'
// hidden-router
@@ -448,7 +448,7 @@ export default class App extends React.Component {
// fiber
// ssr
// clear-data
- // iframe
+ iframe
>
)
diff --git a/dev/main-react16/src/pages/vite2/vite2.js b/dev/main-react16/src/pages/vite2/vite2.js
index 311a6fc0..b3ecf908 100644
--- a/dev/main-react16/src/pages/vite2/vite2.js
+++ b/dev/main-react16/src/pages/vite2/vite2.js
@@ -109,7 +109,7 @@ function vite2 (props) {
// keep-alive
// default-page='/micro-app/vite2/element-plus'
// disable-memory-router
- // router-mode='native'
+ router-mode='state'
baseroute='/micro-app/demo/vite2'
>
diff --git a/dev/main-react16/src/pages/vue2/vue2.js b/dev/main-react16/src/pages/vue2/vue2.js
index 5fc1dc36..4e68b786 100644
--- a/dev/main-react16/src/pages/vue2/vue2.js
+++ b/dev/main-react16/src/pages/vue2/vue2.js
@@ -91,7 +91,7 @@ function Vue2 () {
// disableSandbox
// clear-data
// iframe
- router-mode='pure'
+ router-mode='native'
>
diff --git a/docs/zh-cn/changelog.md b/docs/zh-cn/changelog.md
index 3e6d8d2d..5009394a 100644
--- a/docs/zh-cn/changelog.md
+++ b/docs/zh-cn/changelog.md
@@ -10,7 +10,7 @@
### 1.0.0-rc.5
-`2024-2-29`
+`2024-4-29`
- **New**
@@ -33,6 +33,7 @@
- **Update**
+ - 🚀 优化了生命周期全局监听函数的传递参数。
- 🚀 更新了路由相关文档。
diff --git a/docs/zh-cn/life-cycles.md b/docs/zh-cn/life-cycles.md
index 98ad7242..bdf409da 100644
--- a/docs/zh-cn/life-cycles.md
+++ b/docs/zh-cn/life-cycles.md
@@ -15,7 +15,7 @@
子应用卸载时触发。
#### 5. error
-子应用渲染出错时触发,只有会导致渲染终止的错误才会触发此生命周期。
+子应用加载出错时触发,只有会导致渲染终止的错误才会触发此生命周期。
## 监听生命周期
@@ -37,10 +37,10 @@ import jsxCustomEvent from '@micro-zoe/micro-app/polyfill/jsx-custom-event'
name='xx'
url='xx'
onCreated={() => console.log('micro-app元素被创建')}
- onBeforemount={() => console.log('即将被渲染')}
+ onBeforemount={() => console.log('即将渲染')}
onMounted={() => console.log('已经渲染完成')}
onUnmount={() => console.log('已经卸载')}
- onError={() => console.log('渲染出错')}
+ onError={() => console.log('加载出错')}
/>
```
@@ -66,7 +66,7 @@ export default {
console.log('micro-app元素被创建')
},
beforemount () {
- console.log('即将被渲染')
+ console.log('即将渲染')
},
mounted () {
console.log('已经渲染完成')
@@ -75,7 +75,7 @@ export default {
console.log('已经卸载')
},
error () {
- console.log('渲染出错')
+ console.log('加载出错')
}
}
}
@@ -117,20 +117,20 @@ import microApp from '@micro-zoe/micro-app'
microApp.start({
lifeCycles: {
- created (e) {
- console.log('created')
+ created (e, appName) {
+ console.log(`子应用${appName}被创建`)
},
- beforemount (e) {
- console.log('beforemount')
+ beforemount (e, appName) {
+ console.log(`子应用${appName}即将渲染`)
},
- mounted (e) {
- console.log('mounted')
+ mounted (e, appName) {
+ console.log(`子应用${appName}已经渲染完成`)
},
- unmount (e) {
- console.log('unmount')
+ unmount (e, appName) {
+ console.log(`子应用${appName}已经卸载`)
},
- error (e) {
- console.log('error')
+ error (e, appName) {
+ console.log(`子应用${appName}加载出错`)
}
}
})
diff --git a/docs/zh-cn/native-mode.md b/docs/zh-cn/native-mode.md
index 679051e9..80c5c2a2 100644
--- a/docs/zh-cn/native-mode.md
+++ b/docs/zh-cn/native-mode.md
@@ -1,6 +1,6 @@
-native模式下子应用基于浏览器路由进行渲染,与主应用共用浏览器路由,具体原理参考[关于native模式的原理解析](/zh-cn/native-mode?id=关于native模式的原理解析)。
+native模式是指放开路由隔离,主应用和子应用同时基于浏览器路由进行渲染,共用同一套location和history,拥有更好的用户体验,但更容易导致主应用和子应用的路由冲突,具体原理参考[关于native模式的原理解析](/zh-cn/native-mode?id=关于native模式的原理解析)。
-此时需要更加复杂的路由配置,主应用和子应用的路由都要进行一些改造,相应的也会获得更好的路由体验。
+native模式需要更加复杂的路由配置,主应用和子应用的路由都要进行一些改造。
### 路由类型约束
native模式下主、子应用需要遵循以下约束:
@@ -155,7 +155,7 @@ let app = new Vue({
### 关于native模式的原理解析
**原理:**子应用根据浏览器地址渲染对应的页面,而不是micro-app的url属性
-##### 举个栗子 🌰 :
+##### 例1:
浏览器地址为:`http://localhost:3000/page1?id=1#hash`,此时pathname为`/page1`,search为`?id=1`,hash为`#hash`。
@@ -175,7 +175,7 @@ let app = new Vue({
子应用加载完成后会根据浏览器的地址匹配并渲染对应的页面。
-##### 栗子2 🌰 :
+##### 例2:
场景:主应用是history路由,子应用也是history路由,我们要跳转主应用的`my-app`页面,`my-app`页面中嵌入子应用,我们要展现子应用的`page1`页面。
@@ -190,7 +190,7 @@ micro-app配置如下:
```
-##### 栗子3 🌰 :
+##### 例3:
场景:主应用是hash路由,子应用也是hash路由,我们要跳转主应用的`my-app`页面,`my-app`页面中嵌入子应用,我们要展现子应用的`page1`页面。
@@ -203,7 +203,7 @@ micro-app配置如下:
```
-##### 栗子4 🌰 :
+##### 例4:
场景:主应用是history路由,子应用是hash路由,我们要跳转主应用的`my-app`页面,页面中嵌入子应用,我们要展现子应用的`page1`页面。
diff --git a/docs/zh-cn/router.md b/docs/zh-cn/router.md
index 143dd78f..bbb17182 100644
--- a/docs/zh-cn/router.md
+++ b/docs/zh-cn/router.md
@@ -11,10 +11,11 @@ search是默认模式,通常不需要特意设置,search模式下子应用
![alt](https://img12.360buyimg.com/imagetools/jfs/t1/204018/30/36539/9736/6523add2F41753832/31f5ad7e48ea6570.png ':size=700')
-**使用方式:**
+**切换方式:**
设置单个子应用:
```html
+
```
全局设置:
@@ -22,7 +23,7 @@ search是默认模式,通常不需要特意设置,search模式下子应用
import microApp from '@micro-zoe/micro-app'
microApp.start({
- 'router-mode': 'search',
+ 'router-mode': 'search', // 所有子应用都设置为search模式
})
```
@@ -57,12 +58,13 @@ microApp.start({
```
#### ** native模式 **
-native模式下子应用完全基于浏览器路由系统进行渲染,比search模式拥有更加简洁优雅的的浏览器地址,但相应的需要更加复杂的路由配置,详情参考[native-mode](/zh-cn/native-mode)
+native模式是指放开路由隔离,子应用和主应用共同基于浏览器路由进行渲染,它拥有更加直观和友好的路由体验,但更容易导致主应用和子应用的路由冲突,且需要更加复杂的路由配置,详情参考[native-mode](/zh-cn/native-mode)
-**使用方式:**
+**切换方式:**
设置单个子应用:
```html
+
```
全局设置:
@@ -70,17 +72,18 @@ native模式下子应用完全基于浏览器路由系统进行渲染,比searc
import microApp from '@micro-zoe/micro-app'
microApp.start({
- 'router-mode': 'native',
+ 'router-mode': 'native', // 所有子应用都设置为native模式
})
```
#### ** native-scope模式 **
native-scope模式的功能和用法和native模式一样,唯一不同点在于native-scope模式下子应用的域名指向自身而非主应用。
-**使用方式:**
+**切换方式:**
设置单个子应用:
```html
+
```
全局设置:
@@ -88,17 +91,18 @@ native-scope模式的功能和用法和native模式一样,唯一不同点在
import microApp from '@micro-zoe/micro-app'
microApp.start({
- 'router-mode': 'native-scope',
+ 'router-mode': 'native-scope', // 所有子应用都设置为native-scope模式
})
```
#### ** pure模式 **
-pure模式下子应用独立于浏览器进行渲染,即不修改浏览器地址,也不增加路由堆栈,更像是一个组件。
+pure模式是指子应用独立于浏览器进行渲染,即不修改浏览器地址,也不增加路由堆栈,pure模式下的子应用更像是一个组件。
-**使用方式:**
+**切换方式:**
设置单个子应用:
```html
+
```
全局设置:
@@ -106,9 +110,31 @@ pure模式下子应用独立于浏览器进行渲染,即不修改浏览器地
import microApp from '@micro-zoe/micro-app'
microApp.start({
- 'router-mode': 'pure',
+ 'router-mode': 'pure', // 所有子应用都设置为pure模式
})
```
+
+#### ** state模式 **
+state模式是指基于浏览器history.state进行渲染的路由模式,在不修改浏览器地址的情况下模拟各种路由行为,相比其它路由模式更加简洁优雅。
+
+state模式的表现和iframe类似,但却没有iframe存在的问题。
+
+**切换方式:**
+
+设置单个子应用:
+```html
+
+
+```
+全局设置:
+```js
+import microApp from '@micro-zoe/micro-app'
+
+microApp.start({
+ 'router-mode': 'state', // 所有子应用都设置为state模式
+})
+```
+
diff --git a/package.json b/package.json
index e2da3b76..75b353d8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@micro-zoe/micro-app",
- "version": "1.0.0-rc.4",
+ "version": "1.0.0-rc.5",
"description": "A lightweight, efficient and powerful micro front-end framework",
"private": false,
"main": "lib/index.min.js",
diff --git a/src/interact/lifecycles_event.ts b/src/interact/lifecycles_event.ts
index 0c3fcd0c..53451488 100644
--- a/src/interact/lifecycles_event.ts
+++ b/src/interact/lifecycles_event.ts
@@ -63,7 +63,7 @@ export default function dispatchLifecyclesEvent (
formatEventInfo(event, element)
// global hooks
if (isFunction(microApp.options.lifeCycles?.[lifecycleName])) {
- microApp.options.lifeCycles![lifecycleName]!(event)
+ microApp.options.lifeCycles![lifecycleName]!(event, appName)
}
element.dispatchEvent(event)
diff --git a/typings/global.d.ts b/typings/global.d.ts
index 7ee07434..b28b71a1 100644
--- a/typings/global.d.ts
+++ b/typings/global.d.ts
@@ -264,14 +264,14 @@ declare module '@micro-app/types' {
// lifeCycles
interface lifeCyclesType {
- created?(e: CustomEvent): void
- beforemount?(e: CustomEvent): void
- mounted?(e: CustomEvent): void
- unmount?(e: CustomEvent): void
- error?(e: CustomEvent): void
- beforeshow?(e: CustomEvent): void
- aftershow?(e: CustomEvent): void
- afterhidden?(e: CustomEvent): void
+ created?(e: CustomEvent, appName: string): void
+ beforemount?(e: CustomEvent, appName: string): void
+ mounted?(e: CustomEvent, appName: string): void
+ unmount?(e: CustomEvent, appName: string): void
+ error?(e: CustomEvent, appName: string): void
+ beforeshow?(e: CustomEvent, appName: string): void
+ aftershow?(e: CustomEvent, appName: string): void
+ afterhidden?(e: CustomEvent, appName: string): void
}
type AssetsChecker = (url: string) => boolean;