轉自鏈接:https://www.jianshu.com/p/22a5dab598ce
小程序跳轉H5
需要用到小程序的web-view,官方文檔鏈接
web-view是承載網頁的容器。會自動鋪滿整個小程序頁麵,個人類型的小程序暫不支持使用。寫法如下:
<view class="page-body"> <web-view src="https://xxx.com/test.html"></web-view></view>
注:當在微信開發中工具裏返回“{"base_resp":{"ret":-1}}”時,需要點左上角“設置”--“項目設置”--勾選“不校驗合法域名、web-view(業務域名)、TLS 版本以及 HTTPS 證書”
無標題.png
H5跳轉小程序
因為外部h5無法跳轉到小程序,因此需要把h5內嵌到小程序的web-view中。
一:首頁小程序內嵌h5網頁,內嵌這一步就相當於上麵的小程序跳轉h5:
<view class="page-body"> <web-view src="https://xxx.com/test.html"></web-view></view>
二:然後在內嵌的網頁裏引入js,調用wx.miniProgram.navigateTo跳轉小程序方法,可在url後拚接要傳的參數:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>h5跳轉小程序</title> </head> <body> <h3 align="center">正在跳轉到小程序...</h3> <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?phone=18012121212'}) </script> </body></html>
三:小程序接受參數的頁麵:
index.wxml:
<view class="page-body">{{phone}}</view>
index.js
Page({ data: { phone:'' }, onLoad: function (options) { var that = this; /*獲取參數*/ var phone = options.phone that.setData({ phone: phone, }) }})
這樣就從h5跳到小程序指定的頁麵並且可以拿到我們想要傳的參數
關於web-view相關的接口:
官方js調用方法示例:
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>// javascriptwx.miniProgram.navigateTo({url: '/path/to/page'})wx.miniProgram.postMessage({data: 'foo'})wx.miniProgram.postMessage({data: {foo: 'bar'}})wx.miniProgram.getEnv(function (res) { console.log(res.miniprogram) })