关于微信小程序web-view中H5页面使用百度或腾讯地图出现不支持非业务域名坑爹问题终极解决方案！

Answer 1

在开发微信小程序时，遇到了一个棘手问题：在使用web-view组件跳转到H5页面时，如果该页面包含百度或腾讯地图的API，会收到不支持非业务域名的错误提示。经过深入研究和实践，我找到了一种解决方案，可以同时满足业务需求和避免错误提示。

我使用的是mpvue进行小程序的开发，尽管如此，这个问题与使用原生小程序开发时面临的情况并无本质区别。

解决步骤如下：

1. 当使用web-view组件进行页面跳转时，务必注意路由中的哈希模式（#号）。如果不进行相应的编码处理（如使用encodeURIComponent），可能会导致跳转失败。同样地，解码操作（decodeURIComponent）也需正确实施，以确保H5页面能够正确加载。

2. 在H5页面的代码中，引入了百度或腾讯地图的API。然而，微信小程序跳转到该页面时，会提示不支持非业务域名。尽管网上有建议将地图域名添加至微信小程序后台的请求配置中，但该方法并未解决问题。于是，我在H5页面的代码中添加了判断逻辑，以识别微信环境。在微信环境下，不加载地图API，以避免错误提示。

3. 我在H5页面代码中创建了专门的文件夹和JS文件，分别用于封装百度地图（BMap.js）和腾讯地图（TMap.js）的逻辑。通过这种方式，可以在微信环境下跳过地图API的引入，从而避免错误提示。

4. 为了确保解决方案的灵活性，我将处理逻辑集成到H5页面的特定文件中，这些文件在需要使用地图功能时被调用。这样，在小程序跳转到H5页面时，地图功能将不会被调用，但在实际应用中，会逐步将所有功能集成至小程序内，以实现更紧密的集成和更好的用户体验。

通过上述方法，不仅解决了微信小程序与H5页面集成过程中遇到的地图API支持问题，也确保了产品的正常运行和用户体验。虽然这是一个临时解决方案，但随着项目的发展，我们会逐步优化，将更多功能集成至小程序中，以提供更高效、无缝的用户体验。