首頁 > 文章 > 微信小程式 > 淺析如何從小程式跳到H5頁？（範例解析）

淺析如何從小程式跳到H5頁？（範例解析）

青灯夜游轉載: 2022-01-18 10:01:5614661瀏覽

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

#微信小程式：雖然開發方法類似網頁，但實際上是一種只能運行在微信自己開發的瀏覽器中的特殊網頁，它所能夠使用的所有功能都必須由微信瀏覽器提供；

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=&#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">文章标题</text>
            <text class="answerer-des">文章摘要</text>
        </view>
        <view class="follow flex-item">
            <text>十 关注</text>
        </view>
</view>

jumpToH5: function () {
    wx.navigateTo({
      url: &#39;/pages/B&#39;
    })
  },

B頁面

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

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

這時候當你滿懷希望的點擊連結時，會出現第一個坎：未綁定網頁開發者

淺析如何從小程式跳到H5頁？（範例解析）

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

淺析如何從小程式跳到H5頁？（範例解析）