小程序跳轉H5頁面的方法步驟

小程序是一種不用下載就能使用的應用，也是一項門檻非常高的創新，經過將近兩年的發展，已經構造了新的小程序開發環境和開發者生態。小程序也是這么多年來中國IT行業里一個真正能夠影響到普通程序員的創新成果，現在已經有超過150萬的開發者加入到了小程序的開發，與我們一起共同發力推動小程序的發展，小程序應用數量超過了一百萬，覆蓋200多個細分的行業，日活用戶達到兩個億，小程序還在許多城市實現了支持地鐵、公交服務。小程序發展帶來更多的就業機會，2017年小程序帶動就業104萬人，社會效應不斷提升。

因此小程序與H5網頁相互跳轉頁顯得尤為重要，下面我就來給大家分享一下微信小程序跳轉到H5網頁的方法。

小程序組件中有一個web-view，是一個可以用來承載網頁的容器，會自動鋪滿整個小程序頁面。
注意：個人類型與海外類型的小程序暫不支持使用。
好的，我們直接上代碼，然后再進行講解。

wxml1：

<view class="tiaoH51">
 <navigator url="pageH5" class="papaa">
  點擊跳轉到H5頁面
 </navigator>
 </view>
wxml2：
<view class="container">
 <view class="pageH5">
 <web-view src="https://www.baidu.com/"></web-view>
 </view>
</view>

ok，沒有任何廢代碼，但是可能有的小伙伴有疑問了，為什么一個跳轉需要兩個頁面的wxml呢？別著急，且聽我娓娓道來~

1.首先，web-view組件的屬性src，正如你說看到的，這個就是設置網頁鏈接的，但是需要特別注意的是web-view的src必須配置https協議的鏈接；
2.其次，就是web-view組件只要配置了鏈接，它是鋪滿全屏且自動跳轉的，所以這也就是為什么我這邊需要先寫一個navigator按鈕，自主操作之后再讓它跳轉的原因；
3.最后，web-view跳轉的接口域名，需要配置在小程序開發設置的業務域名列表中。

如果是正式發布需要配置業務域名并上傳驗證文件。
1）、域名需要備案好的一級域名。
2）、配置HTTPS 證書。
3）、進入到小程序后臺 https://developers.weixin.qq.com 設置-開發設置 -業務域名。

4）、下載校驗文件，并將文件放置在域名根目錄下。

配置好了以上幾步就可以進行正常的跳轉了。

如果是開發版需要進行一下設置，就可避開域名相關校驗。
1）、如果只是開發測試使用可以避開域名相關校驗，避開方法如下所示（在開發者工具中點設置-項目設置-在不校驗合法域名、web-view（業務域名）、TLS 版本以及 HTTPS 證書 前面打上對勾）：

2）、設置完成后，點擊下圖中的真機調試，掃描二維碼即可測試跳轉效果。

到此這篇關于小程序跳轉H5頁面的方法步驟的文章就介紹到這了,更多相關小程序跳轉H5頁面內容請搜索億速云以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持億速云！