micro-app
micro-app copied to clipboard
vite + vue3 ,百度地图有很多问题
1. 百度地图SDK放到基座中
基座应用:
// index.html
<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=xxx"></script>
子应用
// index.html
<script>
window.BMapGL = window.rawWindow.BMapGL
window.BMAP_ANCHOR_TOP_LEFT = window.rawWindow.BMAP_ANCHOR_TOP_LEFT
window.BMAP_STATUS_SUCCESS = window.rawWindow.BMAP_STATUS_SUCCESS
// Tip: 子应用使用iframe方式,导致百度地图SDK中的instanceof检测结果会不符合预期,添加代码,
// 且代码中的数组定义 [] 需要变为 new Array()
window.Array = window.rawWindow.Array
</script>
// 代码
// let myArr= []
let myArr= new Array()
问题
因为使用的是vite,所以子应用只能用iframe模式,这导致了instance of Array 检测不符合预期。改变代码window.Array = window.rawWindow.Array ...... let myArr= new Array() 使用暂时没有问题。但我觉得这样可能有问题!
iframe模式下所有的 instance of xx 应该都有问题吧,应该如何处理呢?
2.百度地图SDK放到子应用中
主应用
// 资源过滤
microApp.start({
excludeAssetFilter (assetUrl) {
console.log(assetUrl)
// 返回true则micro-app不会劫持处理当前文件
const whiteWords = ['baidu.com', 'bdimg.com']
return whiteWords.some(o => {
return assetUrl.includes(o)
})
}
})
子应用
// index.html
<link rel="stylesheet" href="/bmap.css" >
<script src="/bmap.min.js"></script>
问题
- 虽然报错
Uncaught TypeError: Failed to execute 'removeChild' on 'Node'...,但地图能用 - element-plus的diaolog无法正常使用,报错
[Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node......
提问
这种第三方的资源,有没有完整的解决方案可以发一下吗?