如何從小程式跳到H5頁面？以下這篇文章跟大家介紹一下微信小程式跳到H5頁面的方法，希望對大家有幫助！

#微信小程式：雖然開發(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頁面所在的網(wǎng)域：假設(shè)你需要調(diào)轉(zhuǎn)的H5頁面URL為https://www.mysite.com/h5page，那麼這裡所說的網(wǎng)域就是www .mysite.com，另外你沒有看錯(cuò)，這個(gè)URL必須是https，如果你還沒有為你的網(wǎng)站加上SSL，那麼就先去申請一個(gè)憑證吧（注意必須是公開申請的證書，不能是自簽名的，微信不認(rèn)哦?。?/p>

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

由於web-view元件是一個(gè)全螢?zāi)辉荒芎推渌〕淌皆嫌?，因此需要?dú)立佔(zhàn)據(jù)一個(gè)頁面，所以我們到例子就是在小程式的A頁加一個(gè)鏈接，跳到B頁面，然後在B頁面使用web-view元件來載入H5頁面。

A頁面

<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頁面

<web-view src="{{link}}" bindmessage="getMessage"></web-view>

  data: {
    link: "https://www.mysite.com/h5page"
  },

這時(shí)候當(dāng)你滿懷希望的點(diǎn)擊連結(jié)時(shí)，會(huì)出現(xiàn)第一個(gè)坎：未綁定網(wǎng)頁開發(fā)者

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

在這裡設(shè)定綁定了開發(fā)者的微訊號以後，我們終於可以使用web-view元件了，不過這時(shí)候又出了新問題： 不支援開啟非業(yè)務(wù)網(wǎng)域名稱

原來不是什麼網(wǎng)址拿來就可以設(shè)定跳轉(zhuǎn)的，你的小程式中就無法直接跳到百度上去，小程式能夠跳轉(zhuǎn)的網(wǎng)域必須在業(yè)務(wù)網(wǎng)域中進(jìn)行註冊，總算這次是在小程式開發(fā)號裡面設(shè)定了，但注意在服務(wù)號的設(shè)定裡也有業(yè)務(wù)網(wǎng)域這個(gè)設(shè)置，不要搞混了（話說微信起名也太沒有想像力了，簡直是一坨漿糊）。

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

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

加入好需要跳轉(zhuǎn)的網(wǎng)域之後，終於能夠看到H5頁出現(xiàn)在偵錯(cuò)器上了！

最後普及一下微信公共平臺(tái)三類帳號的區(qū)別

服務(wù)號碼：支援最多的Web開發(fā)接口和JS開發(fā)接口，是最常規(guī)的應(yīng)用開發(fā)帳號；
訂閱號：發(fā)文章用的，開發(fā)介面比較少，很多功能都不支持，是最傻瓜的文章發(fā)布帳號；
小程式：小程式應(yīng)用的專屬開發(fā)帳號，只支援對小程式的開發(fā)，有許多設(shè)定也必須到前兩類帳號去設(shè)定。

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

以上是淺析如何從小程式跳到H5頁？ （範(fàn)例解析）的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！