微信小程式跳轉外部連結的詳細實現方法

2022-10-20 14:01:28

微信小程式跳轉外部連結

在開發小程式過程中，我們可能會有這樣的需求，在小程式中開啟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,
    })
  },

總結

到此這篇關於微信小程式跳轉外部連結的文章就介紹到這了,更多相關微信小程式跳轉外部連結內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！