全场景打开微信小程序

776 阅读2分钟

业务需求

比如某公司的小程序要举办一次宣传或促销活动,为微信小程序引流,除了通过微信、朋友圈宣传,还需要非微信环境的渠道,比如短信、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'