微信小程序跳轉(zhuǎn)外部鏈接的詳細實現(xiàn)方法

更新時間：2022年10月18日 16:23:17 作者：周圍都是小趴菜

寫這個是因為最近小程序的一個需求需要從小程序跳轉(zhuǎn)到客戶的官網(wǎng),或者其他外部報名鏈接,下面這篇文章主要給大家介紹了關(guān)于微信小程序跳轉(zhuǎn)外部鏈接的詳細實現(xiàn)方法,需要的朋友可以參考下

微信小程序跳轉(zhuǎn)外部鏈接

在開發(fā)小程序過程中，我們可能會有這樣的需求，在小程序中打開H5或者外部鏈接

實現(xiàn)方法如下：

1、配置業(yè)務(wù)域名

小程序管理后臺——開發(fā)(開發(fā)管理)——開發(fā)設(shè)置：新增業(yè)務(wù)域名

在這里將你需要的外部鏈接域名配置完之后，再下載校驗文件(校驗文件需要放到當前域名的根目錄下)

2、不勾選 “不校驗合法域名”

開發(fā)者工具進行 “不校驗合法域名”配置

3、刷新項目配置

4、打開外部鏈接

以上操作均完成之后，便可以打開外部鏈接

<web-view src="{{src}}"> </web-view>

情況1：外部鏈接沒有帶參數(shù)

  //跳轉(zhuǎn)前處理外部鏈接
   handlePdf(e){
    wx.navigateTo({
      url: '../../outer/outer?src='+e.currentTarget.dataset.url+'&title=合同詳情'
    })
  },

 //跳轉(zhuǎn)后獲取參數(shù)
  data: {
    src:"",
  },
  /**
 * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    this.setData({
      src:options.src
    })
    //設(shè)置當前標題
    wx.setNavigationBarTitle({
      title: options.title,
    })
  },

情況2：外部鏈接帶參數(shù)

encodeURIComponent() 函數(shù)可把字符串作為 URI 組件進行編碼
decodeURIComponent() 函數(shù)可對 encodeURIComponent() 函數(shù)編碼的 URI 進行解碼。

  //跳轉(zhuǎn)前處理外部鏈接
   handlePdf(e){
    let url="https://xxx/#/pdfInfo?url="+e.currentTarget.dataset.url
    wx.navigateTo({
      url: '../../outer/outer?src='+encodeURIComponent(url)+'&title=合同詳情'
    })
  },

  //跳轉(zhuǎn)后獲取參數(shù)
  data: {
    src:"",
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    this.setData({
      src:decodeURIComponent(options.src)
    })
    //設(shè)置當前標題
    wx.setNavigationBarTitle({
      title: options.title,
    })
  },