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

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

寫這個是因?yàn)樽罱〕绦虻囊粋€需求需要從小程序跳轉(zhuǎn)到客戶的官網(wǎng),或者其他外部報(bào)名鏈接,下面這篇文章主要給大家介紹了關(guān)于微信小程序跳轉(zhuǎn)外部鏈接的詳細(xì)實(shí)現(xiàn)方法,需要的朋友可以參考下

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

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

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

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

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

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

2、不勾選 “不校驗(yàn)合法域名”

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

3、刷新項(xiàng)目配置

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è)置當(dāng)前標(biāo)題
    wx.setNavigationBarTitle({
      title: options.title,
    })
  },

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

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

  //跳轉(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è)置當(dāng)前標(biāo)題
    wx.setNavigationBarTitle({
      title: options.title,
    })
  },