@chensi-thunder/fe-micro-main
v1.0.0
Published
特定微前端主工程入口框架
Downloads
2
Readme
- APP前端主工程使用指南
APP前端主工程使用指南
1. 快速使用
1.1 安装 fe-micro-main
主工程使用所有依赖函数、组件等走需要依赖fe-micro-main工程，该工程为主项目构建提供基础能力
# yarn 方式安装
yarn add fe-micro-main --registry=http://192.168.101.68:4873
# npm
npm install fe-micro-main --registry=http://192.168.101.68:48731.2 在主应用中注册子应用
<template>
<div id="app">
<app-router
:appList="[{
name: "alive-app",
title: "动态服务app",
host: "http://localhost:8000/"
}, {
name: "test-app",
title: "app模块",
host: "http://localhost:8001/"
}]"
:customProps="{a: 233}">
</app-router>
</div>
</template>
<script>
import { appRouter } from 'fe-micro-main'
export default {
name: 'App',
components: { appRouter },
data () {
return {
appList: undefined
}
}
}
</script>引用app-router组件，并且使用为属性appList设置需要注册的app。当子应用信息注册完之后，一旦浏览器的 url 发生变化，便会自动触发app的路由的匹配逻辑，当子app被匹配后即处于激活状态，则该app对应的 render 方法就会被调用。
2. 基础数据类型
UrlParser
具体详情可参照url-parse
<!--参数对象介绍-->
{
protocol: String, // 协议部分 (e.g. http:).
slashes: Boolean, // 一个布尔值，表示协议后面是否有两个斜杠(//).
host: String, // 主机名和端口号.
hostname: String, // 主机名.
port: String, //端口号.
pathname: String, // url path部分.
query: Object, // url query部分解析对象 {a: 23, b: 23}.
hash: String, // url中#符号部分.
origin: String // URL的原始source.
}AppConfig
当前app的基础配置,主要包含app名称、中文名称、host以及一些其他基础配置参数
{
name: String, // 主工程解析该app后名称，主要用于路由前缀
title: String, // 当前app的中文名称
host: String, // 当前app的部署路径，支持相对路径、绝对路径，
render: Function, // 当前app的配置的render函数,用于自定义渲染
activeRule: Function， // 当前app激活时满足的路由状态，用于处理特殊app中的特殊场景激活的状态，该规则会覆盖原有的默认激活方式，即`name`和`pathBase`失效
apiRule: String, // app调用api前缀,前缀中会默认识别`{name}`,并将`{name}`替换为当前app name
wsEvRule: String, // app使用websocket时，为app转发app的ws事件处理签注,前缀中会默认识别`{name}`,并将`{name}`替换为当前app name
pathBase: String // 当前所有app注册时的router前缀
}3. API
3.1 appRouter
主项目接收app配置参数组件，是子app的主容器，该文件为引入app必备状态
import { appRouter } from 'fe-micro-main'下面将介绍该组件的属性
3.1.1 props 属性
apiRule
- app调用api前缀,前缀中会默认识别
{name},并将{name}替换为当前app name - 类型：
String - 默认值：
/{name}-api
wsEvRule
- app使用websocket时，为app转发app的ws事件处理签注,前缀中会默认识别
{name},并将{name}替换为当前app name - 类型：
String - 默认值：
{name}/
pathBase
- 当前所有app注册时的router前缀
- 类型：
String - 默认值：''
appList
- app列表
- 类型：
Array，具体配置参数请查看3.1.4 appList 属性配置 - 默认值：
[]
customProps
- 自定义props，需要传递给app自定义属性，可用于主应用与app之间传递auth数据等
- 类型：
Any - 默认值：
-
// 主应用 app.vue
<app-router
:app-list="appList"
:customProps="{getToken: function () {
// 返回当前的localStorage中的token数据
return window.localStorage.getItem('token')
}}"></app-router>
// 子app应用
regisiterApp({
// 用于传递vue作用域，避免提取公共方法后，vue版本不一致问题
Vue,
// 用于主函数渲染的对象，不需要包裹new Vue
app: {
router,
el: '#app',
components: { App: () => import('./App.vue') },
template: '<App/>',
// vue的生命周期钩子都接受props属性，用于接收主工程向子工程传递的属性，用于主项目和子app进行通讯
beforeCreate: (props) => {
console.log(props)
console.log(props.getToken())
}
},
// 开发测试阶段api前缀,app声明周期中，用于设置开发环境默认路由
apiPrefix: '/api'
})
defaultPath
- 默认展示的路径,即主应用默认展示的app的路由路径
- 类型：
String - 默认值：
-
isSandBox
- 是否使用沙箱机制,目前沙箱机制隔离了基础的css、js
- 类型：
Boolean - 默认值：
true
keepAlive
- 是否缓存，为
true时，当前app非激活态且非第一次加载时，不销毁app实例；否则销毁app实例 - 类型：
Boolean - 默认值：
false
beforeAppEnter
- 子应用渲染前调用函数
- 类型：
Function,接收参数(appConfig, appInitObj, vm)，appConfig为app基础配置，appInitObj为app init初始化对象，vm为当前app实例 - 默认值：
-
beforeAppLeave
- 子应用destroy、deactived调用函数
- 类型：
Function,接收参数(appConfig, appInitObj, vm)，appConfig为app基础配置，appInitObj为app init初始化对象，vm为当前app实例 - 默认值：
-
afterAppMounted
- app渲染之后自定义回调函数
- 类型：
Function,接收参数(appConfig, appInitObj, vm)，appConfig为app基础配置，appInitObj为app init初始化对象，vm为当前app实例 - 默认值：
-
beforeRouterChange
- 用于处理router变化前，接收处理数据，用于拦截路由变化之前，对路由重写功能，类似router forEach，可处理auth 权限(暂时不支持promise处理，默认异步函数时，会默认触发一次history push操作，继续触发replace操作。后续支持)
- 类型：
Function, 接收参数(to: UrlParser, from: UrlParser, next: Function) - 默认值：
-
to: 即将要进入的目标路由对象from: 当前导航正要离开的路由对象next一定要调用该方法来 resolve 这个钩子:
next()： 直接跳转到即将跳转的导航next(false)： 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
beforeRouterChange (to, from, next) {
// 当to的路径为'/user/test-app'时，不跳转
if (to.pathname === '/user/test-app') return next(false)
next()
},3.1.2 events 事件
routerChanged
- 主工程路由发生变化触发事件
- 参数：
(to: UrlParser) => {}触发change事件的跳转到url的parse解析对象
beforeFirstAppMount
- 第一个app mount前触发
- 参数：
(config: AppConfig) => {}app配置数据
firstAppMounted
- 第一个app mount后触发
- 参数：
(config: AppConfig) => {}app配置数据，具体详细描述见beforeFirstAppMount事件
noAppchange
- 无app change事件,管理当前app没有变化的状态，当前状态仅在容器第一次app无change状态触发
- 参数：
--
appChange
- app change事件
- 参数：
(activeApps: {appName: appConfig}, oldActiveApps: {appName: appConfig}), appConfig具体详细描述见beforeFirstAppMount事件
3.1.3 slots
appError
- app资源错误是渲染的组件
- 默认值：
<div>404, 该路由没有匹配的app</div>
loading
- app资源加载中、渲染之前的loading时组件渲染
- 默认值：
<div>loading</div>
appNotFound
- 当前路由没有匹配的app的组件渲染
- 默认值：
<div>404, 未发现该app</div>
3.1.4 appList 属性配置
name
- app name，用于path处理
- 类型：
String, - 默认值：
-
title
- app 中文名称
- 类型：
String, - 默认值：
-
host
- app 静态资源host
- 类型：
String, - 默认值：
-
render
- render渲染处理，用于自定义渲染,主要针对app渲染时自定义渲染的情况，包括
iframe、自定义组件渲染 - 类型：
Function, - 默认值：
-
// 使用
<app-router
:appList="[{
name: 'iframe-app',
title: '外链iframe',
render: () => <div>
<h3>百度页面</h3>
<iframe src="http://www.baidu.com" width="100%" height="300px" style="border: 0"/>
</div>
}, {
name: 'custom-app',
title: '本地自定义app',
render: () => <div>
<h3>我是一个图标自定义app</h3>
<fe-line-chart :option="{}"></fe-line-chart>
</div>
}]">
</app-router>
activeRule
- 当前app激活时满足的路由状态，用于处理特殊app中的特殊场景激活的状态，该规则会覆盖原有的默认激活方式，即
name和pathBase失效 - 类型：
Function, - 默认值：
-
isActive
- 当前app是否激活状态
- 类型:
Boolean - 默认值: false
apiRule
- app调用api前缀,前缀中会默认识别
{name},并将{name}替换为当前app name，该参数如果不设置，会默认继承app-router中apiRule参数 - 类型:
String - 默认值: '/{name}-api'
wsEvRule
- app使用websocket时，为app转发app的ws事件处理签注,前缀中会默认识别
{name},并将{name}替换为当前app name - 类型：
String - 默认值：
{name}/
pathBase
- 当前路由下注册的router前缀，该参数如果不设置，会默认继承
app-router中pathBase参数 - 类型:
String - 默认值: ''
customProps
- 该参数会为当前app设置自定义属性,该参数如果不设置，会默认继承
app-router中customProps参数,具体使用形式与app-router customPros类似 - 类型:
String, Function, Array, Object, Promise - 默认值:
-
<app-router
:appList="[{
name: 'alive-app',
title: 'aliveapp',
host: 'http://localhost:1999',
customProps: {
getToken () {
// 返回当前的localStorage中的token数据
return window.localStorage.getItem('token')
}
}
}, {
name: 'static-app',
title: 'staticapp',
host: 'http://localhost:1998'
}]">
</app-router>3.2 appHistory
提供手动切换不同应用的方法，该方法主要用于在主工程中切换不同的app。
appHistory对history api进行了简单封装，主要暴露了两个方法push和replace
import { appHistory } from 'fe-micro-main'appHistory.push
- 类型：function
- 代码示例：
appHistory.push('/home')appHistory.replace
- 类型：function
- 代码示例：
appHistory.replace('/home')注意：
sandbox 目前内部沙箱仅使用了主流浏览器的proxy方式对全局变量进行拦截处理，实现内部沙箱机制。但是对于部分低版本浏览器，以及IE支持不够友好，所以对于需要支持低版本浏览器的项目，建议引入proxy polyfill