小程序跳转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中。
1、首页小程序内嵌h5网页,内嵌这一步就相当于上面的小程序跳转h5:
<view class="page-body"> <web-view src="https://xxx.com/h5.html"></web-view> </view>
2、然后在内嵌的网页里引入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>
3、小程序接收参数的页面:
Page({ data: { id:\'\' }, onLoad: function (options) { var that = this; /*获取参数*/ var id = options.id that.setData({ id: id, }) } })