微信小程序跳转外部链接的详细实现方法
更新时间：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,
})
},
总结
到此这篇关于微信小程序跳转外部链接的文章就介绍到这了,更多相关微信小程序跳转外部链接内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
控制台报错:Cannot access 'xxx' before initializatio
这篇文章主要给大家介绍了关于控制台报错:Cannot access 'xxx' before initialization的解决方法,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了在JavaScript中运行.NET Core代码详情，DotNetJS可以将C#项目编译为与任何环境兼容的单文件JavaScript库，变可以在JavaScript中运行.NET Core代码，相关操作分享详情，需要的小伙伴可以参考一下2022-04-04
有关IE6下拉框图层问题，一直困扰着大家，下面有个不错的方法大家可以尝试操作下2014-01-01
许多人对JavaScript的原型及原型链仍感到困惑，网上的文章又大多长篇大论，令读者不明觉厉。下面小编将用最简洁明了的图文介绍JavaScript的原型及原型链。2016-08-08
这篇文章主要为大家详细介绍了JavaScript实现文字展开和收起效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要为大家详细介绍了js实现图片放大并跟随鼠标移动特效，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-01-01
这篇文章主要介绍了javacript使用break内层跳出外层循环的用法,以实例形式对比分析了循环跳出break语句的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了JS获取图片lowsrc属性的方法,涉及javascript操作网页图片属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-04-04
js 日期对象的一些方法总结2009-05-05
在日常开发中我们可能会遇到返回的数据不能直接使用,而数据提供者只给你传递二维数据格式的数据,这个时候就需要我们做转换,这篇文章主要给大家介绍了关于js实现一维数组转化为二维数组的两种简单方法,需要的朋友可以参考下2023-12-12
最新评论