iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序跳转外部链接的详细实现方法
  • 572
分享到

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

摘要

目录微信小程序跳转外部链接1、配置业务域名2、不勾选 “不校验合法域名”3、刷新项目配置4、打开外部链接总结 微信小程序跳转外部链接 在开发小程序过

微信小程序跳转外部链接

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

总结 

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

--结束END--

本文标题: 微信小程序跳转外部链接的详细实现方法

本文链接: https://www.lsjlt.com/news/169636.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作