H5、App、外部网页、短信等场景跳转到微信小程序方案

前言

之前H5与小程序的生态是完全隔离的，为了引导用户和开发者到小程序环境，所以对于互相跳转支持的不是很好，发展4年多，这方面的支持也逐渐完善了，各种场景平台也能比较容易的与微信小程序互相打通了

场景与方案

1、H5跳转微信小程序

相信这个场景是绝大部分小伙伴们遇到的问题，这里提供3种方案：

1）在微信浏览器内的H5页面跳转小程序

采用微信浏览器内置的开放标签：wx-open-launch-weapp

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index?user=123&action=abc"
>
  <script type="text/wxtag-template">
    <style>.btn { padding: 12px }</style>
    <button class="btn">打开小程序</button>
  </script>
</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>

2）外部网页的H5页面跳转小程序

采用 URL Scheme 的方式：url-scheme

通过服务端接口获取相应的URLScheme，和之前的小程序二维码生成类似，可绑定小程序任意页面，会生成如下的内容：

weixin://dl/business/?t=*TICKET*

3）小程序webview内的H5页面跳转小程序其他页面

采用微信官方提供的web-view配套的JSSDK 1.3.2接口跳转小程序页面

2、App跳转微信小程序

这个接入微信的OpenSDK：App拉起小程序功能

3、短信、邮件、微信内跳转微信小程序

采用 URL Scheme 的方式：url-scheme
或
采用 URL Link 的方式：url-link