2
这个真是一个非常麻烦的事情。自己折腾了好久,这里记一笔,希望能帮助到别的小伙伴。

直接说结论:

  1. 在h5应用中调用微信的sdk,wx.miniProgram.navigateTo 打开另一个小程序页面(比如location),跟上参数,把目标地址的坐标、名称都传递过去。
wx.miniProgram.navigateTo({
  url: `../location/location?latitude=${latitude}&longitude=${longitude}&name=${name}`
});
  1. 在新开的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的时候直接退回来,实现了最后的需求。

希望对你能有帮助。


ITJacob
7 声望1 粉丝

下一篇 »
图程之路