微信小程序跳轉外部鏈接的詳細實現方法
微信小程序跳轉外部鏈接
在開發小程序過程中,我們可能會有這樣的需求,在小程序中打開H5或者外部鏈接
實現方法如下:
1、配置業務域名
小程序管理後臺——開發(開發管理)——開發設置:新增業務域名
在這裡將你需要的外部鏈接域名配置完之後,再下載校驗文件(校驗文件需要放到當前域名的根目錄下)
2、不勾選 “不校驗合法域名”
開發者工具進行 “不校驗合法域名”配置
3、刷新項目配置
4、打開外部鏈接
以上操作均完成之後,便可以打開外部鏈接
<web-view src="{{src}}"> </web-view>
情況1:外部鏈接沒有帶參數
//跳轉前處理外部鏈接 handlePdf(e){ wx.navigateTo({ url: '../../outer/outer?src='+e.currentTarget.dataset.url+'&title=合同詳情' }) },
//跳轉後獲取參數 data: { src:"", }, /** * 生命周期函數--監聽頁面加載 */ onLoad: function (options) { this.setData({ src:options.src }) //設置當前標題 wx.setNavigationBarTitle({ title: options.title, }) },
情況2:外部鏈接帶參數
- encodeURIComponent() 函數可把字符串作為 URI 組件進行編碼
- decodeURIComponent() 函數可對 encodeURIComponent() 函數編碼的 URI 進行解碼。
//跳轉前處理外部鏈接 handlePdf(e){ let url="https://xxx/#/pdfInfo?url="+e.currentTarget.dataset.url wx.navigateTo({ url: '../../outer/outer?src='+encodeURIComponent(url)+'&title=合同詳情' }) },
//跳轉後獲取參數 data: { src:"", }, /** * 生命周期函數--監聽頁面加載 */ onLoad: function (options) { this.setData({ src:decodeURIComponent(options.src) }) //設置當前標題 wx.setNavigationBarTitle({ title: options.title, }) },
總結
到此這篇關於微信小程序跳轉外部鏈接的文章就介紹到這瞭,更多相關微信小程序跳轉外部鏈接內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 微信小程序實現購物車選擇規格顏色效果
- 微信小程序常用功能實例匯總包括上拉刷新,下拉加載,列表數據綁定,輪播,參數傳遞
- 微信小程序實現簡單購物車功能
- 微信小程序實現長按拖拽排序功能
- 微信小程序使用navigator實現頁面跳轉功能