小程序与h5之间的跳转（webview）

最新推荐文章于 2025-04-08 10:01:21 发布

After All

最新推荐文章于 2025-04-08 10:01:21 发布

阅读量1.6k

点赞数

分类专栏：小程序文章标签：小程序 html5 前端 vue

本文链接：https://blog.youkuaiyun.com/afterAll0/article/details/129258521

版权

小程序专栏收录该内容

1 篇文章

订阅专栏

文章讲述了在微信环境下，如何实现H5页面与小程序之间的双向跳转并传递参数。通过使用wx.miniProgram.navigateTo进行H5到小程序的跳转，并利用encodeURIComponent传递当前页面URL。在小程序页面获取到参数后，更新webview的链接，确保H5页面能够接收到返回值，同时保持token的有效性。

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

小程序与h5之间的跳转（webview）

在微信官网中，h5跳小程序并带参是有api的，直接使用wx.miniProgram.navigateTo(url)就可以了，但是项目中往往这个是不够用的，因为我们可能还想着从小程序中执行完一些程序后拿到返回值给返回到h5中，这时这个参数就不好带到h5中了，所以这篇文章就解决了这个小程序向h5传参问题，当然也是我自己经过百度其他人的文章最后得到的结论，目前使用起来是可以的，仅供参考
方法就是直接更改webview的链接
假如A是h5上的某一个页面，，B是包含h5的webview那个小程序中页面，，C是h5要跳转到小程序的那个小程序页面。
因为我的h5项目有token存在，所以不能将webview的链接置空再给新链接（因为这样h5始终会到和获取token那个页面而不是A页面）
1、A跳转到C(传urls是当前页面的路径)

  wx.miniProgram.navigateTo({
		 url: ‘小程序page?urls=’+**encodeURIComponent(window.location.href)**
	})

2、C回到A（拿到了C给回来的结果，例如返回了code）

let pages = getCurrentPages();
let prevPage = pages[pages.length - 2];
prevPage.setData({ 
	newUrl: **this.urlpage** + '?success=' + data
})

3、B页面接收C页面返回的code，要在onshow中调用

<web-view v-if="webviewUrl" :src="webviewUrl"></web-view>

var pages = getCurrentPages();
	 var currPage = pages[pages.length - 1]; //当前页面
	 let data = currPage.data;
		if(data.newUrl){
			that.webviewUrl = data.newUrl;
		}