微信小程序web-view内嵌H5页面跳转回小程序指定页面

在微信小程序中通过 web-view 内嵌一个H5页面，在执行完相关逻辑后，点击一个按钮之类的，可以跳转回该小程序的指定页面。

一、小程序内嵌H5页面

微信小程序内嵌H5页面，用到 web-view 组件，注意个人小程序不支持！

相关官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

在小程序页面中通过以下代码内嵌H5页面，页面会自动铺满，需要做好移动端适配：

<!--pages/test/index.wxml-->
<web-view src="http://abc.com/test.html"></web-view>

记得将域名 abc.com 添加到小程序的合法域名中；在开发者工具中测试时，勾选不校验域名即可。

二、内嵌H5页面跳转回小程序

首先在上述 test.html 页面中引入微信SDK

http://res.wx.qq.com/open/js/jweixin-1.6.0.js

# 或 https
https://res.wx.qq.com/open/js/jweixin-1.6.0.js

调用微信开放接口进行页面跳转，这里的跳转有两种：

tabbar页面

wx.miniProgram.switchTab({
	url: "/pages/index/index",
});

非tabbar页面

wx.miniProgram.navigateTo({
	url: "/pages/test/index",
});

然后新增一个按钮之类的，因为需要用户主动触发。

完整代码如下

相关拓展

如果内嵌H5想要跳转至其他小程序，可以先跳转回本小程序的一个中转页，然后再跳转到其他小程序，这里就不啰嗦了。