小程序web-view加载H5页面，调用手机APP地图导航

最新推荐文章于 2025-03-28 17:36:30 发布

Semoon呐

最新推荐文章于 2025-03-28 17:36:30 发布

阅读量5.5k

点赞数 2

分类专栏：微信小程序 web

本文链接：https://blog.csdn.net/weixin_43974907/article/details/100653152

版权

本文介绍了如何在小程序中使用web-view组件加载H5页面，并实现调用手机APP进行地图导航。在实现过程中，提到了在H5触发导航时遇到的问题，如页面刷新和返回操作的影响，并探讨了可能的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序web-view加载H5页面，调用手机APP地图导航

1.需求

业务背景：微信小程序中要使用H5页面做卡券广场，为什么不用原生的小程序做？因为要尽可能实现多端复用，这款产品已经在研发APP。好了，我们说业务，卡券列表主要是以店铺为模块展示，商家名称、商家地址、产品图、产品介绍，卡券（券值、抵扣门槛、有效期、卡券状态、购买按钮等信息），用户点击商家位置可以调用小程序地图，查看线路推荐能调用手机地图APP

2.实现

2.1小程序使用web-view打开H5
文件：prizesquare.wxml

<view>
  <view class="container">
    <view class="pageH5">
      <web-view src="{
  {url}}"></web-view>
    </view>
  </view>
</view>

2.2H5触发导航
和打开web-view是同一个页面，有两点需要注意：如果跳转到小程序新的页面，会出现在地图中要点两次返回，且有空白页。如果用同一个页面，会出现点击地图的返回按钮刷新该页面（重新打开了该web-view)，可能是redirectTo的跳转方式直接清空了页面栈。目前还在寻找最合适的方法，因为并不想让用户导航完直接刷新页面，而是能继续浏览。