有時(shí)候,因?yàn)闃I(yè)務(wù)需求,在小程序當(dāng)中,需要跳轉(zhuǎn)到 h5 網(wǎng)頁(yè),或跳轉(zhuǎn)到公眾號(hào),形成流量的閉環(huán),那在小程序當(dāng)中怎么實(shí)現(xiàn)呢?

前提條件

• 該小程序與需要跳轉(zhuǎn)至的公眾號(hào)(訂閱號(hào)/服務(wù)號(hào))進(jìn)行了綁定關(guān)聯(lián)
• 使用小程序開(kāi)放能力web-view實(shí)現(xiàn)跳轉(zhuǎn)(承載網(wǎng)頁(yè)的容器。會(huì)自動(dòng)鋪滿(mǎn)整個(gè)小程序頁(yè)面，個(gè)人類(lèi)型的小程序暫不支持使用)

web-view提供了一個(gè)src屬性,這個(gè)src屬性就是可以從小程序跳轉(zhuǎn)到指定鏈接的地止

注意

使用webview時(shí),需要單獨(dú)的在小程序中創(chuàng)建一個(gè)頁(yè)面,要在app.json中的pages中注冊(cè),如下所示,然后在webview中的wxml中使用webview標(biāo)簽,在webview標(biāo)簽上設(shè)置的src屬性就是要跳轉(zhuǎn)的地止

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

復(fù)制代碼

在觸發(fā)事件處:綁定事件

<view>
  <view class="contaniner-1" bindtap="handleToWxPublic">
    點(diǎn)擊跳轉(zhuǎn)到itclanCoder公眾號(hào)
  </view>
  <view class="contaniner-1" bindtap="handleToWebSite">
    點(diǎn)擊跳轉(zhuǎn)到https://coder.itclan.cn/網(wǎng)站
  </view>
</view>
復(fù)制代碼

以下是邏輯代碼

// pages/handletowebview/handletowebview.js
Page({
  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {},

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
   */
  onLoad: function(options) {},

  handleToWxPublic() {
    const url = 'https://mp.weixin.qq.com/s/EgSgGqMWoV4nrt7qPF9nzA'; // 跳轉(zhuǎn)的地止,這里寫(xiě)你想要跳轉(zhuǎn)的公眾號(hào)地止即可
    const navtitle = 'itclanCoder'; // 小程序跳轉(zhuǎn)到公眾號(hào)頁(yè)面顯示的標(biāo)題
    wx.navigateTo({
      // 跳轉(zhuǎn)到webview頁(yè)面
      url: `/pages/webview/webview?url=${url}&nav=${navtitle}`,
    });
  },

  handleToWebSite() {
    const url = 'https://coder.itclan.cn/'; // 跳轉(zhuǎn)的外鏈
    const navtitle = 'itclanCoder'; // 這個(gè)標(biāo)題是你自己可以設(shè)置的
    wx.navigateTo({
      // 跳轉(zhuǎn)到webview頁(yè)面
      url: `/pages/webview/webview?url=${url}&nav=${navtitle}`,
    });
  },
});
復(fù)制代碼

上面示例代碼中的跳轉(zhuǎn)的參數(shù)url,nav在另一個(gè)頁(yè)面webview中的onLoad生命周期函數(shù)中的options參數(shù)中可以接收得到,重新賦新值即可

在webview頁(yè)面中,示例代碼如下所示

<!--pages/webview/webview.wxml-->
<view>
  <web-view src="{{url}}"></web-view>
</view>
復(fù)制代碼

webview的邏輯頁(yè)面

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

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
   */
  onLoad: function(options) {
    this.setData({
      url: options.url, // 從跳轉(zhuǎn)頁(yè)面中傳過(guò)來(lái)的url在options中可以拿到
    });
    wx.setNavigationBarTitle({
      title: options.nav,
    });
  },
});
復(fù)制代碼

如上代碼就可以實(shí)現(xiàn)小程序跳轉(zhuǎn)到公眾號(hào)

小程序?qū)崿F(xiàn)跳轉(zhuǎn)到 H5 網(wǎng)頁(yè)

小程序跳轉(zhuǎn)到 H5 網(wǎng)頁(yè),與跳轉(zhuǎn)公眾號(hào)類(lèi)似,只需要把上面的url地止切換成自己想要的鏈接即可

注意

跳轉(zhuǎn)到的網(wǎng)頁(yè)需要在小程序后配置支持業(yè)務(wù)域名即可完成跳轉(zhuǎn),否則是跳轉(zhuǎn)失敗的

如下所示,跳轉(zhuǎn)至https://coder.itclan.cn/:

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

復(fù)制代碼

可能會(huì)遇到的問(wèn)題

• 小程序跳轉(zhuǎn)指定的公眾號(hào)失敗
• 小程序跳轉(zhuǎn)指定的 h5 頁(yè)面失敗

原因

• 跳轉(zhuǎn)的公眾號(hào)需要關(guān)聯(lián)該小程序,才支持小程序的跳轉(zhuǎn)
• 小程序后臺(tái)管理沒(méi)有配置添加業(yè)務(wù)域名(如果只是測(cè)試的話,可以在開(kāi)發(fā)者工具里設(shè)置本地域名不校驗(yàn)合法域名webview等)

結(jié)論

出于安全性的的考慮,webview做了一些限制,使用webv iew一般而言,比較適合那種頻繁改動(dòng)的活動(dòng)頁(yè),或者在小程序當(dāng)中難以實(shí)現(xiàn)的業(yè)務(wù),從而選擇h5來(lái)代替,至于是使用原生還是h5,具體還是得看業(yè)務(wù)場(chǎng)景

比如:小程序?qū)τ诋?huà)布,頻繁的繪制會(huì)很消耗性能,有時(shí)候,使用h5就很適合,在小程序中嵌入webview就比較適合的