微信小程序web-view環(huán)境下H5跳轉(zhuǎn)小程序頁面方法實(shí)例代碼

更新時(shí)間：2022年08月22日 09:19:52 作者：YZHD

微信小程序是一種全新的連接用戶與服務(wù)的方式,它可以在微信內(nèi)被便捷地獲取和傳播,同時(shí)具有出色的使用體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于微信小程序web-view環(huán)境下H5跳轉(zhuǎn)小程序頁面方法的相關(guān)資料,需要的朋友可以參考下

引言

一般的，web-view組件的src屬性指定的H5頁面之間，可以正常的采用超級鏈接a標(biāo)記對進(jìn)行頁面之間的條轉(zhuǎn)。但是web-view頁面要想通過手指觸碰返回小程序頁面，就無法使用超級鏈接a標(biāo)記了。那么這個(gè)問題應(yīng)該如何解決呢？

1、在H5頁面引入JSSDK

首先需要在H5頁面中引入JSSDK，它可以讓H5頁面的js文件執(zhí)行微信小程序的部分API命令。H5頁面引入JSSDK的代碼如下所示。

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

2、跳轉(zhuǎn)至小程序頁面方法

wx.miniProgram.navigateTo()
wx.miniProgram.navigateBack()
wx.miniProgram.switchTab()
wx.miniProgram.reLaunch()
wx.miniProgram.redirectTo()

上述API的使用與微信小程序中頁面跳轉(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)至小程序頁面的路徑
   success: (res) => {
	  console.log(res);   // 頁面跳轉(zhuǎn)成功的回調(diào)函數(shù)
   },
   fail: (err) => {
	  console.log(err);   // 頁面跳轉(zhuǎn)失敗的回調(diào)函數(shù)
   }
});

// 通過鏈接與小程序通訊傳參
// 靜態(tài)參數(shù)傳輸
wx.miniProgram.navigateTo({
   url:'/pages/index/index?id=1', // id:所需參數(shù)
   success: (res) => {
	  console.log(res);   // 頁面跳轉(zhuǎn)成功的回調(diào)函數(shù)
   },
   fail: (err) => {
	  console.log(err);   // 頁面跳轉(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ù)需放在引號外小程序才可識別）
   success: (res) => {
	  console.log(res);   // 頁面跳轉(zhuǎn)成功的回調(diào)函數(shù)
   },
   fail: (err) => {
	  console.log(err);   // 頁面跳轉(zhuǎn)失敗的回調(diào)函數(shù)
   }
});

注意事項(xiàng)：

跳轉(zhuǎn) tabBar 頁面只可使用 wx.miniProgram.switchTab() 方法，其他方法均無效。
wx.miniProgram.switchTab() 方法不可以攜帶參數(shù)，如跳轉(zhuǎn)頁面為 tabBar 頁面則無法通過跳轉(zhuǎn)路徑實(shí)現(xiàn)H5與小程序之間的傳參。

相應(yīng)小程序官方文檔：

https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html

總結(jié)

本文重點(diǎn)在于對web-view頁面返回小程序頁面進(jìn)行了講解和總結(jié)。在小程序開發(fā)過程中，web-view頁面的實(shí)現(xiàn)還有許多開發(fā)技巧和功能，主要得力于JSSDK的使用。JSSDK的說明文檔如下所示。

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

到此這篇關(guān)于微信小程序web-view環(huán)境下H5跳轉(zhuǎn)小程序頁面的文章就介紹到這了,更多相關(guān)小程序web-view下H5跳轉(zhuǎn)小程序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: