有些場景需要從微信小程序跳轉到H5頁面，通常網上的教程會告訴你使用web-view組件就可以了，但實際開發中還有很多需要注意的地方，尤其是很多概念往往會把初學者弄糊涂了，下面就讓我們從概念開始吧！
微信小程序：雖然開發方法類似網頁，但實際上是一種只能運行在微信自己開發的瀏覽器中的特殊網頁，它所能夠使用的所有功能都必須由微信瀏覽器提供；
H5頁面：這是真正的網頁應用，運行在通用瀏覽器中，各種瀏覽器雖然在細微上有所差別，但總的來說是一致的，微信瀏覽器同時也是一種通用瀏覽器，能夠支持真正的網頁應用。
因此我們才有可能在微信小程序和H5頁面之間進行跳轉，但這種跳轉是受到微信瀏覽器的嚴格控制的，因此我們有必要了解這些控制包括哪些。
H5頁面所在的域名：假設你需要調轉的H5頁面URL為https://www.mysite.com/h5page，那么這里所說的域名就是www.mysite.com，另外你沒有看錯，這個URL必須是https，如果你還沒有為你的網站加上SSL，那么就先去申請一個證書吧（注意必須是公開申請的證書，不能是自簽名的，微信不認哦！）
好了，這些都準備好了，讓我們開始開發一個小例子。
由于web-view組件是一個全屏組件，不能和其它小程序組件合用，因此需要獨立占據一個頁面，所以我們到例子就是在小程序的A頁面加一個鏈接，跳轉到B頁面，然后在B頁面使用web-view組件來加載H5頁面。
A頁面
<view class="answerer flex-wrp" bindtap='jumpToH5'> <view class="avatar flex-item"> <image src="/images/logo-small.jpg"></image> </view> <view class="answerer-info flex-item"> <text class="answerer-name">文章標題</text> <text class="answerer-des">文章摘要</text> </view> <view class="follow flex-item"> <text>十 關注</text> </view> </view>
jumpToH5: function () {
wx.navigateTo({
url: '/pages/B'
})
},B頁面
<web-view src="{{link}}" bindmessage="getMessage"></web-view>data: {
link: "https://www.mysite.com/h5page"
},這時候當你滿懷希望的點擊鏈接時，會出現第一個坎：未綁定網頁開發者
這是什么鬼，原來使用web-view組件并不是啥人上來就允許使用的，這時候需要第一個授權，就是授權開發者使用該組件。這里比較扯淡的是雖然這個組件是小程序使用的，但并不能在小程序開發號里面設置，而必須在訂閱號或者服務號中進行設置，網絡上經常能夠查到的下面這個截圖只能登錄訂閱號或者服務號才能看到。
在這里設置綁定了開發者的微信號以后，我們終于可以使用web-view組件了，不過這時候又出了新問題： 不支持打開非業務域名
原來并不是什么網址拿來就可以設置跳轉的，你的小程序中就不能直接跳轉到百度上去，小程序能夠跳轉的域名必須在業務域名中進行注冊，總算這次是在小程序開發號里面設置了，但注意在服務號的設置里也有業務域名這個設置，不要搞混了（話說微信起名也太沒有想象力了，簡直是一坨漿糊）。
設置好了這個業務域名，滿心歡喜地打開小程序，點擊鏈接，What！又來，這次的問題變成了：redirect_uri參數錯誤
這時候控制權已經從小程序轉移到了H5頁面，但微信頁面跳轉內部的機制比較復雜，涉及到了OAuth認證之類的，所以這個錯誤已經是H5頁面報的了，這就需要到H5頁面關聯的服務號中去進行設置，這次設置的項目叫做網頁授權域名，在公眾號設置的功能設置里
添加好需要跳轉的域名之后，終于能夠看到H5頁面出現在調試器上了！
最后普及一下微信公共平臺三類賬號的區別
服務號：支持最多的Web開發接口和JS開發接口，是最常規的應用開發賬號；
訂閱號：發文章用的，開發接口比較少，很多功能都不支持，是最傻瓜的文章發布賬號；
小程序：小程序應用的專屬開發賬號，僅支持對小程序的開發，有許多設置還必須到前兩類賬號中去設置。
