1.0.0 • Published 1 year ago

@chensi-thunder/fe-micro-main v1.0.0

Weekly downloads
-
License
MIT
Repository
-
Last release
1 year ago

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:4873

1.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
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

import-html-entryurl-parsevuevue-routervue-template-compilerwhatwg-fetch
@infinitebrahmanuniverse/nolb-_chen@everything-registry/sub-chunk-167@zalastax/nolb-_chen
1.0.0

1 year ago