小程序地图(Uni-app)与前端缝合(Vue)的尝试
| 这个作业属于哪个课程 | 2021春软件工程实践 W班 (福州大学) |
|---|---|
| 这个作业要求在哪里 | 软件工程实践总结&个人技术博客 |
| 这个作业的目标 | 个人技术博客 |
| 其他参考文献 | Uni-app官方文档、高德地图官方文档 |
技术概述
- 目的：鉴于组员已经在小程序端（Uni-app）写好了地图组件，我就想要拿来给后台的前端复用。
- 学习该技术的原因：不要重复做轮子（也不算是学习吧，我是靠自己的经验和知识去尝试的）
- 难点：如何将小程序端（Uni-app）的地图组件与已经写好的前端进行缝合。
技术详述
-
其实很多时候都会有不同的客户端内嵌网页以达到类似原生app效果（例如隔壁组outfits的社区模块就是安卓客户端内嵌的网页）。
-
那么能不能倒过来，前端网页做到类似内嵌这些程序的效果，从而达到我在技术概述提到的目的？
- 就可行性而言，Uni-app本身就能打包成H5网页，因此：
-
将打包的网页部署去其它结点，利用iframe引入。
-
把打包的网页塞入Vue框架中的静态资源，然后去调用他。
-
- 就可行性而言，Uni-app本身就能打包成H5网页，因此：
针对上述情况的网络拓补图
- 抽离地图组件的详细步骤：
-
（1）复制原有的小程序项目。
-
（2）去掉所有页面，只保留地图组件。
-
-
（3）删除与小程序授权相关的代码，否则在网页端会出现问题。
-
-
（4）修改样式，使其更贴合网页端用户使用习惯。
-
（5）打包
-
流程图
- 成功，见下图：
技术使用中遇到的问题和解决过程
- 其实在上面技术详述已经很成功了（假如你只需要一些在H5平台上用到的功能），但万万没想到，在小程序中能正常显示的polygons（多边形，用于显示地点区域）居然没有显示出来。
- 查了一下官方文档，发现打包出来的H5的地图是不支持polygons属性！这波啊，这波是大意了！
- 解决过程：使用高德地图对小程序地图进行一次复现了，不过幸好：
- 一些数据处理算法是通用的（比如计算区域堵塞状态从而给于不同的颜色），可以直接复制
- 后台接口也是通用的，因为后台提供了polygons属性数组，我只需要进行一些处理就可以兼容了，体现了前后端分离的好处。
总结
- 虽然Uni-app可以编译多个平台的应用，但是要注意不同平台之间的一些功能是否被支持。
- 要认真看官方文档，收集充分的资料，不然就是在做无用功！
