微信小程序地图应用开发踩坑之路
发布于 4 年前 作者 chao35 470 次浏览 来自 分享

好久没有更新文章了,最近又开发了一款地图应用的微信小程序–快标记,本文主要介绍在全栈开发过程中遇到坑。

本文结构:

1、需求分析;

2、技术架构;

3、开发思路;

4、经验总结。

1、需求分析

需求很简单,使用场景就是:用户可以在手机上添加标记点,并可以填写标记点的简介、说明、图标、联系方式,也可以给标记点分组,然后将标记点或者分组分享给好友,好友点击分享后的链接就可以看到分享的标记点或者分组中标记点,点击标记点可以查看详情,导航到标记点,给标记点打电话。考虑到添加标记的便利性,增加了单击地图即可添加标记,也可以通过语音搜索来添加地点。普通用户限制三个分组,会员可以不限标记分组数。

2、技术架构

整个软件由我一个人全栈开发,考虑到分享的便利性,选择了微信小程序作为载体,后端接口采用springboot开发,接口验证采用jwt,权限控制采用shiro,采用docker部署以保障服务可用性,微信小程序采用原生的JavaScript,考虑到界面的美观,UI框架采用ColorUI快速搭建界面。

3、开发思路

1)用户打开小程序调用登录接口,返回会员信息并保存到本地;

2)加载地图组件,添加标记组,判断用户是否会员来判断是否限制标记组数。

3)选择标记组,用户点击地图获取经纬度、地址信息并保存到服务器,跳转到编辑界面编辑标记点信息。

4)用户可以直接分享标记组或者分享标记点,跳转到分享设置界面,调用微信分享api,带上标记点或者标记组信息标志。

5)被分享用户点击链接打开小程序,获取标记点或者标记组信息,根据设置的权限信息来控制显示内容。

4、踩坑总结

1)切换分组后,地图还残留上一个分组的标记点信息,而且还不能点击,查阅了文档后发现原来是标记点的ID要设置成上一个标记点的ID,不能设置成数据库中的ID,比如下图中的ID:

当然,还有一位一个解决办法:重新加载页面即可,会稍微影响用户体验,具体代码如下:

wx.reLaunch({      url: ‘/pages/index/index’  })

另外在基础库 2.13.0 开始也可以调用MapContext.removeMarkers方法来更新标记点。

2)、修改完标记点信息后,回到首页如何刷新标记点信息?

当然可以每次在页面onshow的方法中重新调用接口刷新,但是这个方法会影响服务器性能,我的做法是在点击编辑按钮的时候,把点位信息存一份到缓存,编辑完后直接更新缓存,添加完标记点也需要更新缓存,下次刷新就直接从缓存拿。

3)、iOS端不支持购买会员,如何解决?

这个确实是个硬伤,没有好的解决办法,要么提供线下服务,要么提供实物,两者都没有咋弄?我的解决办法是联系客服手动设置为会员。

回到顶部