原生定位 - wap2app教程

场景说明

有定位需求的M站,通过手机浏览器访问时,经常因为定位问题导致用户体验下降、甚至用户流失,主要有以下几种情况:

  • 部分手机不支持HTML5定位,因网络原因,非国产手机HTML5定位失败的概率更高
  • 每次打开不同的M站,手机浏览器均会弹框提示定位权限,用户可能会误点击导致定位失败
  • HTML5定位效率较低,重依赖定位的业务,在定位成功之前,无法显示业务数据,导致用户长时间等待

如下截图是大家经常碰见的情况:

原生定位 - 图1

wap2app运行在5+引擎环境下,5+引擎可以调用系统原生的定位,定位效率及精度远高于浏览器的HTML5定位,因此建议在有定位需求的页面,将HTML5定位替换升级为5+的原生定位。

升级方案

我们在GitHub上开源了一个plusto项目,该项目可以根据平台实现API的自动转换,比如在5+引擎环境下,将浏览器默认定位升级为5+原生定位,实现一套代码平滑迁移至多个平台。

目前关于定位的替换API已完善,参考plusGeolocation.js文件,该js文件判断在5+引擎环境下,将navigator.geolocation.getCurrentPosition()等方法重写为原生定位的方法,这样开发者就无需修改M站定位相关逻辑,就可以自动更换为原生定位。

目前geolocation/h5toplus.js已实现对如下3个HTML5定位方法的重写替换:

  • navigator.geolocation.getCurrentPosition()
  • navigator.geolocation.watchPosition()
  • navigator.geolocation.clearwatch()

开发者只需按照如下步骤操作,即可将浏览器的HTML5定位升级为原生定位:

  • 下载plusGeolocation.js(下载地址),并上传到M站的cdn服务器上
  • 在M站上有定位需求的页面引用plusGeolocation.js,例如:
  1. <script src="http://cdn.example.com/js/plusGeolocation.js" type="text/javascript" charset="utf-8"></script>

Tips1: plusGeolocation.js 是通过重写navigator.geolocation API来升级定位功能的,因此需确保在调用HTML5定位代码之前引用plusGeolocation.js;

Tips2:h5toplus.js文件开头就有运行环境的判断,若不是5+环境,则直接return,不会执行替换定位的他逻辑,因此开发者无需担心影响原有定位业务。

  1. if(!navigator.userAgent.match(/Html5Plus/i)) {
  2. //非5+引擎环境,直接return;
  3. return;
  4. }