小程序是一種不用下載就能使用的應用,也是一項門檻非常高的創新,經過將近兩年的發展,已經構造了新的小程序開發環境和開發者生態。小程序也是這么多年來中國IT行業里一個真正能夠影響到普通程序員的創新成果,現在已經有超過150萬的開發者加入到了小程序的開發,與我們一起共同發力推動小程序的發展,小程序應用數量超過了一百萬,覆蓋200多個細分的行業,日活用戶達到兩個億,小程序還在許多城市實現了支持地鐵、公交服務。小程序發展帶來更多的就業機會,2017年小程序帶動就業104萬人,社會效應不斷提升。
因此小程序與H5網頁相互跳轉頁面顯得尤為重要,下面我就來給大家分享一下微信小程序跳轉到H5網頁的方法。
1、編寫跳轉按鈕相關代碼:
跳轉按鈕頁面代碼:
<view class="container">
<view class='wrApper'>
<button class='wepay' bindtap='gooutUrl'>點擊跳轉到H5頁面</button>
</view>
</view>
跳轉按鈕JS代碼:
Page({
gooutUrl: function () {
wx.navigateTo({
url: '../out/out', //
success: function () {
}, //成功后的回調;
fail: function () { }, //失敗后的回調;
complete: function () { } //結束后的回調(成功,失敗都會執行)
})
}
})
2、跳轉頁面代碼:
<view class="container">
<web-view src="https://域名"></web-view>
</view>
2.1、如果是正式發布需要配置業務域名并上傳驗證文件。
1)、域名需要備案好的一級域名。
2)、配置HTTPS 證書。
3)、進入到小程序后臺 https://developers.weixin.qq.com 設置-開發設置 -業務域名。
![微信小程序跳轉到H5網頁](http://www.isolves.com/d/file/p/2020/04-08/aea3cee928dfc10ef9b41224ec1819f8.jpg)
圖1填寫小程序信息
![微信小程序跳轉到H5網頁](http://www.isolves.com/d/file/p/2020/04-08/8a000c0a8165cc44d2837e105ab9961c.jpg)
圖2配置業務域名
4)、下載校驗文件,并將文件放置在域名根目錄下。
配置好了以上幾步就可以進行正常的跳轉了。
2.2、如果是開發版需要進行一下設置,就可避開域名相關校驗。
1)、如果只是開發測試使用可以避開域名相關校驗,避開方法如下所示(在開發者工具中點設置-項目設置-在不校驗合法域名、web-view(業務域名)、TLS 版本以及 HTTPS 證書 前面打上對勾):
![微信小程序跳轉到H5網頁](http://www.isolves.com/d/file/p/2020/04-08/e3db5b6ca4f9e374c70593fd2216203a.jpg)
圖3本地設置
2)、設置完成后,點擊下圖中的真機調試,掃描二維碼即可測試跳轉效果。
![微信小程序跳轉到H5網頁](http://www.isolves.com/d/file/p/2020/04-08/e6d7e031f2d21e32e36216bf3e60ca60.jpg)
圖4調試