測試web-view，實現小程序和網頁之間的切換

官方有句提醒：我的類型與海外類型的小程序暫不支持使用

測試條件：

1.小程序後臺管理中，進入「開發設置」，設置一個業務域名（注意：不是設置服務器域名）。好比 https://test.XXX.com.cn

2.配置業務域名時，會有以下提醒。按照提醒，將下載獲得的校驗文件，放到業務域名的根目錄下，並確保能夠訪問到這個文件。

3.將作測試的 html 也提交到業務域名下的服務器。我寫的測試代碼以下：

<div>
    <h3>這是網頁</h3>
    <button id="btn1">跳轉到小程序的首頁</button>
    <button id="btn2">點擊發送數據</button>
    <p>點擊第二個按鈕後，而後點擊小程序的回退箭頭，能夠獲取到來自網頁的數據</p>
</div>

　　window.onload = function() { var btn1 = document.getElementById('btn1'); var btn2 = document.getElementById('btn2'); btn1.onclick = function() { wx.miniProgram.navigateTo({url: '/pages/index/index'}) } btn2.onclick = function() { wx.miniProgram.postMessage({ data: '來自網頁的數據' }) } }

4.開發者工具，打開本地測試的小程序。（注意：第一步中提到的小程序，使用它的AppId登陸）

編寫小程序測試代碼，我寫的代碼以下：

index.wxml中，

<navigator class="link" url="/pages/logs/logs?path=https://test.XXX.com.cn/webViewTest.html">跳轉到網頁</navigator>

logs.wxml中,

<web-view src="{{path}}" bindmessage="getMsgHandle"></web-view>

logs.js中

Page({ data: { show: true, path: '' }, onLoad: function () { var that = this; that.setData({ path: that.options.path }) }, getMsgHandle: function(e) { var that = this; wx.showToast({ title: e.detail.data[0], icon: 'success', duration: 5000 }) console.log(e.detail.data) } })

個人測試思路：index.wxml中，點擊一個連接，跳轉到網頁。實際實現是，點擊index.wxml中的連接，跳轉到logs.wxml，用logs.wxml，呈現要跳轉的網頁內容。

注意：測試的話，直接在開發者工具中測試，或者掃碼測試便可，不用將小程序上傳。

最終測試結果：點擊小程序內的按鈕，跳轉到了顯示網頁的頁面，點擊網頁中的按鈕，還能回到小程序的頁面。

 

通過研究，我的認爲，小程序和網頁的跳轉，並非真正意義上的跳轉，實際上仍是小程序中的頁面1跳轉到頁面2，而頁面2包裹的內容是網頁而已。

若是，直接經過網頁地址訪問目標網頁，點擊目標網頁中的按鈕，是返回不了小程序的。

 

以上爲我的測試得知，若有錯誤，請指正。謝謝！