@xingtukeji/micro 1.0.0 → 1.0.1

package/index.ts

@@ -6,6 +6,7 @@ export interface AppOption {
   url: string
   el?: HTMLElement | string
   preload?: boolean
+  token?: ()=>string | string
   params?: { [key: string]: any }
 }
 export interface App extends AppOption {
@@ -13,24 +14,31 @@ export interface App extends AppOption {
 }
 
 const _apps = []
+const CONSTANT = {
+  KEY: '$xtm',  // 父应用注入子应用实例的key
+  IS_MICRO: '__XT_MICRO', // 是否在微应用中
+  MICRO_NAME: '__XT_MICRO_NAME',  // 微应用名称
+  MICRO_TOKEN: '__XT_MICRO_TOKEN', // 微应用token
+  MICRO_APP: '__XT_MICRO_APP', // 微应用实例
+  DOM_ID_PREFIX: 'xt-micro-ifr-'  // dom id前缀
+}
+//dom id前缀
+// export const DOM_ID_PREFIX = 'xt-ifr-'
 
 /**
  * 判断是否在微应用中
  */
 const _isMicro = ref(false)
-Object.defineProperty(window, '__XT_MICRO', {
+Object.defineProperty(window, CONSTANT.IS_MICRO, {
   get: function () {
-    return this.__XT_MICRO
+    return _isMicro.value
   },
   set: function (newValue) {
     _isMicro.value = newValue
-  },
+  }
 })
 export const isMicro = _isMicro
 
-//dom id前缀
-export const DOM_ID_PREFIX = 'xt-ifr-'
-
 /**
  * 生成微应用id
  * 增加前缀
@@ -38,7 +46,7 @@ export const DOM_ID_PREFIX = 'xt-ifr-'
  * @returns 返回dom id
  */
 const generateId = (name: string) => {
-  return `${DOM_ID_PREFIX}${name}`
+  return `${CONSTANT.DOM_ID_PREFIX}${name}`
 }
 /**
  * 处理微应用url
@@ -46,12 +54,16 @@ const generateId = (name: string) => {
  * @param params 携带参数
  * @returns 拼接后的url
  */
-const generateURL = (url: string, params: { [key: string]: any } = {}) => {
+const generateURL = (app: AppOption) => {
   function isObject(variable) {
     return variable !== null && typeof variable === 'object' && !Array.isArray(variable)
   }
-  const _parmas = typeof params === 'function' ? params() : isObject(params) ? params : {}
-  return `${url}?__XT_MICRO=true&${qs.stringify(_parmas)}`
+  const _parmas = typeof app.params === 'function' ? app.params() : isObject(app.params) ? app.params : {}
+  const _token = typeof app.token === 'function' ? app.token() : isObject(app.token) ? app.token : {}
+  return `${app.url}?${CONSTANT.IS_MICRO}=true
+            &${CONSTANT.MICRO_NAME}=${app.name}
+            &${CONSTANT.MICRO_TOKEN}=${_token}
+            &${qs.stringify(_parmas)}`
 }
 
 class MicroApp {
@@ -84,20 +96,20 @@ class MicroApp {
       if (!ifr) {
         ifr = document.createElement('iframe')
         ifr.id = generateId(this.app.name)
-        const url = generateURL(this.app.url, this.app.params)
+        const url = generateURL(this.app)
         ifr.src = url
         ifr.classList.add('micro-iframe')
-        ifr.onload = this.onLoad.call(this)
-        // ifr.onunload = this.onUnload
-        ifr.onerror = this.onError
+        ifr.addEventListener('load', (event)=>{
+          this.onLoad.call(this, event)
+        })
+        ifr.addEventListener('error', this.onError)
+        ifr.addEventListener('unload', this.onUnload)
         this.dom = ifr
       }
-      // else {
-      //   ifr = this.dom
-      // }
       isHide ? (ifr.style.display = 'none') : ifr.style.removeProperty('display')
       this.panel = panel
       panel.appendChild(ifr)
+      
     } else {
       throw new Error('el not found')
     }
@@ -158,8 +170,9 @@ class MicroApp {
     }
   }
 
-  onLoad() {
-
+  onLoad(event: Event) {
+    console.log('micro app load', this, event)
+    _postMicro(this.app)
   }
 
   onUnload() {
@@ -176,7 +189,10 @@ class MicroApp {
  * @param app
  */
 export const setupApp = (app: AppOption) => {
-  _postMicro()
+  //在子应用加载完成后，发送消息给子应用
+  // setTimeout(() => {
+  //   _postMicro(app)
+  // },0)
   return (_apps[app.name] = {
     ...app,
     instance: new MicroApp(app),
@@ -213,7 +229,7 @@ export const startApp = (name: string, options?: Partial<AppOption>) => {
       } else {
         app.instance.mount(app.el)
       }
-      _postMicro()
+      // _postMicro(app)
       resolve(app)
     } else {
       reject('app not found')
@@ -237,32 +253,39 @@ function getQueryParameter(name, url = window.location.href) {
   return decodeURIComponent(results[2].replace(/\+/g, " "));
 }
 
+interface MicroInitOptions{
+  authHandler?: (token: string) => void
+}
 /**
  * 微应用-子应用初始化
  * 非必须，但建议使用
  */
-export const microInit = () => {
-
+export const microInit = (options: MicroInitOptions = {}) => {
   //处理url参数
-  // const urlParams = new URLSearchParams(window.location.search)
-  // const micro = urlParams.get('__XT_MICRO')
-  const micro = getQueryParameter('__XT_MICRO')
-  //
+  const micro = getQueryParameter(CONSTANT.IS_MICRO)
+  const microName = getQueryParameter(CONSTANT.MICRO_NAME)
+  //设置环境变量
   if (micro) {
-    window['__XT_MICRO'] = true
+    window[CONSTANT.IS_MICRO] = true
   }
   //监听message，设置环境变量
   window.addEventListener('message', (e) => {
-    //
-    if (e.data.cmd === '$xt/micro') {
-      //
-      window['__XT_MICRO'] = e.data.data
+    if (e.data.cmd === `$xt/micro/${microName}`) {
+      console.log('micro', e.data.data)
+      window[CONSTANT.MICRO_APP] = e.data.data
     }
   })
-}
 
-// window.postMessage({ cmd: '$xt/micro', data: true }, '*')
+  //处理token
+  const token = getQueryParameter(CONSTANT.MICRO_TOKEN)
+  options.authHandler && options.authHandler(token)
+}
 
-const _postMicro = () => {
-  window.postMessage({ cmd: '$xt/micro', data: true }, '*')
+const _postMicro = (app: AppOption) => {
+  window.postMessage({ cmd: `$xt/micro/${app.name}`, data: {
+    name: app.name,
+    url: app.url,
+    preload: app.preload,
+    // params: app.params
+  } }, '*')
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xingtukeji/micro",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": false,
   "description": "",
   "main": "index.ts",