实现通过短信中的链接打开⼩程序
在开发⼩程序的过程中，我遇到了这样的⼀个需求，通过短信中的链接打开⼀个h5，这个h5可以实现点击跳转⼩程序，或者扫码跳转，并且将链接上的参数填充到⼩程序界⾯上。下⾯来描述⼀下我的开发步骤及实现⽅案。
这个需求⼤部分的功能是基于 h5 页⾯实现的，所以⾸先进⾏对 h5 页⾯的攻破。样式部分不多说，开始攻破两⼤功能点。
1. 通过点击按钮跳转⼩程序
点击按钮跳转即通过链接实现跳转，这⾥使⽤了⼩程序官⽅ api -
在这个api中提到获取 URL Scheme 需要 access_token。
access_token，是⼩程序全局唯⼀后台接⼝调⽤凭据。需要通过官⽅ api - 去调取，⽂档中提⽰ access_token 有效期是 2个⼩时，所以我将获取的 access_token 存储在 redis 中，并设定过期时间，避免反复调⽤造成 access_token 刷新，产⽣不必要的冲突。
下⾯是获取 accessToken 的代码实现：
中元节寄语
const getAccessToken=(appId, appSecret)=>{
return new Promise((resolve, reject)=>{
// 从 redis 中查是否有 accessToken，如果 accessToken 过期，则获取不到 accessToken
getRedisData(appId).then((accessToken)=>{
if(!!accessToken){
// 有 accessToken 则直接返回
pep小学英语五年级下册期中试卷resolve(accessToken);
}else{
// 没有则通过接⼝重新获取 accessToken
request({
url:`api.weixin.qq/cgi-bin/token?grant_type=client_credential&appid=${appId}&secret=${appSecret}`,
method:'GET',
timeout:5000琢磨的近义词是什么
},(err, response, body)=>{
body =JSON.parse(body);
if(err ||!body)reject({errCode:-10, errInfo: String()});
if(body.access_token){
let accessToken = body.access_token;
// 获取后将 accessToken 存储在 redis 中，并设定过期时间，如果过期，则获取不到 accessToken
setRedisDataEx(appId, accessToken, pires_in);
resolve(accessToken);
}else{
reject({errCode: de, errInfo: sg});
得物可以退货吗?}
});
}
});
});
}
下⾯是获取 URL Scheme 代码实现：
const getGenerateScheme=(req, res)=>{
let{ tenantCode,...rest }= req.body;
// rest 为⽂档中的剩余参数
let cfg = config[tenantCode];// cfg中存储了⼩程序的 appId 及 appSecret
if(!cfg)return res.send(getErrInfo(errCode.ERR_PARAMETER_UNAVAILABLE,'tenantCode'))
let{ appId, appSecret }= cfg
getAccessToken(appId, appSecret).then((accessToken)=>{// 获取 accessToken
const params ={
...rest
}
request({
url:`api.weixin.qq/wxa/generatescheme?access_token=${accessToken}`,
method:'POST',
timeout:5000,
headers:{
'content-type':'application/json',
},
body:JSON.stringify(params)
},(err, response, body)=>{
body =JSON.parse(body);
if(err ||!body)return res.send({errCode:-10, errInfo: String()});
if(body.openlink){
// 获取跳转链接 openlink
let openlink = body.openlink;
return res.send({errCode:0, result: openlink});
}else{
return res.send({errCode: de, errInfo: sg});
}
});
}).catch((err)=>{
return res.send(err);
});
}
上述代码中 rest，即为⽂档中的参数。
调⽤ getGenerateScheme 接⼝后即可获得 URL Scheme，如：weixin://dl/business/?t=LcoXo1wSXIq。
iOS系统⽀持识别URL Scheme，可在短信等应⽤场景中直接通过Scheme跳转⼩程序。
Android系统不⽀持直接识别URL Scheme，⽤户⽆法通过Scheme正常打开⼩程序，我们需要使⽤H5页⾯中转，再跳转到Scheme实现打开⼩程序，跳转代码⽰例如下：
location.href = 'weixin://dl/business/?t=LcoXo1wSXIq
该跳转⽅法可以在打开H5时⽴即调⽤，也可以在⽤户触发事件后调⽤。
2. 通过⽣成的⼆维码图⽚扫码跳转⼩程序
⽣成⼆维码需要⽤到官⽅ api - 。
下⾯是获取带参⼩程序⼆维码图⽚代码：
const getWxaCode=(req, res)=>{
let{ tenantCode,...rest }= req.body;
// rest 为⽂档中的剩余参数
let cfg = config[tenantCode];
if(!cfg)return res.send(getErrInfo(errCode.ERR_PARAMETER_UNAVAILABLE,'tenantCode'))
let{ appId, appSecret }= cfg;// cfg中存储了⼩程序的 appId 及 appSecret
getAccessToken(appId, appSecret).then((accessToken)=>{// 获取 accessToken
const params ={
...rest
}
request({
url:`api.weixin.qq/wxa/getwxacodeunlimit?access_token=${accessToken}`,
method:'POST',
timeout:5000,
headers:{
'content-type':'image/jpeg',
},
encoding:null,
body:JSON.stringify(params)
},(err, response, body)=>{
落花生读后感if(err ||!body)return res.send({errCode:-10, errInfo: String()});
if(body){
const type = response.headers['content-type'];
const img =`data:${type};base64,${String('base64')}`;
return res.send({errCode:0, result: img});
}
});
}).catch((err)=>{
return res.send(err);
});
}
这⾥返回的 body 是 图⽚ Buffer ⽂件，Buffer是⼀个像Array的对象，但它主要⽤于操作字节，也就是⼆进制数据，它的元素为16进制的两位数，即0到255的数值。
request 发送请求的编码格式 encoding，会默认为 UTF-8，⽽对于不能识别的byte串会解码成�，通过将encoding设为null，也就不对原始数据编码，保持原始的⼆进制图⽚数据，即可得到 Buffer ⽂件的正确格式。笔记本无线
获取到 Buffer ⽂件后我⼜将其转换成 base64 的格式，以便前端直接使⽤。
⾄此这个 h5 的功能基本完成点击 看看效果吧！如果如要通过短信发送打开，那么将长链接转换成短链接通过短信发送出去即可。
3. 接收跳转参数
通过接⼝获取的链接及⼆维码，在跳转时会将其余参数转换成页⾯ ? 后⾯的部分，形如 page='pages/index/index?foo=bar'。我们可以在⼩程序的 Launch、Show 和 Load 的回调函数中获取到。
本⽂⾸发于我的博客 欢迎⼤家光临~
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论