快捷導(dǎo)航

H5頁(yè)面跳轉(zhuǎn)小程序的3種實(shí)現(xiàn)方式

更新時(shí)間：2023年08月16日 09:47:31 作者：qq_41939902

這篇文章主要給大家介紹了關(guān)于H5頁(yè)面跳轉(zhuǎn)小程序的3種實(shí)現(xiàn)方式,說出來你可能不信,每位商家?guī)缀醵紩?huì)h5轉(zhuǎn)跳到小程序、H5轉(zhuǎn)跳至小程序的應(yīng)用范圍十分廣闊,需要的朋友可以參考下

前言

實(shí)際開發(fā)中，小程序和H5往往有很多業(yè)務(wù)場(chǎng)景需要來回跳轉(zhuǎn)，這里主要介紹三種跳轉(zhuǎn)方式供大家參考。場(chǎng)景：微信小程序登錄有時(shí)候需要和公眾號(hào)進(jìn)行綁定，獲取公眾號(hào)code和appid傳給后臺(tái)進(jìn)行綁定

一、web-view標(biāo)簽返回小程序

1.小程序啟動(dòng)頁(yè)面只寫web-view標(biāo)簽跳轉(zhuǎn)到授權(quán)頁(yè)面。

<template>
	<web-view src="https://www.xxx.cn/auth.html"></web-view>
</template>

2.編寫auth.html

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script type="text/javascript">
		let url = window.location.href;
		if(url.includes(code)) {
			if (wx.miniProgram) {
				wx.miniProgram.reLaunch({
					url: `/pages/home/index?code=${url中的code}&appId=${url中的appid}`,
					success: function() {
						......
					},
					fall: function() {
						......
					}
				})
			}
		} else {
			window.location.
		}
	</script>

3、把a(bǔ)uth.html放到服務(wù)器就可以測(cè)試訪問，打開小程序默認(rèn)進(jìn)入啟動(dòng)頁(yè)面中的webview跳轉(zhuǎn)到H5，授權(quán)成功后，通過wx.miniProgram.reLaunch方法攜帶參數(shù)跳回小程序

二、wx-open-launch-weapp

1.編寫auth.html

<div id="app">
		<wx-open-launch-weapp id="launch-btn" username="原始ID" path="賦值自己的path頁(yè)面">
			<template>
				<button class="btn">跳轉(zhuǎn)小程序</button>
			</template>
		</wx-open-launch-weapp>
	</div>
	<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
	<script type="text/javascript">
		let url = window.location.href;
		//如果url中包含code，說明授權(quán)成功，開始注冊(cè)微信config
		if(url.includes(code)) {
			//通過接口拿到appId,nonceStr,signature,timestamp
			wx.config({
				debug: false,
				appId,
				timestamp,
				nonceStr,
				signature,
				jsApiList: ['chooseImage', 'previewImage'], //必寫，否則不顯示
				openTagList: ['wx-open-launch-weapp']//必寫，否則不顯示
			});
		} else {
			window.location.
		}
	</script>

2、公眾號(hào)后臺(tái)配置好相應(yīng)的域名和ip白名單，把a(bǔ)uth.html放到服務(wù)器就可以測(cè)試訪問，點(diǎn)擊按鈕，跳轉(zhuǎn)到小程序首頁(yè)(標(biāo)簽中的path屬性)，在onLoad函數(shù)中獲取參數(shù)

三、URL Scheme

該接口用于獲取小程序 scheme 碼，適用于短信、郵件、外部網(wǎng)頁(yè)、微信內(nèi)等拉起小程序的業(yè)務(wù)場(chǎng)景。通過該接口，可以選擇生成到期失效和永久有效的小程序碼，有數(shù)量限制，目前僅針對(duì)國(guó)內(nèi)非個(gè)人主體的小程序開放。

1.HTTPS 調(diào)用

 POST https://api.weixin.qq.com/wxa/generatescheme?access_token=ACCESS_TOKEN

2.返回示例

{
  "msg": "操作成功",
  "code": 200,
  "data": {
    "openlink": "weixin://dl/business/?t=WqDMv7uIy7g"
  }
}

3.調(diào)用，微信內(nèi)打開跳轉(zhuǎn)的是正式版，微信外可以跳轉(zhuǎn)體驗(yàn)版和開發(fā)板，具體通過env_version參數(shù)設(shè)置小程序版本

我這里是寫個(gè)html文件通過a標(biāo)簽訪問

<a href="weixin://dl/business/?t=WqDMv7uIy7g" rel="external nofollow" >跳轉(zhuǎn)小程序</a>

總結(jié)

到此這篇關(guān)于H5頁(yè)面跳轉(zhuǎn)小程序的3種實(shí)現(xiàn)方式的文章就介紹到這了,更多相關(guān)H5頁(yè)面跳轉(zhuǎn)小程序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: