日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯網營銷解決方案
從微信小程序到鴻蒙JS開發(fā)-頁面路由

[[383200]]

網站建設哪家好，找創(chuàng)新互聯公司！專注于網頁設計、網站建設、微信開發(fā)、成都小程序開發(fā)、集團企業(yè)網站建設等服務項目。為回饋新老客戶創(chuàng)新互聯還提供了旌德免費建站歡迎大家使用！

想了解更多內容，請訪問：

和華為官方合作共建的鴻蒙技術社區(qū)

https://harmonyos.

在項目中，頁面之間的路由跳轉是十分普遍的。鴻蒙JS開發(fā)提供了四種頁面跳轉的方式（輕量級智能穿戴僅支持replace()），之前的帖子中也有涉及到一些，本文將詳解這四個API并與微信小程序中類似的頁面跳轉方式做比較。

鴻蒙頁面路由需導入router模塊。import router from '@system.router';

1、router.push()&wx.navigateTo()

這兩個方法都是壓棧式跳轉，即將跳轉到的目標頁面“壓”在源頁面上，源頁面不銷毀，按返回鍵即可返回源頁面。

router.push()有兩個參數，uri指定頁面路徑，params指定跳轉攜帶參數。在目標頁面data中只要有與params中即可接收數據，無需寫額外一行代碼。

第一頁 "push 下一頁"按鈕點擊事件：

 
 
 
 
    
  
  
  
  
  1. pushNext() { 
    2.   
  
  
  
  2.      router.push({ 
    3.   
  
  
  
  3.          uri: "pages/two/two", 
    4.   
  
  
  
  4.          params: { 
    5.   
  
  
  
  5.              method: "push" 
    6.   
  
  
  
  6.          } 
    7.   
  
  
  
  7.      }) 
    8.   
  
  
  
  8.  }, 
    9.  
 
 
 

 
 
 
 
    
  
  
  
  
  1. data: { 
    2.   
  
  
  
  2.      method: "", 
    3.   
  
  
  
  3.      count: 0 
    4.   
  
  
  
  4.  }, 
    5.   
  
  
  
  5.  onShow() { 
    6.   
  
  
  
  6.      this.count = router.getLength(); 
    7.   
  
  
  
  7.  }, 
    8.

router.getLength()可獲取頁面棧中頁面數量，鴻蒙頁面棧支持最大數值是32。

此時點擊設備的返回按鈕，即可返回第一頁。

第二頁 "push 下一頁"按鈕點擊事件:

 
 
 
 
    
  
  
  
  
  1. pushNext() { 
    2.   
  
  
  
  2.     router.push({ 
    3.   
  
  
  
  3.         uri: "pages/three/three", 
    4.   
  
  
  
  4.         params: { 
    5.   
  
  
  
  5.             data: { 
    6.   
  
  
  
  6.                 name: "HarmonyOS", 
    7.   
  
  
  
  7.                 type: "phone", 
    8.   
  
  
  
  8.                 method: "push" 
    9.   
  
  
  
  9.             } 
    10.   
  
  
  
  10.         } 
    11.   
  
  
  
  11.     }) 
    12.   
  
  
  
  12. }, 
    13.

帶復雜參數跳轉，也是完全支持的。

微信小程序的wx.navigateTo()方法效果一致，微信小程序中頁面跳轉的參數在url中攜帶，和統(tǒng)一資源定位符的規(guī)則一致。且支持success,fail,complete回調函數，也支持雙向事件的觸發(fā)。

第一頁 "navigateTo 下一頁"點擊事件:

 
 
 
 
    
  
  
  
  
  1. naviNext() { 
    2.   
  
  
  
  2.    wx.navigateTo({ 
    3.   
  
  
  
  3.      url: '../two/two?method=navigateTo', 
    4.   
  
  
  
  4.      success: res => { 
    5.   
  
  
  
  5.        console.log(res) 
    6.   
  
  
  
  6.      } 
    7.   
  
  
  
  7.    }) 
    8.   
  
  
  
  8.  }, 
    9.

第二頁需在onLoad()中手動接收參數，參數被傳遞到options對象中。

 
 
 
 
    
  
  
  
  
  1. onLoad: function (options) { 
    2.   
  
  
  
  2.   this.setData({ 
    3.   
  
  
  
  3.     method: options.method 
    4.   
  
  
  
  4.   }) 
    5.   
  
  
  
  5. }, 
    6.

如需攜帶復雜參數，只能通過events參數傳遞，且只有navigateTo()支持該參數。微信小程序支持頁面棧最大頁面數為10，該方法不支持跳轉到app.json中配置的tabBar頁面。

2、router.replace()&wx.redirectTo()

銷毀當前頁面并跳轉頁面，源頁面在頁面棧中被清除。

router.replace()參數和router.push()一致，這里主要看頁面棧的頁面數。

第一頁"replace 下一頁"點擊事件：

 
 
 
 
    
  
  
  
  
  1. replaceNext() { 
    2.   
  
  
  
  2.     router.replace({ 
    3.   
  
  
  
  3.         uri: "pages/two/two", 
    4.   
  
  
  
  4.         params: { 
    5.   
  
  
  
  5.             method: "replace" 
    6.   
  
  
  
  6.         } 
    7.   
  
  
  
  7.     }) 
    8.   
  
  
  
  8. } 
    9.

第二頁"replace 下一頁"點擊事件：

 
 
 
 
    
  
  
  
  
  1. replaceNext() { 
    2.   
  
  
  
  2.     router.replace({ 
    3.   
  
  
  
  3.         uri: "pages/three/three", 
    4.   
  
  
  
  4.         params: { 
    5.   
  
  
  
  5.             data: { 
    6.   
  
  
  
  6.                 name: "HarmonyOS", 
    7.   
  
  
  
  7.                 type: "phone", 
    8.   
  
  
  
  8.                 method: "replace" 
    9.   
  
  
  
  9.             } 
    10.   
  
  
  
  10.         } 
    11.   
  
  
  
  11.     }) 
    12.   
  
  
  
  12. } 
    13.

連續(xù)點擊replace到第三頁，頁面棧中頁面數始終為1。

此時若點擊設備返回鍵，則是退出APP的效果。

wx.redirectTo()效果類似，左上角返回按鈕變?yōu)?home"按鈕。微信小程序的首頁是不會被銷毀的，從redirectTo轉到的頁面點擊"home"按鈕也可以返回首頁。

 
 
 
 
    
  
  
  
  
  1. rediNext() { 
    2.   
  
  
  
  2.    wx.redirectTo({ 
    3.   
  
  
  
  3.      url: '../two/two?method=redirectTo', 
    4.   
  
  
  
  4.      success: res => { 
    5.   
  
  
  
  5.        console.log(res) 
    6.   
  
  
  
  6.      } 
    7.   
  
  
  
  7.    }) 
    8.   
  
  
  
  8.  }, 
    9.

3、router.back()&wx.navigateBack()

返回上一頁的方法，鴻蒙支持傳頁面path指定返回的頁面路徑。

第三頁"上一頁、回首頁"點擊事件：

 
 
 
 
    
  
  
  
  
  1. back1() { 
    2.   
  
  
  
  2.      router.back(); 
    3.   
  
  
  
  3.  }, 
    4.   
  
  
  
  4.  back2() { 
    5.   
  
  
  
  5.      router.back({ 
    6.   
  
  
  
  6.          path: "pages/index/index" 
    7.   
  
  
  
  7.      }) 
    8.   
  
  
  
  8.  }, 
    9.

back()方法會將頁面棧中返回目標頁面之上的頁面全部清除。如頁面棧中只有1個頁面，back()方法會將APP退出。

微信小程序wx.navigateBack()方法可通過delta參數指定返回幾層頁面，如果 delta 大于現有頁面數，則返回到首頁。

 
 
 
 
    
  
  
  
  
  1. naviBack(){ 
    2.   
  
  
  
  2.   wx.navigateBack({ 
    3.   
  
  
  
  3.     success: res => { 
    4.   
  
  
  
  4.       console.log(res); 
    5.   
  
  
  
  5.     } 
    6.   
  
  
  
  6.   }) 
    7.   
  
  
  
  7. }, 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. naviIndex(){ 
    10.   
  
  
  
  10.   wx.navigateBack({ 
    11.   
  
  
  
  11.     delta: 10, 
    12.   
  
  
  
  12.     success: res => { 
    13.   
  
  
  
  13.       console.log(res); 
    14.   
  
  
  
  14.     } 
    15.   
  
  
  
  15.   }) 
    16.   
  
  
  
  16. }, 
    17.

如果頁面棧中只有1個頁面，此方法將無法觸發(fā)并進入fail回調。但仍可點擊小程序左上角"home"按鈕返回首頁。

4、router.clear()&wx.reLaunch()

router.clear()是清空頁面棧中其余頁面的方法，僅保留當前頁面。

wx.reLaunch()則可以實現清除所有頁面，并轉到特定頁面的方法。小程序首頁仍可以通過點擊"home"按鈕返回。

 
 
 
 
    
  
  
  
  
  1. relaNext() { 
    2.   
  
  
  
  2.   wx.reLaunch({ 
    3.   
  
  
  
  3.     url: '../three/three?method=reLaunch', 
    4.   
  
  
  
  4.     success: res => { 
    5.   
  
  
  
  5.       console.log(res) 
    6.   
  
  
  
  6.     } 
    7.   
  
  
  
  7.   }) 
    8.   
  
  
  
  8. }, 
    9.

5、項目實踐

歡迎頁面跳轉到首頁，使用replace()。

分類->二級分類->商品列表->商品，使用push()。

商品詳情->首頁，使用replace()并clear()掉多余頁面。

想了解更多內容，請訪問：

和華為官方合作共建的鴻蒙技術社區(qū)

https://harmonyos.

 


本文名稱：從微信小程序到鴻蒙JS開發(fā)-頁面路由
轉載來源：http://www.5511xx.com/article/dhjhsio.html