前言
之前H5與小程序的生態(tài)是完全隔離的,為了引導(dǎo)用戶和開發(fā)者到小程序環(huán)境佳鳖,所以對(duì)于互相跳轉(zhuǎn)支持的不是很好霍殴,發(fā)展4年多,這方面的支持也逐漸完善了系吩,各種場(chǎng)景平臺(tái)也能比較容易的與微信小程序互相打通了
場(chǎng)景與方案
1来庭、H5跳轉(zhuǎn)微信小程序
相信這個(gè)場(chǎng)景是絕大部分小伙伴們遇到的問題,這里提供3種方案:
1)在微信瀏覽器內(nèi)的H5頁(yè)面跳轉(zhuǎn)小程序
采用微信瀏覽器內(nèi)置的開放標(biāo)簽: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)外部網(wǎng)頁(yè)的H5頁(yè)面跳轉(zhuǎn)小程序
采用 URL Scheme 的方式:url-scheme
通過服務(wù)端接口獲取相應(yīng)的URLScheme穿挨,和之前的小程序二維碼生成類似月弛,可綁定小程序任意頁(yè)面,會(huì)生成如下的內(nèi)容:
weixin://dl/business/?t=*TICKET*
3)小程序webview內(nèi)的H5頁(yè)面跳轉(zhuǎn)小程序其他頁(yè)面
采用微信官方提供的web-view配套的JSSDK 1.3.2接口跳轉(zhuǎn)小程序頁(yè)面
2科盛、App跳轉(zhuǎn)微信小程序
這個(gè)接入微信的OpenSDK:App拉起小程序功能
3帽衙、短信、郵件贞绵、微信內(nèi)跳轉(zhuǎn)微信小程序
采用 URL Scheme 的方式:url-scheme
或
采用 URL Link 的方式:url-link