1、为了帮助全国人民在发生地震时争取宝贵避险时间,于是在拥有6亿活跃用户的手机QQ内上线了地震预警功能。
2、主要包括两个板块,第一个是用户订阅需要提醒的地理位置和地震强度,地理位置选择接入了腾讯地图,默认获取离用户当前最近的地点;第二个是地震来临时,主动推送到订阅用户的手机上,用户点开后即可看到地震波到达订阅地点的倒计时以及破坏程度和避险动作。
后台:管理用户订阅数据,对接国家地震局,保证地震发生后第一时间拿到数据并推送到APP。
前端:全程助力公众号配置入口,链接到地震提醒订阅页面设置关注地和地震等级,当关注地发生地震并且地震等级达满足设置条件时,用户手机会收到APP推送消息,点开跳转到预警页面,可以查看倒计时、紧急程度、破坏程度、避险措施等。
我主要负责前端开发,通过Vue3+Vite开发快速实现业务功能。
踩坑1: 是H5地图选点功能接入,腾讯地图H5 SDK只支持Iframe嵌入,iframe嵌入没有原生支持设置当前位置,于是通过先请求用户当前位置后再插入iframe链接后再渲染iframe地图。
踩坑2: 内嵌Webview加载H5页面,用Glocation获取当前位置在部分设备上可能获取不到,需要通过Native客户端API获取。
难点1: 地震来临时,倒计时都是实时的,用户收到消息时倒计时就已经开始,用户打开时需要按最新时间倒计时,用户且后台再回来页面也需要重新计算倒计时。
难点2:倒计时10秒时,需要语音播报倒计时,要保证页面倒计时跟语音播报同步。