微信官方文档:获取 URL Scheme | 微信开放文档 (qq.com)
官方文档上说了那么多,也就是,通过调用接口生成Scheme (具体:服务器端调用urlscheme.generate接口生成,此方法又分https调用和云调用,https调用地址POST https://api.weixin.qq.com/wxa/generatescheme?access_token=ACCESS_TOKEN,具体不详细说;云调用是开通了云开发的项目适用 或者下文所说用工具生成)
对于前端来说,写一个H5页面就可以,短信链接跳转此H5页面路径,用手机自带浏览器或者QQ浏览器等打开,(注意不能在微信里用微信内置浏览器(包括企业微信浏览器)打开,否则跳转不过去)都可以自动打开小程序或点击按钮跳转至小程序
1.H5页面代码--vue H5代码--不涉及传参数用工具生成的Scheme
<template>
<div class="url-scheme">
<p style="text-align: center;">正在打开 “展示小程序”...</p>
<div class="button-inner" @click="targetUrl">
打开小程序
</div>
</div>
</template>
<script>
export default{
created() {
window.location.href ='weixin://dl/business/?t=TICKET'//这个路径可以在小程序管理后台-右上角「工具」-「生成 URL Scheme」入口生成
},
methods: {
targetUrl() {
window.location.href ='weixin://dl/business/?t=TICKET'
}
}
}
</script>
<style lang="less">
@import "~@/assets/css/index.less";
.url-scheme{
font-size: 17px;
position: relative;
left: 50%;
top: 50%;
transform:translate(-50%,-50%);
.button-inner{
flex: 1;
background: #07c160;
display: block;
width: 184px;
margin-left: auto;
margin-right: auto;
padding: 8px 24px;
box-sizing: border-box;
font-weight: 700;
font-size: 17px;
text-align: center;
text-decoration: none;
color: #fff;
line-height: 1.41176471;
border-radius: 4px;
overflow: hidden;
color: #fff;
margin-top: 30px;
}
}
</style>
src\views\version03\user-reform\url-scheme.vue
2.H5页面代码--vue H5代码--涉及传参数不能用工具生成的Scheme,应该服务端配合返回Scheme(里面可以有参数)
{
"jump_wxa":
{
"path": "/pages/publishHomework/publishHomework",
"query": "a=1&b=2"
},
"is_expire":true,
"expire_time":1606737600
}
取值就在小程序onLoad(options)生命周期中通过options.a options.b获取