好久没有更新文章了,最近又开发了一款地图应用的微信小程序–快标记,本文主要介绍在全栈开发过程中遇到坑。
本文结构:
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端不支持购买会员,如何解决?
这个确实是个硬伤,没有好的解决办法,要么提供线下服务,要么提供实物,两者都没有咋弄?我的解决办法是联系客服手动设置为会员。