H5頁面跳轉(zhuǎn)小程序的3種實現(xiàn)方式
前言
實際開發(fā)中，小程序和H5往往有很多業(yè)務場景需要來回跳轉(zhuǎn)，這里主要介紹三種跳轉(zhuǎn)方式供大家參考。場景：微信小程序登錄有時候需要和公眾號進行綁定，獲取公眾號code和appid傳給后臺進行綁定
一、web-view標簽返回小程序
1.小程序啟動頁面只寫web-view標簽跳轉(zhuǎn)到授權(quán)頁面。
<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、把auth.html放到服務器就可以測試訪問，打開小程序默認進入啟動頁面中的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頁面">
<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)成功，開始注冊微信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、公眾號后臺配置好相應的域名和ip白名單，把auth.html放到服務器就可以測試訪問，點擊按鈕，跳轉(zhuǎn)到小程序首頁(標簽中的path屬性)，在onLoad函數(shù)中獲取參數(shù)
三、URL Scheme
該接口用于獲取小程序 scheme 碼，適用于短信、郵件、外部網(wǎng)頁、微信內(nèi)等拉起小程序的業(yè)務場景。通過該接口，可以選擇生成到期失效和永久有效的小程序碼，有數(shù)量限制，目前僅針對國內(nèi)非個人主體的小程序開放。
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)體驗版和開發(fā)板，具體通過env_version參數(shù)設置小程序版本
我這里是寫個html文件通過a標簽訪問
<a href="weixin://dl/business/?t=WqDMv7uIy7g" rel="external nofollow" >跳轉(zhuǎn)小程序</a>
總結(jié)
到此這篇關于H5頁面跳轉(zhuǎn)小程序的3種實現(xiàn)方式的文章就介紹到這了,更多相關H5頁面跳轉(zhuǎn)小程序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章給大家總結(jié)了在.vue文件里cropperjs的使用方法和經(jīng)驗教訓，感興趣的朋友跟隨腳本之家小編學習吧2018-03-03
JavaScript動態(tài)添加數(shù)據(jù)到表單并提交的幾種方式
這篇文章主要介紹了JavaScript動態(tài)添加數(shù)據(jù)到表單并提交,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了小程序的上傳文件接口的注意解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
如果你問我網(wǎng)站中最影響網(wǎng)站打開速度的是什么？我會告訴是網(wǎng)站中的javascript，簡稱JS。模板中引用的JS文件越多，打開速度越慢，這點我深有體會，不信你看看盧松松博客首頁，使勁優(yōu)化后依然有100K的文件2011-12-12
常用Javascript函數(shù)與原型功能收藏(必看篇)
下面小編就為大家?guī)硪黄Ｓ肑avascript函數(shù)與原型功能收藏(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
ES6字符串模板，剩余參數(shù)，默認參數(shù)功能與用法示例
這篇文章主要介紹了ES6字符串模板，剩余參數(shù)，默認參數(shù)功能與用法,結(jié)合具體實例形式分析了ECMAScript6中的6字符串模板，剩余參數(shù)，默認參數(shù)的概念、作用、使用方法與相關注意事項,需要的朋友可以參考下2017-04-04
跨域問題的本質(zhì)是瀏覽器為了保證用戶的一種安全攔截機制,想要解決跨域問題,只需要告訴瀏覽器"我是自己人,不要攔我"就行,下面這篇文章主要給大家介紹了關于最常見的六種跨域解決方案的相關資料,需要的朋友可以參考下2023-04-04
如何在uniapp中獲取可視區(qū)域的高度(uni.getSystemInfo)
這篇文章主要給大家介紹了關于如何在uniapp中獲取可視區(qū)域的高度(uni.getSystemInfo)的相關資料,文中通過圖文以及實例代碼介紹的非常詳細,對大家學習或者使用uniapp具有一定的參考學習價值,需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細介紹了js實現(xiàn)錄音上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
Postman如何實現(xiàn)參數(shù)化執(zhí)行及斷言處理
這篇文章主要介紹了Postman如何實現(xiàn)參數(shù)化執(zhí)行及斷言處理,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07