这个真是一个非常麻烦的事情。自己折腾了好久,这里记一笔,希望能帮助到别的小伙伴。
直接说结论:
- 在h5应用中调用微信的sdk,wx.miniProgram.navigateTo 打开另一个小程序页面(比如location),跟上参数,把目标地址的坐标、名称都传递过去。
wx.miniProgram.navigateTo({
url: `../location/location?latitude=${latitude}&longitude=${longitude}&name=${name}`
});
- 在新开的location小程序页面中调用wx.openLocation打开导航页。当导航页后退的时候,location页再wx.navigateBack回到之前的h5小程序页中。
// pages/location/location.js
Page({
data: {
needBack: false
},
onLoad: function (options) {
const {longitude, latitude, name} = options;
this.openLocation(longitude, latitude, name);
},
onShow: function() {
// 从导航页退回的时候,就再次跳转回到之前webview的小程序页面
if (this.data.needBack) {
wx.navigateBack();
}
},
openLocation: function (longitude, latitude, name) {
wx.openLocation({
latitude: Number(latitude),
longitude: Number(longitude),
scale: 18,
name,
complete: () => {
this.setData({needBack: true});
}
});
}
});
其他
对于实用主义的朋友,看到这里就OK了,后面扯扯自己绕的一些坑,想了解的可以继续。
应用场景就是h5应用内想导航,或者能够唤起手机内的导航应用。
一开始是用高德的web sdk,能解决一些地图搜索、展示的场景,但也就这样了。在小程序的webview环境里,想拿到用户的实时坐标、以及唤起三方应用都太麻烦了。于是就想,能不能把信息从h5里抛出来。
然后这里就遇上一个大坑,h5和小程序的通信,这里有篇文章,大家想研究的可以参考下:链接
其实主要的问题都在这里捣鼓,一开始没有处理好浏览堆栈,新开页面的情况下openLocation的时候会再新开一个小程序页面。所以就想着能不能直接通信,后来~~~挣扎过、放弃了。最后采用了上面的折中办法,在location页第二次onShow的时候直接退回来,实现了最后的需求。
希望对你能有帮助。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。