微信小程序（20）-- 小程序与H5如何互相跳转
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序（20）-- 小程序与H5如何互相跳转相关的知识，希望对你有一定的参考价值。
小程序跳转H5
需要用到小程序的web-view，https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
web-view是承载网页的容器，会自动铺满整个小程序页面。
<view class="page-body"> <web-view src="https://xxx.com/h5.html"></web-view> </view>
H5跳转小程序
因为外部h5无法跳转到小程序，因此需要把h5内嵌到小程序的web-view中。
一：首页小程序内嵌h5网页,内嵌这一步就相当于上面的小程序跳转h5：
<view class="page-body"> <web-view src="https://xxx.com/h5.html"></web-view> </view>
二：然后在内嵌的网页里引入js，调用wx.miniProgram.navigateTo跳转小程序方法，可在url后拼接要传的参数：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>h5跳转小程序</title>
</head>
<body>
<div align="center">正在跳转到小程序...</div>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
wx.miniProgram.navigateTo({url: ‘/index/index?id=78657‘})
</script>
</body>
</html>
三：小程序接受参数的页面：
Page({ data: { id:‘‘ }, onLoad: function (options) { var that = this; /*获取参数*/ var id = options.id that.setData({ id: id, }) } })
以上是关于微信小程序（20）-- 小程序与H5如何互相跳转的主要内容，如果未能解决你的问题，请参考以下文章