前言
之前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