微信小程序跳转外部链接的详细实现方法

 更新时间:2022年10月18日 16:23:17   作者:周围都是小趴菜  
写这个是因为最近小程序的一个需求需要从小程序跳转到客户的官网,或者其他外部报名链接,下面这篇文章主要给大家介绍了关于微信小程序跳转外部链接的详细实现方法,需要的朋友可以参考下

微信小程序跳转外部链接

在开发小程序过程中,我们可能会有这样的需求,在小程序中打开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,
    })
  },

总结 

到此这篇关于微信小程序跳转外部链接的文章就介绍到这了,更多相关微信小程序跳转外部链接内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js实现购物车商品数量加减

    js实现购物车商品数量加减

    这篇文章主要为大家详细介绍了js实现购物车商品数量加减,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • javascript实现数独解法

    javascript实现数独解法

    数独(すうどく,Sūdoku)是一种运用纸、笔进行演算的逻辑游戏。玩家需要根据9×9盘面上的已知数字,推理出所有剩余空格的数字,并满足每一行、每一列、每一个粗线宫内的数字均含1-9,不重复。
    2015-03-03
  • javascript 像素拼图实现代码

    javascript 像素拼图实现代码

    非常不错的像素拼图效果
    2009-04-04
  • JS try catch用法举例之异常处理

    JS try catch用法举例之异常处理

    JavaScript try…catch是我们使用的功能之一,作为Web前端工程师,JavaScript try…catch是我们使用的功能之一,这篇文章主要给大家介绍了关于JS try catch用法举例之异常处理的相关资料,需要的朋友可以参考下
    2024-06-06
  • JS实现简易计算器

    JS实现简易计算器

    这篇文章主要为大家详细介绍了JS实现简易计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • 折叠菜单及选择器的运用

    折叠菜单及选择器的运用

    本文主要介绍了折叠菜单及选择器的运用。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • BootStrap响应式导航条实例介绍

    BootStrap响应式导航条实例介绍

    响应式导航条就是可以在不同的设备下查看不同的效果。这篇文章主要介绍了BootStrap响应式导航条实例介绍的相关资料,小编认为本文介绍的非常的不错,特此分享给大家,供大家参考
    2016-05-05
  • JavaScript仿微博发布信息案例

    JavaScript仿微博发布信息案例

    这篇文章主要为大家详细介绍了JavaScript仿微博发布信息案例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • JS获取鼠标选中的文字

    JS获取鼠标选中的文字

    下面是小编给大家分享的js获取鼠标选中的文字和js获取鼠标选中的值关键代码,大家如果有需要可以参考下
    2016-08-08
  • js/jQuery实现全选效果

    js/jQuery实现全选效果

    这篇文章主要为大家详细介绍了js/jQuery两种代码实现全选效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-06-06

最新评论