技术概述

• 目的：鉴于组员已经在小程序端（Uni-app）写好了地图组件，我就想要拿来给后台的前端复用。
• 学习该技术的原因：不要重复做轮子（也不算是学习吧，我是靠自己的经验和知识去尝试的）
• 难点：如何将小程序端（Uni-app）的地图组件与已经写好的前端进行缝合。

技术详述

• 其实很多时候都会有不同的客户端内嵌网页以达到类似原生app效果（例如隔壁组outfits的社区模块就是安卓客户端内嵌的网页）。

• 那么能不能倒过来，前端网页做到类似内嵌这些程序的效果，从而达到我在技术概述提到的目的？

  • 就可行性而言，Uni-app本身就能打包成H5网页，因此：

    • 将打包的网页部署去其它结点，利用iframe引入。

    • 把打包的网页塞入Vue框架中的静态资源，然后去调用他。

针对上述情况的网络拓补图

• 抽离地图组件的详细步骤：

  • （1）复制原有的小程序项目。

  • （2）去掉所有页面，只保留地图组件。

  • （3）删除与小程序授权相关的代码，否则在网页端会出现问题。

  • （4）修改样式，使其更贴合网页端用户使用习惯。

  • （5）打包

流程图

• 成功，见下图：

技术使用中遇到的问题和解决过程

• 其实在上面技术详述已经很成功了（假如你只需要一些在H5平台上用到的功能），但万万没想到，在小程序中能正常显示的polygons（多边形，用于显示地点区域）居然没有显示出来。

• 查了一下官方文档，发现打包出来的H5的地图是不支持polygons属性！这波啊，这波是大意了！

• 解决过程：使用高德地图对小程序地图进行一次复现了，不过幸好：
  • 一些数据处理算法是通用的（比如计算区域堵塞状态从而给于不同的颜色），可以直接复制
  • 后台接口也是通用的，因为后台提供了polygons属性数组，我只需要进行一些处理就可以兼容了，体现了前后端分离的好处。

总结

• 虽然Uni-app可以编译多个平台的应用，但是要注意不同平台之间的一些功能是否被支持。
• 要认真看官方文档，收集充分的资料，不然就是在做无用功！

参考文献、参考博客

Uni-app关于map组件的文档

Amap-Vue（第三方Vue-高德地图插件）官方文档