记录微信小程序webview环境下本地调试高德获取定位的问题

139 阅读2分钟

先讲一下背景:我们的小程序中有一部分是H5页面实现的,通过小程序的webview展现。其中有一个表单页,需要在地图上选择位置。最开始是根据用户选择的城市,以该城市的中心作为地图的默认位置。后来遇到了需求变动,需要以用户当前的位置为默认位置。

我一听,这很简单呐,正好之前的代码里已经有了获取当前用户的位置信息的方法,只要把它加到地图初始化那里去就好。

another背景:这个项目还没有dev和test环境,只有一套生产。我自然不敢是直接将代码提交上去,先本地联调试试看,确保没问题再提交。

我们使用的是Taro做小程序,next做H5,因此本地起一个Taro的工程,将H5的地址指向本机;然后启动H5的工程,这样就可以联调了。然后通过微信开发者工具扫码预览,就能够在手机上看效果了。

正当我自信满满想要验证效果的时候,结果发现这段代码根本没有起效果。没办法,只能加上log看一下到底咋回事。

Image_940436186328281.png

这是调用了高德的Geolocation.getCurrentPosition方法。

emmm,看起来是有安全问题。先用浏览器打开试试?

然后我将我本机的地址和端口输入到手机自带的浏览器中,发现这个函数正常调用了,而且也正常定位到了当前的位置。(我就是在这个地方被骗了)

这是什么情况?难道说小程序的webview环境中会有安全问题吗?那也不应该啊,在生产环境中,其他的高德API也能够正常调用。

遇事不决,Google一下。

Image_940629023479093.jpg

看起来是因为用的http而不是https的问题。因为本地把next.js起起来的时候,就是http的。可是为什么手机自带的浏览器可以呢?

怀着这个疑问,我又用手机上的Chrome浏览器试着打开了一下,结果Chrome也报了同样的错误。看起来就是这个问题。

既然确定了,那代码就没问题,但如果还有类似的场景该咋办呢?

1.部署到dev或test环境上去,这样的话就会是安全的https,也就不会有那个报错了。

2.本地起工程的时候,以https形式启动,这可能需要mkcert去安装CA等,步骤相对会比较麻烦。

总之,有条件的话,还是部署上去看看好了。