@uyun/seal-extend/lib/child-window

主要 public-layout.js 和 @uyun/ec-basic-layout 中使用

作用

1. 跳转登录
2. 跳转退出
3. 浏览器地址同步
4. 换肤通知

window.UYUN_APPLICATION_SCREEN_VAR

if (window.UYUN_APPLICATION_SCREEN_VAR.isInApplicationScreen) {
  // 在应用中
}
// 跳到登录页面
window.UYUN_APPLICATION_SCREEN_VAR.toLogin() 
// 回到首页
window.UYUN_APPLICATION_SCREEN_VAR.goHome()
// 跳到退出登录页面
window.UYUN_APPLICATION_SCREEN_VAR.toLogOut()
// 获取portal 版本
window.UYUN_APPLICATION_SCREEN_VAR.PORTAL_APP_VERSION
// 获取最上面的窗口
window.UYUN_APPLICATION_SCREEN_VAR.top
// 获取父的窗口
window.UYUN_APPLICATION_SCREEN_VAR.parent
// 产品 A 跳转到 产品 B
window.UYUN_APPLICATION_SCREEN_VAR.href = `/产品名称/page1`
// 显示隐藏头部 false 显示 true是隐藏 / 注意的是切换到其他产品头还会显示出来 、 跨域就调用会失败
window.UYUN_APPLICATION_SCREEN_VAR.hideHeader(false)

目录划分方式

portal 是垂直划分的方式, 你可以把每一个文件夹当成一个模块。每个模块的 store 样式都是独立的，国际化是共享的。

目录结构

├── public # 放静态资源
├── src # 源码
│   ├── app # portal应用代码
|       ├── app-screen # 应用屏
|       ├── authorization # 助理屏的权限控制弹框
|       ├── bootstrap # 引导组件，相当于视图的根组件
|       ├── child-window # 放在 Layout-public.min.js 中做地址监听 
|       ├── global-poviders # 全局store
|       ├── help # 头部下来菜单中 帮助中心
|       ├── home-slick-carousel # 首页轮播和助理屏工具栏
|       ├── setting # 头部下来菜单中 设置
|       ├── themes # 设计到js 主题换肤的
|       ├── user-login # 用户登录， 修改密码， 找回密码
|       ├── widget-global-poviders # 部件公告store，一般给部件提供公共方法可以放进去
|       ├── widget-screen # 部件屏，又称助理屏
|       ├── enums.js # 常用枚举
|       ├── util # 常用公用方法
|       ├── version # 版本
│   ├── assets # 国际化，和需要patch打包的资源
│   ├── index.js # 入口
├── .browserslistrc
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── babel.config.js
├── everest.config.js
├── jest.config.js # 测试配置
├── package.json
├── postcss.config.js
└── README.md

基本模块规范

创建模块

yarn g module /demo

模块目录

├── api 后端对接接口
├── style
├── demo.js # 模块根组件
├── demo.module # 模块配置
├── index.js # 模块入口
├── demo.store.js # 模块store

模块配置

具体文档

export const DemoModule = createModule({
  // 路由配置
  routes: [

  ],
  // 依赖的store
  providers: [
    DemoStore
  ],
  // 根组件
  rootComponent: Demo
})

模块中api

创建 api

yarn g api /demo/api/user --urls /demo/getUser /demo/posd

目录结构

├── user.api.js  # 接口方法
├── user.api.schema.js  # 接口模型

模型使用方式

具体文档

iframe 总结

第一种方式

远程的js组件在portal中执行然后插入到iframe 中

问题

1. window 对象还是portal中的对象，键盘事件 滚轮事件
2. document.body 依然是 portal 中的，所以弹框依然是插入到portal中

• portal 出现的bug dnd 不起作用 @uyun/components 点击iframe 无法关闭等等

解决方案， 组件提供设置 window对象

 <LoadcssCtx.Provider value={{ document, window }} >
  <ConfigProvider getPopupContainer={() => document.body} {...{ getDocument: () => window.document }} >
    <FrameContext
      context={window}
      moduleName={moduleName}
      ModuleComponent={ModuleComponent}
      ModuleComponentProps={props}
      ModuleComponentRef={ref}
    />
  </ConfigProvider>
</LoadcssCtx.Provider>

第二中方式， 适合后面做产品嵌入

请求html然后然后替换iframe中的html

相比普通方式的优势

1. 可以提前插入脚本
2. 通过 window.parent 共享父页面 style 标签中的样式，和 scrpit 中的脚本. 有了这个特性， 配置portal base模块可以做预加载功能
3. 可以捕获404的产品

• 相比第一中不能对象共享

useEffect(() => {
  const svg = windowRef.current.document.createElementNS('http://www.w3.org/2000/svg', 'svg')
  const symbol = document.querySelectorAll('symbol')
  svg.setAttributeNS('http://www.w3.org/2000/svg', 'aria-hidden', 'true')
  symbol.forEach(symbol => {
    if (symbol.id.indexOf('icon') === 0) {
      svg.appendChild(symbol.cloneNode(true))
    }
  })
  windowRef.current.document.body.appendChild(svg)
}, [])

Current Tags

• 16.90.1                                ...           latest (5 years ago)

7 Versions

• 16.90.1                                ...           5 years ago
• 16.90.0                                ...           5 years ago
• 16.73.0-patch.0                                ...           5 years ago
• 16.41.0                                ...           6 years ago
• 16.60.1                                ...           5 years ago
• 16.70.0                                ...           5 years ago
• 16.71.0                                ...           5 years ago