调试的原理

上一课，我们初始化了一个应用。入口设置为了http://localhost:1600

其中端口号，请结合您的开发环境自行修改。

此时，我们点打开，即可弹出主应用的界面。
也可以添加小卡片到桌面上进行测试。

如果未出现您的开发环境的页面。请确认您已经以调试模式运行了你的项目。

原理详解

我们先来了解一下应用的基础原理。
我们借助wujie.js提供的微前端能力，将您的应用以#shadow的方式加载了DOM结构。同时使用一个空的iframe加载了您的js代码。
具体原理可看此图：

image.png

特性和原理介绍
无界原理介绍 让iframe焕发新生
代码级原理展示
无界微前端是如何渲染子应用的？

此外也可参考此掘金博客：
https://juejin.cn/post/7310964581051252748

基于上述原理，实际上大家在开发的时候，已经和在开发环境下无异了。

可能需要注意的几个点：

1.fixed是相对于页面的，因为您的应用可能会以小组件、模态弹窗等方式加载。
所以请主观上规避掉fixed布局。

2.右键菜单定位问题，因为部分UI组件库的右键菜单定位是相对于页面的，当您的应用被wujie加载的时候，也会有相对位置偏移。所以请尽可能使用父容器定位，而不要相对于body定位。

3.UI风格问题，关于UI风格，我会在下一课进行补充说明。

4.数据存储，您可以使用localStorage进行数据存储，且小组件、应用之间数据是互通的。可以使用此方法进行数据异步同步。
例如在主应用中写入localStorage,然后在小组件上读取。
如何避免数据覆盖？
可使用_rev字段，在核心数据上标记上_rev，自己在写入的时候，先获取最新的数据，并比较_rev，如果和最新的一致，则允许写入，否则拒绝写入。