有時(shí)候,因爲(wéi / wèi)業務需求,在(zài)小程序當中,需要(yào / yāo)跳轉到(dào) h5 網頁,或跳轉到(dào)公衆号,形成流量的(de)閉環,那在(zài)小程序當中怎麽實現呢?

前提條件

• 該小程序與需要(yào / yāo)跳轉至的(de)公衆号(訂閱号/服務号)進行了(le／liǎo)綁定關聯
• 使用小程序開放能力web-view實現跳轉(承載網頁的(de)容器。會自動鋪滿整個(gè)小程序頁面，個(gè)人(rén)類型的(de)小程序暫不(bù)支持使用)

web-view提供了(le／liǎo)一個(gè)src屬性,這(zhè)個(gè)src屬性就(jiù)是(shì)可以(yǐ)從小程序跳轉到(dào)指定鏈接的(de)地(dì / de)止

注意

使用webview時(shí),需要(yào / yāo)單獨的(de)在(zài)小程序中創建一個(gè)頁面,要(yào / yāo)在(zài)app.json中的(de)pages中注冊,如下所示,然後在(zài)webview中的(de)wxml中使用webview标簽,在(zài)webview标簽上(shàng)設置的(de)src屬性就(jiù)是(shì)要(yào / yāo)跳轉的(de)地(dì / de)止

{
  "pages": [
     "pages/webview/webview"
  ]
}

複制代碼

在(zài)觸發事件處:綁定事件

<view>
  <view class="contaniner-1" bindtap="handleToWxPublic">
    點擊跳轉到(dào)itclanCoder公衆号
  </view>
  <view class="contaniner-1" bindtap="handleToWebSite">
    點擊跳轉到(dào)https://coder.itclan.cn/網站
  </view>
</view>
複制代碼

以(yǐ)下是(shì)邏輯代碼

// pages/handletowebview/handletowebview.js
Page({
  /**
   * 頁面的(de)初始數據
   */
  data: {},

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function(options) {},

  handleToWxPublic() {
    const url = 'https://mp.weixin.qq.com/s/EgSgGqMWoV4nrt7qPF9nzA'; // 跳轉的(de)地(dì / de)止,這(zhè)裏寫你想要(yào / yāo)跳轉的(de)公衆号地(dì / de)止即可
    const navtitle = 'itclanCoder'; // 小程序跳轉到(dào)公衆号頁面顯示的(de)标題
    wx.navigateTo({
      // 跳轉到(dào)webview頁面
      url: `/pages/webview/webview?url=${url}&nav=${navtitle}`,
    });
  },

  handleToWebSite() {
    const url = 'https://coder.itclan.cn/'; // 跳轉的(de)外鏈
    const navtitle = 'itclanCoder'; // 這(zhè)個(gè)标題是(shì)你自己可以(yǐ)設置的(de)
    wx.navigateTo({
      // 跳轉到(dào)webview頁面
      url: `/pages/webview/webview?url=${url}&nav=${navtitle}`,
    });
  },
});
複制代碼

上(shàng)面示例代碼中的(de)跳轉的(de)參數url,nav在(zài)另一個(gè)頁面webview中的(de)onLoad生命周期函數中的(de)options參數中可以(yǐ)接收得到(dào),重新賦新值即可

在(zài)webview頁面中,示例代碼如下所示

<!--pages/webview/webview.wxml-->
<view>
  <web-view src="{{url}}"></web-view>
</view>
複制代碼

webview的(de)邏輯頁面

// pages/webview/webview.js
Page({
  /**
   * 頁面的(de)初始數據
   */
  data: {
    url: '', // 頁面中需要(yào / yāo)的(de)數據
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function(options) {
    this.setData({
      url: options.url, // 從跳轉頁面中傳過來(lái)的(de)url在(zài)options中可以(yǐ)拿到(dào)
    });
    wx.setNavigationBarTitle({
      title: options.nav,
    });
  },
});
複制代碼

如上(shàng)代碼就(jiù)可以(yǐ)實現小程序跳轉到(dào)公衆号

小程序實現跳轉到(dào) H5 網頁

小程序跳轉到(dào) H5 網頁,與跳轉公衆号類似,隻需要(yào / yāo)把上(shàng)面的(de)url地(dì / de)止切換成自己想要(yào / yāo)的(de)鏈接即可

注意

跳轉到(dào)的(de)網頁需要(yào / yāo)在(zài)小程序後配置支持業務域名即可完成跳轉,否則是(shì)跳轉失敗的(de)

如下所示,跳轉至https://coder.itclan.cn/:

handleToWebSite() {
    const url = 'https://coder.itclan.cn/'; // 跳轉的(de)外鏈
    const navtitle = 'itclanCoder'; // 這(zhè)個(gè)标題是(shì)你自己可以(yǐ)設置的(de)
    wx.navigateTo({
      // 跳轉到(dào)webview頁面
      url: `/pages/webview/webview?url=${url}&nav=${navtitle}`,
    });
  }

複制代碼

可能會遇到(dào)的(de)問題

• 小程序跳轉指定的(de)公衆号失敗
• 小程序跳轉指定的(de) h5 頁面失敗

原因

• 跳轉的(de)公衆号需要(yào / yāo)關聯該小程序,才支持小程序的(de)跳轉
• 小程序後台管理沒有配置添加業務域名(如果隻是(shì)測試的(de)話,可以(yǐ)在(zài)開發者工具裏設置本地(dì / de)域名不(bù)校驗合法域名webview等)

結論

出(chū)于(yú)安全性的(de)的(de)考慮,webview做了(le／liǎo)一些限制,使用webv iew一般而(ér)言,比較适合那種頻繁改動的(de)活動頁,或者在(zài)小程序當中難以(yǐ)實現的(de)業務,從而(ér)選擇h5來(lái)代替,至于(yú)是(shì)使用原生還是(shì)h5,具體還是(shì)得看業務場景

比如:小程序對于(yú)畫布,頻繁的(de)繪制會很消耗性能,有時(shí)候,使用h5就(jiù)很适合,在(zài)小程序中嵌入webview就(jiù)比較适合的(de)