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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容