chore: 更新案例

jd-opensource · Nov 3, 2021 · 391f643 · 391f643
1 parent 86f13d9
commit 391f643
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 4 deletions.
diff --git a/docs/zh-cn/advanced.md b/docs/zh-cn/advanced.md
@@ -85,7 +85,7 @@ vite环境下，当路由的baseName和vite.base值不相等，两者会进行
 - 方式二：子应用根据基座路由单独打包一个版本，这个版本的子应用无法单独访问，必须嵌入基座中运行。
 
 ##### 3、静态资源
-图片等静态资源需要使用绝对地址，可以使用 `new URL('../assets/logo.png', import.meta.url)` 等方式获取资源的全链接地址。
+图片等静态资源需要使用绝对地址，可以使用 `new URL('../assets/logo.png', import.meta.url).href` 等方式获取资源的全链接地址。
 
 ### 👇 基座应用的修改
 `请确保vite版本>=2.5.0`
@@ -304,7 +304,7 @@ let router = null
 let history = null
 // 👇 将渲染操作放入 mount 函数
 function mount () {
-  history = VueRouter.createWebHashHistory(import.meta.env.BASE_URL)
+  history = VueRouter.createWebHashHistory()
   router = VueRouter.createRouter({
     history,
     routes,

diff --git a/docs/zh-cn/sandbox.md b/docs/zh-cn/sandbox.md
@@ -4,3 +4,51 @@
 沙箱是默认开启的，正常情况下不建议关闭，以避免出现不可预知的问题。
 
 如何关闭沙箱请查看：[disableSandbox](/zh-cn/configure?id=disablesandbox)
+
+### 注意事项
+
+#### 1、子应用在沙箱环境中如何获取到真实window
+目前有3种方式在子应用中获取外部真实window
+- 1、new Function("return window")() 或 Function("return window")()
+- 2、(0, eval)('window')
+- 3、window.rawWindow
+
+#### 2、子应用抛出错误信息：xxx 未定义
+**包括：**
+- `xxx is not defined`
+- `xxx is not a function`
+- `Cannot read properties of undefined`
+
+**原因：**
+
+在沙箱环境中，顶层变量不会泄漏为全局变量。
+
+例如在正常情况下，通过 var name 或 function name () {} 定义的顶层变量会泄漏为全局变量，通过window.name或name就可以全局访问。
+
+但是在沙箱环境下这些顶层变量无法泄漏为全局变量，window.name或name的值为undefined，导致出现问题。
+
+**解决方式**：
+
+*方式一：手动修改*
+
+将 var name 或 function name () {} 修改为 window.name = xx
+
+*方式二：通过插件系统修改子应用代码*
+
+比如常见的加载webpack打包的dll文件失败的问题，因为dll文件的内容和js地址相对固定，可以直接进行全局查找和修改。
+```js
+microApp.start({
+  plugins: {
+    modules: {
+      应用名称: [{
+        loader(code, url) {
+          if (url === 'xxx.js') {
+            code = code.replace('var xx_dll=', 'window.xx_dll=')
+          }
+          return code
+        }
+      }]
+    }
+  }
+})
+```
diff --git a/examples/children/react16/src/index.js b/examples/children/react16/src/index.js
@@ -69,6 +69,8 @@ function mount () {
 
 function unmount () {
   console.log("微应用react16卸载了 -- 来自umd-unmount");
+  // 卸载时关闭弹窗
+  notification.destroy()
   // 卸载应用
   ReactDOM.unmountComponentAtNode(document.getElementById("root"));
 }

diff --git a/examples/children/react16/src/pages/page1/page1.css b/examples/children/react16/src/pages/page1/page1.css
@@ -41,6 +41,8 @@
 .test-cssrules-a {
   padding: var(--padding-50);
   padding-top: 10px;
+  -webkit-background-clip: text;
+  background-clip: text;
 }
 
 .test-cssrules-b {

diff --git a/examples/children/vite/src/main.js b/examples/children/vite/src/main.js
@@ -24,7 +24,7 @@ let router = null
 let history = null
 // 将渲染操作放入 mount 函数
 function mount () {
-  history = createWebHashHistory('/micro-app/vite/')
+  history = createWebHashHistory()
   router = createRouter({
     history,
     routes,

diff --git a/examples/children/vite/src/pages/page1.vue b/examples/children/vite/src/pages/page1.vue
@@ -10,7 +10,7 @@
 import HelloWorld from '../components/HelloWorld.vue'
 import { defineProps, reactive } from 'vue'
 
-const url = reactive(new URL('../assets/logo.png', import.meta.url))
+const url = reactive(new URL('../assets/logo.png', import.meta.url).href)
 // This starter template is using Vue 3 experimental <script setup> SFCs
 // Check out https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md
 </script>