业务需求:
比如某公司的小程序要举办一次宣传或促销活动,为微信小程序引流,除了通过微信、朋友圈宣传,还需要非微信环境的渠道,比如短信、app、h5链接分享,用户通过点击直接跳转到微信小程序。
场景一、微信外网页
先说结论:
可以从短信、邮件、微信外网页等场景打开小程序。
参考链接:
文档:URL Scheme打开小程序
使用步骤
在小程序管理后台-工具-生成URL Scheme,生成的URL Scheme如下所示:(示例)
weixin://dl/business/?ticket=la0041f2cedf9630c9c7cc8c8715ac0c6
iOS系统支持识别URL Scheme,可在短信等应用场景中直接通过Scheme跳转小程序。
Android系统不支持直接识别URL Scheme,用户无法通过Scheme正常打开小程序,开发者需要使用H5页面中转,再跳转到Scheme实现打开小程序,跳转代码示例如下:
location.href = 'weixin://dl/business/?ticket=la0041f2cedf9630c9c7cc8c8715ac0c6'
该跳转方法可以在用户打开H5时立即调用,即无感跳转小程序。
也可以通过一个宣传页面,在用户触发点击事件后调用。
注意:此方法仅针对国内非个人主体小程序开放。
场景二、微信公众号
结论:可通过关联小程序,通过自定义菜单跳转。
通过公众号管理后台关联小程序,并在自定义菜单中配置即可。
场景三、微信内网页
结论:
可通过开放标签打开微信小程序。
参考链接:
文档:开放标签
使用步骤
微信开放标签使用步骤与微信JS-SDK类似,也需要引入JS文件等步骤。
所有开放标签都能像普通的HTML标签一样在页面中直接使用,不需要再进行额外的处理。
跳转小程序:wx-open-launch-weapp
用于页面中提供一个可跳转指定小程序的按钮。使用此标签后,用户需在网页内点击标签按钮方可跳转小程序
<wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxxxxx"
path="pages/home/index?user=123&action=abc"
>
<template>
<style>.btn { padding: 12px }</style>
<button class="btn">打开小程序</button>
</template>
</wx-open-launch-weapp>
<script>
var btn = document.getElementById('launch-btn');
btn.addEventListener('launch', function (e) {
console.log('success');
});
btn.addEventListener('error', function (e) {
console.log('fail', e.detail);
});
</script>
场景四、APP
结论:
可以通过App分享小程序卡片到微信,然后在微信上点击小程序卡片打开小程序。
也可以通过App主动调用api 打开小程序。
参考链接:
博客:app唤起小程序
使用步骤:
开发者在App中在集成微信SDK后,可调用接口实现
场景五、APP内网页(混合开发)
同场景一,使用location.href即可
location.href = 'weixin://dl/business/?ticket=la0041f2cedf9630c9c7cc8c8715ac0c6'