引言
最近项目要用到短信跳转小程序的功能;因此特意研究一下相关功能
顺便集成跳转小程序的功能到导航网站(dashy)中
参考微信官方文档:短信跳小程序可以实现需求但这里有两大坑
- 它的H5网页我 实测不怎么好用,至少我没研究出来,因此我自己写了简单的跳转代码
- 因2025年3.15导致运营商对短信中的链接要求严格,导致使用 cloudbase.sendsms 接口几乎都无法发送成功(我测试只有手机开启了网络短信功能的手机号能收到短信;其它全是
(MK:100C)运营商关键词拦截)
截止日前我没找到发短信的方法,因此本文只讨论链接跳转小程序功能
解决方案
在安装了微信的客户端中,微信会在设备上注册:weixin://的协议,通过这种格式的链接可以快速打开小程序
协议规范请见官方文档:获取 URL Scheme
URL Scheme有加密和非加密,加密的需要调接口且有时间限制;因此这里讨论的是明文URL Scheme
假如你是小程序的开发者,则在允许的情况下在后台设置明文URL Scheme后可以使用
weixin://dl/business/?appid=*APPID*&path=*PATH*&query=*QUERY*&env_version=*ENV_VERSION*
这样的链接访问小程序
这个链接在手机上正式版体验版都可以跳转;但在PC上只能跳转正式版PC跳转体验版的方法可以通过解析小程序体验版的二维码得到,链接是这样的:
https://open.weixin.qq.com/sns/getexpappinfo?appid=*APPID*&path=*PATH*#wechat-redirect
这个链接只能用微信浏览器打开
非指定小程序的开发人员可以在PC上跳转到指定小程序的正式版,跳转链接可以使用小程序的添加到电脑桌面功能
链接大概是这样weixin://launchapplet?app_id=*APPID*
其中,app_id可以在手机小程序的更多资料中查看
这里给出我写的H5跳转小程序的HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
| <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>正在跳转</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #f5f7fa;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
"PingFang SC", "Microsoft YaHei", sans-serif;
color: #333;
}
.tip {
font-size: 20px;
margin-bottom: 20px;
}
.btn {
padding: 10px 20px;
font-size: 16px;
margin: 10px;
border: none;
border-radius: 6px;
background: #1677ff;
color: #fff;
cursor: pointer;
}
.btn:hover {
background: #0958d9;
}
</style>
</head>
<body>
<div class="tip">正在为你打开微信开发助手…</div>
<button class="btn" id="openBtn">点击立即跳转</button>
<button class="btn" style="visibility: hidden;" id="copyText" onclick="copyText()">复制到剪切板</button>
<script>
const params = new URLSearchParams(window.location.search);
var queryStr=encodeURIComponent(params.toString())
var appid='wxcff7381e631cf54e';
var path='xxx'
var env_version='release'
if(params.has('appid')){
appid=params.get('appid')
params.delete("appid")
}
if(params.has('path')){
params.delete("path")
}
if(params.has('env_version')){
env_version=params.get('env_version')
params.delete("env_version")
}
var queryStr=encodeURIComponent(params.toString())
var ur=`weixin://dl/business/?appid=${appid}&path=${path}&query=${queryStr}&env_version=${env_version}`;
function getTargetUrl() {
return ur;
}
function openTrialShare() {
var ur=`weixin://dl/business/?appid=wxcff7381e631cf54e&path=xxx&query=${queryStr}&env_version=trial`;
console.log('href is ',ur)
window.location.href = ur;
}
function redirect() {
const url = getTargetUrl();
window.location.href = url;
}
function showCopy() {
const url = getTargetUrl();
document.getElementById('copyText').style.visibility='';
}
function copyText() {
navigator.clipboard.writeText(ur)
.then(() => {
alert('已复制到剪切板');
})
.catch(err => {
console.error(err);
alert('复制失败');
});
}
setTimeout(redirect, 1000);
setTimeout(showCopy, 3000);
document.getElementById("openBtn").onclick = redirect;
</script>
</body>
</html>
|
结语
我的初心是替代默认的微信浏览器首页,当前看来还有点差距
参考资料