小程序跳轉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, }) } })