測試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包裹的內容是網頁而已。

如果,直接通過網頁地址訪問目標網頁,點擊目標網頁中的按鈕,是返回不了小程序的。

 

以上為個人測試得知,如有錯誤,請指正。謝謝!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM