背景

有時候,因為業務需求,在小程序當中,需要跳轉到 h5 網頁,或跳轉到公眾號,形成流量的閉環,那在小程序當中怎么實現呢?

實例效果

前提條件該小程序與需要跳轉至的公眾號(訂閱號/服務號)進行了綁定關聯

使用小程序開放能力web-view實現跳轉(承載網頁的容器。會自動鋪滿整個小程序頁面，個人類型的小程序暫不支持使用)

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

注意

使用webview時,需要單獨的在小程序中創建一個頁面,要在app.json中的pages中注冊,如下所示,然后在webview中的wxml中使用webview標簽,在webview標簽上設置的src屬性就是要跳轉的地止{

"pages": [

"pages/webview/webview"

]

}

復制代碼

在觸發事件處:綁定事件

點擊跳轉到itclanCoder公眾號

點擊跳轉到https://coder.itclan.cn/網站

復制代碼

以下是邏輯代碼// pages/handletowebview/handletowebview.js

Page({

/**

* 頁面的初始數據

*/

data: {},

/**

* 生命周期函數--監聽頁面加載

*/

onLoad: function(options) {},

handleToWxPublic() {

const url = 'https://mp.weixin.qq.com/s/EgSgGqMWoV4nrt7qPF9nzA'; // 跳轉的地止,這里寫你想要跳轉的公眾號地止即可

const navtitle = 'itclanCoder'; // 小程序跳轉到公眾號頁面顯示的標題

wx.navigateTo({

// 跳轉到webview頁面

url: `/pages/webview/webview?url=${url}&nav=${navtitle}`,

});

},

handleToWebSite() {

const url = 'https://coder.itclan.cn/'; // 跳轉的外鏈

const navtitle = 'itclanCoder'; // 這個標題是你自己可以設置的

wx.navigateTo({

// 跳轉到webview頁面

url: `/pages/webview/webview?url=${url}&nav=${navtitle}`,

});

},

});

復制代碼

上面示例代碼中的跳轉的參數url,nav在另一個頁面webview中的onLoad生命周期函數中的options參數中可以接收得到,重新賦新值即可

在webview頁面中,示例代碼如下所示

復制代碼

webview的邏輯頁面// pages/webview/webview.js

Page({

/**

* 頁面的初始數據

*/

data: {

url: '', // 頁面中需要的數據

},

/**

* 生命周期函數--監聽頁面加載

*/

onLoad: function(options) {

this.setData({

url: options.url, // 從跳轉頁面中傳過來的url在options中可以拿到

});

wx.setNavigationBarTitle({

title: options.nav,

});

},

});

復制代碼

如上代碼就可以實現小程序跳轉到公眾號

小程序實現跳轉到 H5 網頁

小程序跳轉到 H5 網頁,與跳轉公眾號類似,只需要把上面的url地止切換成自己想要的鏈接即可

注意

跳轉到的網頁需要在小程序后配置支持業務域名即可完成跳轉,否則是跳轉失敗的

如下所示,跳轉至https://coder.itclan.cn/:handleToWebSite() {

const url = 'https://coder.itclan.cn/'; // 跳轉的外鏈

const navtitle = 'itclanCoder'; // 這個標題是你自己可以設置的

wx.navigateTo({

// 跳轉到webview頁面

url: `/pages/webview/webview?url=${url}&nav=${navtitle}`,

});

}

復制代碼

可能會遇到的問題小程序跳轉指定的公眾號失敗

小程序跳轉指定的 h5 頁面失敗

原因跳轉的公眾號需要關聯該小程序,才支持小程序的跳轉

小程序后臺管理沒有配置添加業務域名(如果只是測試的話,可以在開發者工具里設置本地域名不校驗合法域名webview等)

結論

出于安全性的的考慮,webview做了一些限制,使用webview一般而言,比較適合那種頻繁改動的活動頁,或者在小程序當中難以實現的業務,從而選擇h5來代替,至于是使用原生還是h5,具體還是得看業務場景

比如:小程序對于畫布,頻繁的繪制會很消耗性能,有時候,使用h5就很適合,在小程序中嵌入webview就比較適合的

相關文檔