在短信中添加小程序访问链接_短信发送小程序链接

一、背景

最近做了一个招聘小程序，客户希望给用户发送邀约面试短信时可以在短信中添加访问小程序的链接。

二、实现方案

1.查看微信官方文档

明文 URL Scheme


通过查看官方文档我们需要一下步骤

1. 在微信小程序平台配置访问路由（小程序必须为正式版）
   
   参数可以查看小程序代码的pages.json文件
2. 生成链接

weixin://dl/business/?appid=*APPID*&path=*PATH*&query=*QUERY*&env_version=*ENV_VERSION*
1

链接参数说明如下

链接生成后发现在微信可以直接打开唤醒小程序，但是在手机浏览器不能访问该链接。再次查看官方文档。

iOS系统支持识别 URL Scheme，可在短信等应用场景中直接通过Scheme跳转小程序。
Android系统不支持直接识别 URL Scheme，用户无法通过 Scheme 正常打开小程序，开发者需要使用 H5 页面中转，再跳转到 Scheme 实现打开小程序，跳转代码示例如下：
location.href = 'weixin://dl/business/?t= *TICKET*'
1
2
3

三、解决方案

明文URL Scheme格式与密文URL Scheme相同。我们想要ios和android系统都能识别该链接，必须通过一个h5页面调用URL Scheme链接，我们做的小程序刚好有一个pc端。
我们只需要在pc端新增一个页面并且在该页面的create方法中调用
window.location.href = ‘你的URL Scheme’
新增页面的路由需要添加进入白名单

<template>
<div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json,文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import 引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
//这里存放数据
return {

};
},
//计算属性 类似于 data 概念
computed: {},
//监控 data 中的数据变化
watch: {},
//方法集合
methods: {

},
//生命周期 - 创建完成（可以访问当前 this 实例）
created() {
    window.location.href='你的URL Scheme'
},
//生命周期 - 挂载完成（可以访问 DOM 元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有 keep-alive 缓存功能，这个函数会触发

}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共 css 类

</style>
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

在前端permission.js文件中将新页面的路由加入白名单

permission.js

在手机浏览器访问服务器域名/新页面路由