微信小程序web-view環(huán)境下H5跳轉(zhuǎn)小程序頁(yè)面方法實(shí)例代碼
引言
一般的,web-view組件的src屬性指定的H5頁(yè)面之間,可以正常的采用超級(jí)鏈接a標(biāo)記對(duì)進(jìn)行頁(yè)面之間的條轉(zhuǎn)。但是web-view頁(yè)面要想通過(guò)手指觸碰返回小程序頁(yè)面,就無(wú)法使用超級(jí)鏈接a標(biāo)記了。那么這個(gè)問(wèn)題應(yīng)該如何解決呢?
1、在H5頁(yè)面引入JSSDK
首先需要在H5頁(yè)面中引入JSSDK,它可以讓H5頁(yè)面的js文件執(zhí)行微信小程序的部分API命令。H5頁(yè)面引入JSSDK的代碼如下所示。
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
2、跳轉(zhuǎn)至小程序頁(yè)面方法
- wx.miniProgram.navigateTo()
- wx.miniProgram.navigateBack()
- wx.miniProgram.switchTab()
- wx.miniProgram.reLaunch()
- wx.miniProgram.redirectTo()
上述API的使用與微信小程序中頁(yè)面跳轉(zhuǎn)的API使用規(guī)范是一樣的,以wx.miniProgram.navigateTo()為例,該方法的API格式如下所示。
// 判斷當(dāng)前環(huán)境是否為小程序 const ua = navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == 'micromessenger') { wx.miniProgram.getEnv((res) => { if (res.miniprogram) { console.log('在小程序內(nèi)'); } else { console.log('不在小程序內(nèi)'); } }); } else { console.log('不在微信瀏覽器內(nèi)'); } // 小程序跳轉(zhuǎn)方法 wx.miniProgram.navigateTo({ url:'/pages/index/index', // 指定跳轉(zhuǎn)至小程序頁(yè)面的路徑 success: (res) => { console.log(res); // 頁(yè)面跳轉(zhuǎn)成功的回調(diào)函數(shù) }, fail: (err) => { console.log(err); // 頁(yè)面跳轉(zhuǎn)失敗的回調(diào)函數(shù) } }); // 通過(guò)鏈接與小程序通訊傳參 // 靜態(tài)參數(shù)傳輸 wx.miniProgram.navigateTo({ url:'/pages/index/index?id=1', // id:所需參數(shù) success: (res) => { console.log(res); // 頁(yè)面跳轉(zhuǎn)成功的回調(diào)函數(shù) }, fail: (err) => { console.log(err); // 頁(yè)面跳轉(zhuǎn)失敗的回調(diào)函數(shù) } }); // 動(dòng)態(tài)參數(shù)傳輸 let id = 1; wx.miniProgram.navigateTo({ url:'/pages/index/index?id=' + id, // id:所需參數(shù)(動(dòng)態(tài)參數(shù)需放在引號(hào)外小程序才可識(shí)別) success: (res) => { console.log(res); // 頁(yè)面跳轉(zhuǎn)成功的回調(diào)函數(shù) }, fail: (err) => { console.log(err); // 頁(yè)面跳轉(zhuǎn)失敗的回調(diào)函數(shù) } });
注意事項(xiàng):
- 跳轉(zhuǎn) tabBar 頁(yè)面只可使用 wx.miniProgram.switchTab() 方法,其他方法均無(wú)效。
- wx.miniProgram.switchTab() 方法不可以攜帶參數(shù),如跳轉(zhuǎn)頁(yè)面為 tabBar 頁(yè)面則無(wú)法通過(guò)跳轉(zhuǎn)路徑實(shí)現(xiàn)H5與小程序之間的傳參。
相應(yīng)小程序官方文檔:
https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html
總結(jié)
本文重點(diǎn)在于對(duì)web-view頁(yè)面返回小程序頁(yè)面進(jìn)行了講解和總結(jié)。在小程序開(kāi)發(fā)過(guò)程中,web-view頁(yè)面的實(shí)現(xiàn)還有許多開(kāi)發(fā)技巧和功能,主要得力于JSSDK的使用。JSSDK的說(shuō)明文檔如下所示。
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
到此這篇關(guān)于微信小程序web-view環(huán)境下H5跳轉(zhuǎn)小程序頁(yè)面的文章就介紹到這了,更多相關(guān)小程序web-view下H5跳轉(zhuǎn)小程序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
?javascript數(shù)組中的slice方法和join??方法
這篇文章主要介紹了?javascript數(shù)組中的slice方法和join??方法,文章內(nèi)容介紹詳細(xì),具有一的參考價(jià)值,需要的小伙伴可以參考一下,希望對(duì)你的學(xué)習(xí)有所幫助2022-03-03基于 Bootstrap Datetimepicker 聯(lián)動(dòng)
這篇文章主要介紹了基于bootstrap datetimepicker 聯(lián)動(dòng)效果,需要的朋友可以參考下2017-08-08JavaScript原型式繼承實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript原型式繼承實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11List all the Databases on a SQL Server
List all the Databases on a SQL Server...2007-06-06