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

网友投稿 571 2023-11-10

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

微信小程序跳转外部链接

在开发小程序过程中，我们可能会有这样的需求，在小程序中打开H5或者外部链接

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

实现方法如下：

1、配置业务域名

小程序管理后台——开发(开发管理)——开发设置：新增业务域名

在这里将你需要的外部链接域名配置完之后，再-校验文件(校验文件需要放到当前域名的根目录下)

2、不勾选 “不校验合法域名”

开发者工具进行 “不校验合法域名”配置

3、刷新项目配置

4、打开外部链接

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

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

情况1：外部链接没有带参数

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//跳转后获取参数
data: {
src:"",
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({
src:options.src
})
//设置当前标题
wx.setNavigationBarTitle({
title: options.title,
})
},

情况2：外部链接带参数

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。
?
1
2
3
4
5
6
7
//跳转前处理外部链接
handlePdf(e){
let url="https://xxx/#/pdfInfo?url="+e.currentTarget.dataset.url
wx.navigateTo({
url: ../../outer/outer?src=+encodeURIComponent(url)+&title=合同详情
})
},
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//跳转后获取参数
data: {
src:"",
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({
src:decodeURIComponent(options.src)
})
//设置当前标题
wx.setNavigationBarTitle({
title: options.title,
})
},

总结 

您可能感兴趣的文章:微信小程序跳转到其他网页(外部链接)的实现方法

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：链接 程序 方法 微信小程序 小程序
上一篇:微信小程序 五星评分(包括半颗星评分)实例代码
下一篇:微信小程序实现简单搜索框
相关文章

 发表评论

暂时没有评论，来抢沙发吧~