微信小程序跳轉外部鏈接的詳細實現方法

Posted on by

微信小程序跳轉外部鏈接

在開發小程序過程中，我們可能會有這樣的需求，在小程序中打開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！

推薦閱讀：