DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2017-08-28 21:21
  • 更新:2019-07-20 11:09
  • 阅读:17708

原生定位 - wap2app教程

分类:wap2app

场景说明

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

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

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

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定位升级为原生定位:

  1. 下载plusGeolocation.js(下载地址),并上传到M站的cdn服务器上
  2. 在M站上有定位需求的页面引用plusGeolocation.js,例如:
<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,不会执行替换定位的他逻辑,因此开发者无需担心影响原有定位业务。

    if(!navigator.userAgent.match(/Html5Plus/i)) {  
        //非5+引擎环境,直接return;  
        return;  
    }
5 关注 分享
lhyh 雪之梦技术驿站 Trust 王老吉 Neil_HL

要回复文章请先登录注册

1162762894@qq.com

1162762894@qq.com

封装的H5+原生能力接口,一行代码调用原生能力。

开源仓库地址: https://gitee.com/cloud_finder/Joiny-H5Plus
2019-07-20 11:09
闪亮

闪亮

plusGeolocation.js能在uniapp里面吗?
2019-06-27 14:34
dkdk

dkdk

回复 天使中的魔鬼:
这个后来怎么解决的,因此上不去ios
2019-02-24 17:48
天使中的魔鬼

天使中的魔鬼

回复 8925683@qq.com:
我们这里也是会弹出地理位置提示框。希望官方可以解决下。
2018-12-14 13:06
8925683@qq.com

8925683@qq.com

回复 天使中的魔鬼:
用这里的依然会出理 m.dianping.com 需要你的地理位置提示框
2018-12-10 16:17
8925683@qq.com

8925683@qq.com

[ERROR] : ReferenceError: Can't find variable: _dlGeolocation 这个变量是在哪里定义的。
2018-12-10 16:14
8925683@qq.com

8925683@qq.com

[ERROR] : ReferenceError: Can't find variable: _dlGeolocation
2018-12-10 16:14
天使中的魔鬼

天使中的魔鬼

已解决这个问题,在需要获取地理位置的页面引入plusGeolocation.js后 参考http://www.html5plus.org/doc/zh_cn/geolocation.html 里面的方法获取相应的地址位置信息即可。
2018-11-15 11:39
天使中的魔鬼

天使中的魔鬼

回复 DCloud_UNI_CHB:
ios 12.0
引入plusGeolocation.js后反而定位都用不了。一只提示ReferenceError: Can't find variable: _dlGeolocation 这个变量找不到,是不是还差引入什么js啊?求官方解决
2018-11-15 10:38
天使中的魔鬼

天使中的魔鬼

引入plusGeolocation.js后反而定位都用不了。一只提示ReferenceError: Can't find variable: _dlGeolocation 这个变量找不到,是不是还差引入什么js啊?求官方解决
2018-11-15 10:36
天使中的魔鬼

天使中的魔鬼

回复 ludejun666@qq.com:
请问这个问题是怎么解决的?
2018-11-15 10:34
ludejun666@qq.com

ludejun666@qq.com

我引入了plusGeolocation.js 反到时定位不了,不引入是可以定位的,就是原HTML5的可以定位 navigator.geolocation.getCurrentPosition
2018-09-30 08:36
ludejun666@qq.com

ludejun666@qq.com

我加入了<script src="./geolocation/plusGeolocation.js" type="text/javascript" charset="utf-8"></script> 可是封装APP后到是定位失败了是什么原因,如果没有封装是可以成功的
2018-09-30 08:33
rd@jopool.com

rd@jopool.com

iPhone X里没有_dlGeolocation定义
2018-07-14 14:21
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 wanyuwei123@163.com:
打包成apk/ipa的话,必须单独配置百度或高德的参数
2017-11-09 11:39
距离您98米

距离您98米

回复 wanyuwei123@163.com:
我获取不到城市,怎么解决?
2017-11-09 11:35
wanyuwei123@163.com

wanyuwei123@163.com

用这个JS,打包的时候必须要填写百度或者高德的AK吗?现在我在测试基座里面能正常获取到定位,但是我自己打的包里面就获取不到定位了
2017-10-19 18:19
wanyuwei123@163.com

wanyuwei123@163.com

引入了plusGeolocation.js后,getCurrentPosition方法可以了,但watchPosition方法为什么没有持续的发送请求了?好像只请求了一次后就没再请求了?
2017-10-19 14:38