<meta charset="utf-8">
有些場(chǎng)景需要從微信小程序跳轉(zhuǎn)到H5頁面恢筝，通常網(wǎng)上的教程會(huì)告訴你使用web-view組件就可以了，但實(shí)際開發(fā)中還有很多需要注意的地方巨坊，尤其是很多概念往往會(huì)把初學(xué)者弄糊涂了撬槽，下面就讓我們從概念開始吧！
微信小程序：雖然開發(fā)方法類似網(wǎng)頁趾撵，但實(shí)際上是一種只能運(yùn)行在微信自己開發(fā)的瀏覽器中的特殊網(wǎng)頁恢氯，它所能夠使用的所有功能都必須由微信瀏覽器提供；
H5頁面：這是真正的網(wǎng)頁應(yīng)用，運(yùn)行在通用瀏覽器中勋拟，各種瀏覽器雖然在細(xì)微上有所差別勋磕，但總的來說是一致的，微信瀏覽器同時(shí)也是一種通用瀏覽器敢靡，能夠支持真正的網(wǎng)頁應(yīng)用挂滓。
因此我們才有可能在微信小程序和H5頁面之間進(jìn)行跳轉(zhuǎn)，但這種跳轉(zhuǎn)是受到微信瀏覽器的嚴(yán)格控制的啸胧，因此我們有必要了解這些控制包括哪些赶站。
H5頁面所在的域名：假設(shè)你需要調(diào)轉(zhuǎn)的H5頁面URL為https://www.mysite.com/h5page，那么這里所說的域名就是www.mysite.com纺念，另外你沒有看錯(cuò)贝椿，這個(gè)URL必須是https，如果你還沒有為你的網(wǎng)站加上SSL陷谱，那么就先去申請(qǐng)一個(gè)證書吧（注意必須是公開申請(qǐng)的證書烙博，不能是自簽名的，微信不認(rèn)哦Ｑ萄贰）
好了渣窜，這些都準(zhǔn)備好了，讓我們開始開發(fā)一個(gè)小例子宪躯。
由于web-view組件是一個(gè)全屏組件乔宿，不能和其它小程序組件合用，因此需要獨(dú)立占據(jù)一個(gè)頁面访雪，所以我們到例子就是在小程序的A頁面加一個(gè)鏈接详瑞，跳轉(zhuǎn)到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">文章標(biāo)題</text>
<text class="answerer-des">文章摘要</text>
</view>
<view class="follow flex-item">
<text>十 關(guān)注</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"
},
這時(shí)候當(dāng)你滿懷希望的點(diǎn)擊鏈接時(shí)坝橡，會(huì)出現(xiàn)第一個(gè)坎：未綁定網(wǎng)頁開發(fā)者
這是什么鬼，原來使用web-view組件并不是啥人上來就允許使用的肝陪，這時(shí)候需要第一個(gè)授權(quán)驳庭，就是授權(quán)開發(fā)者使用該組件。這里比較扯淡的是雖然這個(gè)組件是小程序使用的氯窍，但并不能在小程序開發(fā)號(hào)里面設(shè)置饲常，而必須在訂閱號(hào)或者服務(wù)號(hào)中進(jìn)行設(shè)置，網(wǎng)絡(luò)上經(jīng)常能夠查到的下面這個(gè)截圖只能登錄訂閱號(hào)或者服務(wù)號(hào)才能看到狼讨。
在這里設(shè)置綁定了開發(fā)者的微信號(hào)以后贝淤，我們終于可以使用web-view組件了，不過這時(shí)候又出了新問題： 不支持打開非業(yè)務(wù)域名
原來并不是什么網(wǎng)址拿來就可以設(shè)置跳轉(zhuǎn)的政供，你的小程序中就不能直接跳轉(zhuǎn)到百度上去播聪，小程序能夠跳轉(zhuǎn)的域名必須在業(yè)務(wù)域名中進(jìn)行注冊(cè)朽基，總算這次是在小程序開發(fā)號(hào)里面設(shè)置了，但注意在服務(wù)號(hào)的設(shè)置里也有業(yè)務(wù)域名這個(gè)設(shè)置离陶，不要搞混了（話說微信起名也太沒有想象力了，簡(jiǎn)直是一坨漿糊）招刨。
設(shè)置好了這個(gè)業(yè)務(wù)域名，滿心歡喜地打開小程序打却，點(diǎn)擊鏈接，What谎倔！又來柳击，這次的問題變成了：redirect_uri參數(shù)錯(cuò)誤
這時(shí)候控制權(quán)已經(jīng)從小程序轉(zhuǎn)移到了H5頁面片习，但微信頁面跳轉(zhuǎn)內(nèi)部的機(jī)制比較復(fù)雜捌肴，涉及到了OAuth認(rèn)證之類的毯侦，所以這個(gè)錯(cuò)誤已經(jīng)是H5頁面報(bào)的了哭靖，這就需要到H5頁面關(guān)聯(lián)的服務(wù)號(hào)中去進(jìn)行設(shè)置具垫，這次設(shè)置的項(xiàng)目叫做網(wǎng)頁授權(quán)域名侈离，在公眾號(hào)設(shè)置的功能設(shè)置里
添加好需要跳轉(zhuǎn)的域名之后，終于能夠看到H5頁面出現(xiàn)在調(diào)試器上了卦碾！
最后普及一下微信公共平臺(tái)三類賬號(hào)的區(qū)別
服務(wù)號(hào)：支持最多的Web開發(fā)接口和JS開發(fā)接口起宽，是最常規(guī)的應(yīng)用開發(fā)賬號(hào)；
訂閱號(hào)：發(fā)文章用的坯沪，開發(fā)接口比較少，很多功能都不支持腐晾，是最傻瓜的文章發(fā)布賬號(hào)；
小程序：小程序應(yīng)用的專屬開發(fā)賬號(hào)藻糖，僅支持對(duì)小程序的開發(fā)，有許多設(shè)置還必須到前兩類賬號(hào)中去設(shè)置樱拴。
作者：敬亭閣主
鏈接：http://www.reibang.com/p/3c8e84c6e67d
來源：簡(jiǎn)書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)晶乔，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
