① 小程序頁面跳轉方式
小程序頁面的跳轉方式有多種,以下是常見的四種操作:
首先,wx.navigateTo(OBJECT)是最常見的跳轉方式,官方描述為「在當前頁面的基礎上跳轉到其他頁面」,類似HTML的window.location.href,例如:wx.navigateTo({ url: 'test?id=1' })。小程序頁面左上角通常有返回箭頭,可返回上一個頁面。另外,wx.navigateBack方法可用於返回原頁面。
wx.redirectTo(OBJECT)則是關閉當前頁面並跳轉,類似於window.open。例如:wx.redirectTo({ url: 'test?id=1' }),不同之處在於左上角無返回箭頭,不能直接返回上一個頁面。
wx.switchTab(OBJECT)用來切換到 tabBar 頁面,關閉其他非 tabBar 頁面,例如:{ "tabBar": { "list": [ ... ] } },wx.switchTab({ url: '/index' })。注意,wx.navigateTo和wx.redirectTo不能跳轉到 tabBar,而switchTab則是唯一的選擇。
wx.reLaunch(OBJECT)功能更為特殊,它會關閉所有頁面並打開指定頁面,與wx.redirectTo相似,但沒有返回箭頭。不過,getCurrentPages方法在reLaunch後的頁面堆棧管理上有所不同:reLaunch會清空堆棧。
② 如何實現微信小程序頁面跳轉功能
微信小程序頁面跳轉功能讓開發者能輕松鏈接不同小程序或公眾號,滿足多樣化的功能需求。實現這一功能分為跳轉小程序和跳轉公眾號兩部分。
跳轉小程序主要在已發布成功的小程序中進行。首先,通過選擇小程序製作工具如「上線了」,注冊賬號並選擇模板,添加所需功能版塊。發布小程序後,進入編輯器,選擇圖片banner或快捷按鈕版塊,設置「跳轉小程序」鏈接類型,選擇已發布的上線了小程序或輸入跳轉小程序的APPID,完成配置。
跳轉公眾號同樣在小程序編輯器內進行,通過設置微信小程序賬號,掃碼關注公眾號,即可在小程序底部顯示公眾號入口。商家在公眾號自定義菜單欄添加小程序鏈接,粉絲即可在公眾號底部直接訪問小程序。
值得注意的是,微信小程序目前僅支持HTTPS頁面跳轉至外部鏈接。
通過跳轉功能,小程序與公眾號、外部鏈接形成信息互通,有助於商家擴大業務范圍,拓寬線上流量渠道。在私域流量時代,實現信息共享對於提升用戶黏性、優化用戶體驗具有重要意義。
③ 微信小程序使用navigator實現頁面跳轉功能
在微信小程序開發中,navigator組件主要用於實現頁面之間的跳轉功能。頁面之間的跳轉方式主要分為五種:默認方式打開新的頁面、替換當前頁面、重新載入當前頁面、關閉當前頁面和關閉當前頁面並攜帶參數。
首先,navigator的默認方式打開新的頁面,等效於在view標簽中綁定點擊事件。例如,如果在A頁面中點擊按鈕打開B頁面,可以使用navigator組件,設置url屬性為B頁面的路徑,並設置open-type為"navigate"。
其次,redirect可以替換當前頁面,其open-type取值為"redirect",類似於HTML中的a標簽的跳轉方式。
reLaunch則會重新載入當前頁面,open-type取值為"reLaunch"。這種跳轉方式會關閉所有頁面,打開指定頁面。
另外,navigator組件還支持關閉當前頁面。在A頁面中,可以直接使用navigator標簽嵌套,設置open-type為"navigateBack",在點擊時會關閉當前頁面,返回上一層。
如果需要在關閉當前頁面時攜帶參數,可以使用navigateBack方法,並設置delta參數。在B頁面中,通過getCurrentPages()方法獲取當前頁面棧的信息,獲取到上一個頁面的page對象後,可以修改其數據,實現數據回傳。
最後,解決微信小程序navigator點擊無法跳轉的問題。在開發過程中,經常會遇到頁面跳轉不成功的情況,這可能是由於在app.json中配置了TabBar,並且其中已經包含了路徑。此時,在其他地方再次使用相同的路徑進行跳轉,不會發生跳轉,也不會報錯。解決方法是刪除tabbar下的對應路徑,然後再嘗試跳轉。