有(yǒu)時(shí)候,因為(wèi)業(yè)務需求₹β¥≠,在小(xiǎo)程序當中,需要(yào)跳(tiào)轉到(dào) h5 網頁,或跳(tià÷★o)轉到(dào)公衆号,形成流量的(de)閉環,那(nà)在小(xiǎo)程序當中怎麽實₽≠現(xiàn)呢(ne)?

前提條件(jiàn)

• 該小(xiǎo)程序與需要(yào)跳(tiào)轉至的(¥ £≠de)公衆号(訂閱号/服務号)進行(xíng)了(le)綁定關聯
• 使用(yòng)小(xiǎo)程序開(kāi)放(fàng)&​>能(néng)力web-view實現(xiàn)跳(tiào)轉(承載網頁的(de)容器䀕&(qì)。會(huì)自(zì)動鋪滿整個(gè)小(∞ε&☆xiǎo)程序頁面，個(gè)人(rén)類型的(de)小(xiǎo)程序暫不(bù)支持使™₽用(yòng))

web-view提供了(le)一(yī)個(gè)src屬性,這(zhè)個(gè)src屬性就(jiù)是(shì)可(kě)以從(cóng)小(xiǎo• ©€)程序跳(tiào)轉到(dào)指定鏈接的(de)地(dì)♦≥λ'止

注意

使用(yòng)webview時(shí),需要(yào)單獨的(de)在小(xiǎo)程•∏ 序中創建一(yī)個(gè)頁面,要(yào)在app.json中的(de)pages中注冊,如(rú)下(xià)所示,然後在webview中的(de)wxml中使用(yòng)webview标簽,在webview标簽上(shàng)設置的(de)src屬性就(jiù)是(shì)要(yào)跳(tiào)轉的(de)地(dì)Ω↑ ∞止

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

複制(zhì)代碼

在觸發事(shì)件(jiàn)處:綁定事(shì)件(jiàn)

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

以下(xià)是(shì)邏輯代碼

// pages/handletowebview/ha♥↓•↔ndletowebview.js
Page({
  /**
   * 頁面的(de)初始數(shù)據♣¥φ
   */
  data: {},

  /**
   * 生(shēng)命周期函數(shù)--監聽(tīng)頁面加載
   *≈'/
  onLoad: function(options) {},

  handleToWxPublic() {
    const url = 'https://mp.weixin.qq.com/s/EgSgGqMWoφ¥V4nrt7qPF9nzA'; // 跳(tiào)轉的(de)地(dì)止,這(zhè)裡(lǐ)寫你(n✔§ǐ)想要(yào)跳(tiào)轉的(de)公衆号地(dì)止即γ≠'β可(kě)
    const navtitle = 'itclanCoder'; // 小(xiǎo)程序跳(tiào)轉到(dào)公衆号頁面顯示的(de)标題
    wx.navigateTo({
      // 跳(tiào)轉到(dào)webview頁面
      url: `/pages/webview/webview?url=${url}&nav=${navtitle}`,
    });
  },

  handleToW•♦↕≈ebSite() {
    const url = 'https://coder.itclan.cn/'; // 跳(tiào)轉的(de)外(wài)鏈
    const navtitle = 'itclanCoder'; // 這(zhè)個(gè)标題是(shì)你(nǐ)自¶↓λ(zì)己可(kě)以設置的(de)
    wx.navigateTo({
      // 跳(tiào)轉到(dào)webview頁面
      url: `/pages/webview/webview?url=${url}&nav=${navtitle}`,
    });
  },
});
複制(zhì)代碼

上(shàng)面示例代碼中的(de)跳(tiào)<<∞轉的(de)參數(shù)url,nav在另一(yī)個(gè)頁面webview中的(de)onLoad生(shēng)命周期函數(shù)中的(de)options參數(shù)中可(kě)以接收得(de)到(dào)✘ ♣→,重新賦新值即可(kě)

在webview頁面中,示例代碼如(rú)下(xià)所示

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

webview的(de)邏輯頁面

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

  /**
   * 生(shēng)命周期函數(sh↔•ù)--監聽(tīng)頁面加載
   */
  onLoad: function(options) {
    this.setData({
      url: options.url, // 從(cóng)跳(tiào)轉頁面中傳過來(lái)的(de)url在option♦∞"s中可(kě)以拿(ná)到(dào)
    });
    wx.setNavigationBarTi₩£↑♣tle({
      title: options.nav,
    });
  },
});
複制(zhì)代碼

如(rú)上(shàng)代碼就(jiù)可(kě)以實現(xiàn)小(xiǎo ∑✔‍)程序跳(tiào)轉到(dào)公衆号

小(xiǎo)程序實現(xiàn)跳(tiào)轉到(dào) H5 網頁λ∏

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

注意

跳(tiào)轉到(dào)的(de)網頁需要(yào)在小(xiǎ♦♦εo)程序後配置支持業(yè)務域名即可(kě)完成跳(tiào)∞γ轉,否則是(shì)跳(tiào)轉失敗的(de)

如(rú)下(xià)所示,跳(tiào)轉至https://coder.itclan.cn/:

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

複制(zhì)代碼

可(kě)能(néng)會(huì)遇到(dào)的(de)問(wèn)題

• 小(xiǎo)程序跳(tiào)轉指定的(de)公衆号‌≠ ✘失敗
• 小(xiǎo)程序跳(tiào)轉指定的(de) h5 頁面失敗

原因

• 跳(tiào)轉的(de)公衆号需要(yào)關聯該小(xiǎo)程序,才✘≠​​支持小(xiǎo)程序的(de)跳(tiào)轉
• 小(xiǎo)程序後台管理(lǐ)沒有(yǒu)配置添加業(yè)務域名(如( φrú)果隻是(shì)測試的(de)話(huà),可(kě)以在開(kāi)發者工(gōng)©✔ ¥具裡(lǐ)設置本地(dì)域名不(bù)校(xiào)驗合法域名webview等)

結論

出于安全性的(de)的(de)考慮,webview做(zuò)了(le)一(yī)些(xiē)限制(zhì),使用(yòng)webv iew一(yī)般而言,比較适合那(nà)種頻(pín)繁©&改動的(de)活動頁,或者在小(xiǎo)程序當中難以實現(xiàn)的(de)業(yè)務,從≥→(cóng)而選擇h5來(lái)代替,至于是(shì)使用(yòng)原 α₽生(shēng)還(hái)是(shì)h5,具體(&♣∞tǐ)還(hái)是(shì)得(de)看(kàn)業(yè)務場&​π(chǎng)景

比如(rú):小(xiǎo)程序對(duì)于畫(huà)布,頻(♦£σ pín)繁的(de)繪制(zhì)會(huì)很(hěn)消耗 ₹​§性能(néng),有(yǒu)時(shí)候,使用(yòng)h5就(jiù)很§ ‌(hěn)适合,在小(xiǎo)程序中嵌入webview就(jiù)比較适合的(de)