如何從小程序跳到H5頁(yè)面？下面本篇文章給大家介紹一下微信小程序跳轉(zhuǎn)到H5頁(yè)面的方法，希望對(duì)大家有所幫助！

微信小程序：雖然開(kāi)發(fā)方法類(lèi)似網(wǎng)頁(yè)，但實(shí)際上是一種只能運(yùn)行在微信自己開(kāi)發(fā)的瀏覽器中的特殊網(wǎng)頁(yè)，它所能夠使用的所有功能都必須由微信瀏覽器提供；

H5頁(yè)面：這是真正的網(wǎng)頁(yè)應(yīng)用，運(yùn)行在通用瀏覽器中，各種瀏覽器雖然在細(xì)微上有所差別，但總的來(lái)說(shuō)是一致的，微信瀏覽器同時(shí)也是一種通用瀏覽器，能夠支持真正的網(wǎng)頁(yè)應(yīng)用。

因此我們才有可能在微信小程序和H5頁(yè)面之間進(jìn)行跳轉(zhuǎn)，但這種跳轉(zhuǎn)是受到微信瀏覽器的嚴(yán)格控制的，因此我們有必要了解這些控制包括哪些。

H5頁(yè)面所在的域名：假設(shè)你需要調(diào)轉(zhuǎn)的H5頁(yè)面URL為https://www.mysite.com/h5page，那么這里所說(shuō)的域名就是www.mysite.com，另外你沒(méi)有看錯(cuò)，這個(gè)URL必須是https，如果你還沒(méi)有為你的網(wǎng)站加上SSL，那么就先去申請(qǐng)一個(gè)證書(shū)吧（注意必須是公開(kāi)申請(qǐng)的證書(shū)，不能是自簽名的，微信不認(rèn)哦?。?/p>

好了，這些都準(zhǔn)備好了，讓我們開(kāi)始開(kāi)發(fā)一個(gè)小例子。

由于web-view組件是一個(gè)全屏組件，不能和其它小程序組件合用，因此需要獨(dú)立占據(jù)一個(gè)頁(yè)面，所以我們到例子就是在小程序的A頁(yè)面加一個(gè)鏈接，跳轉(zhuǎn)到B頁(yè)面，然后在B頁(yè)面使用web-view組件來(lái)加載H5頁(yè)面。

A頁(yè)面

<view class="answerer flex-wrp" bindtap=&#39;jumpToH5&#39;>
        <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頁(yè)面

<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)頁(yè)開(kāi)發(fā)者

這是什么鬼，原來(lái)使用web-view組件并不是啥人上來(lái)就允許使用的，這時(shí)候需要第一個(gè)授權(quán)，就是授權(quán)開(kāi)發(fā)者使用該組件。這里比較扯淡的是雖然這個(gè)組件是小程序使用的，但并不能在小程序開(kāi)發(fā)號(hào)里面設(shè)置，而必須在訂閱號(hào)或者服務(wù)號(hào)中進(jìn)行設(shè)置，網(wǎng)絡(luò)上經(jīng)常能夠查到的下面這個(gè)截圖只能登錄訂閱號(hào)或者服務(wù)號(hào)才能看到。

在這里設(shè)置綁定了開(kāi)發(fā)者的微信號(hào)以后，我們終于可以使用web-view組件了，不過(guò)這時(shí)候又出了新問(wèn)題： 不支持打開(kāi)非業(yè)務(wù)域名

原來(lái)并不是什么網(wǎng)址拿來(lái)就可以設(shè)置跳轉(zhuǎn)的，你的小程序中就不能直接跳轉(zhuǎn)到百度上去，小程序能夠跳轉(zhuǎn)的域名必須在業(yè)務(wù)域名中進(jìn)行注冊(cè)，總算這次是在小程序開(kāi)發(fā)號(hào)里面設(shè)置了，但注意在服務(wù)號(hào)的設(shè)置里也有業(yè)務(wù)域名這個(gè)設(shè)置，不要搞混了（話說(shuō)微信起名也太沒(méi)有想象力了，簡(jiǎn)直是一坨漿糊）。

設(shè)置好了這個(gè)業(yè)務(wù)域名，滿心歡喜地打開(kāi)小程序，點(diǎn)擊鏈接，What！又來(lái)，這次的問(wèn)題變成了：redirect_uri參數(shù)錯(cuò)誤

這時(shí)候控制權(quán)已經(jīng)從小程序轉(zhuǎn)移到了H5頁(yè)面，但微信頁(yè)面跳轉(zhuǎn)內(nèi)部的機(jī)制比較復(fù)雜，涉及到了OAuth認(rèn)證之類(lèi)的，所以這個(gè)錯(cuò)誤已經(jīng)是H5頁(yè)面報(bào)的了，這就需要到H5頁(yè)面關(guān)聯(lián)的服務(wù)號(hào)中去進(jìn)行設(shè)置，這次設(shè)置的項(xiàng)目叫做網(wǎng)頁(yè)授權(quán)域名，在公眾號(hào)設(shè)置的功能設(shè)置里

添加好需要跳轉(zhuǎn)的域名之后，終于能夠看到H5頁(yè)面出現(xiàn)在調(diào)試器上了！

最后普及一下微信公共平臺(tái)三類(lèi)賬號(hào)的區(qū)別

服務(wù)號(hào)：支持最多的Web開(kāi)發(fā)接口和JS開(kāi)發(fā)接口，是最常規(guī)的應(yīng)用開(kāi)發(fā)賬號(hào)；
訂閱號(hào)：發(fā)文章用的，開(kāi)發(fā)接口比較少，很多功能都不支持，是最傻瓜的文章發(fā)布賬號(hào)；
小程序：小程序應(yīng)用的專(zhuān)屬開(kāi)發(fā)賬號(hào)，僅支持對(duì)小程序的開(kāi)發(fā)，有許多設(shè)置還必須到前兩類(lèi)賬號(hào)中去設(shè)置。

【相關(guān)學(xué)習(xí)推薦：小程序開(kāi)發(fā)教程】

以上是淺析如何從小程序跳到H5頁(yè)面？（示例解析）的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！