最近在研究小程序開發,看了一些官網文檔,我們今天就來學習一下如何跳轉,順便把跳轉過程中的參數傳遞,以及接收賦值到模板中顯示學習了。
首先我們創建一個小程序,填寫項目名稱,以及路徑,這里AppID我用的測試賬號。
我們進入到開發頁面顯示的默認代碼中Pages目錄中只有index和logs,小程序頁面一般都包裹.js文件主要是邏輯層的一些內容,.json文件主要作用是頁面的獨立配置文件,wxml文件主要是我們直觀顯示的頁面相當于html,wxss文件主要是用于頁面的樣式相當于css,不對贅述詳細可以看官方文檔,這里主要講頁面跳轉以及傳參。
我們首先增加一個新的頁面test,創建的時候,系統會自動在app.json中創建一條路由,還有更簡單的辦法,直接在app.json中添加一條路由,系統就會幫你直接創建相對應的內容,這里要注意的是,如果刪除頁面,路由是不會自動刪除的,需要手動刪除一下,路由也是一樣。
接下來我們改造一下首頁的內容,index文件夾中的index.wxml,增加跳轉,小程序中是沒有a標簽的,跳轉的標簽是
除了這種類似于a標簽的跳轉,小程序還集成api按鈕跳轉,只需要在button中設置bindtap參數即可,bindtap這個是小程序的事件綁定,寫法,同樣是在index.wxml中寫,這里js中事件沒有寫報錯,和回調等。關于跳轉有多種api,根據官方文檔,我們文中使用的是navigateTo會保留當前頁面,跳轉到應用內的某個頁面,另外還有redirectTo是會關閉當前頁面,跳轉到應用內的某個頁面,以及navigateBack關閉當前頁面,返回上一頁面或多級頁面等,具體可以查詢一下官網文檔,或者在文章下方回復。
接下來我們講怎么傳遞參數以及接收參數,傳遞很簡單沒什么可說的,直接上代碼了
接下來我們說一下如何接收傳遞過來的參數,接收過來的數據是放在options中的,我們直接用console.log打印一下。
我們在onLoad中可以直接打印出來了,onLoad會在創建頁面的時候執行,所以跳轉之后會直接打印出來。
接下來我們講怎么把傳遞過來的數據顯示出來,需要對js以及wxml文件進行一定的改造,我先改造一下test.wxml
既然要獲取數據就要在js文件中操作,這里要提到setData, 這個函數用于將數據從邏輯層發送到視圖層(異步),同時改變對應的 this.data 的值(同步),看到網上有說用this.data的,官網文檔特別說明了一下,是不行的,原文在這里:直接修改 this.data 而不調用 this.setData 是無法改變頁面的狀態的,還會造成數據不一致。
最后上一張效果圖:
-
APP
+關注
關注
33文章
1577瀏覽量
72787 -
程序
+關注
關注
117文章
3796瀏覽量
81419
發布評論請先 登錄
相關推薦
鴻蒙原生頁面高性能解決方案上線OpenHarmony社區 助力打造高性能原生應用
基于ArkTS語言的OpenHarmony APP應用開發:圖片處理
![基于ArkTS語言的OpenHarmony APP應用<b class='flag-5'>開發</b>:圖片處理](https://file.elecfans.com/web2/M00/26/21/pYYBAGG5jjSALfrEAAAwAa9Oig8799.png)
根據router事件卡片跳轉
鴻蒙Ability Kit(程序框架服務)【UIAbility內和UIAbility間頁面的跳轉】
![鴻蒙Ability Kit(<b class='flag-5'>程序</b>框架服務)【UIAbility內和UIAbility間<b class='flag-5'>頁面</b>的<b class='flag-5'>跳轉</b>】](https://file1.elecfans.com/web2/M00/E4/36/wKgaomY8dayAa1h7AISxmjwFomc292.jpg)
鴻蒙原生應用元服務開發-WEB跨應用跳轉
HarmonyOS實戰開發-如何使用全局狀態保留能力彈窗來實現評論組件。
HarmonyOS實戰開發-如何通過BlendMode屬性來實現掛件和圖片的混合
鴻蒙OS開發實例:【頁面傳值跳轉】
![鴻蒙OS<b class='flag-5'>開發</b>實例:【<b class='flag-5'>頁面</b>傳值<b class='flag-5'>跳轉</b>】](https://file1.elecfans.com/web2/M00/C6/24/wKgZomYFZp2AbhzaAABmTqcI98U971.jpg)
鴻蒙OS開發實例:【工具類封裝-頁面路由】
![鴻蒙OS<b class='flag-5'>開發</b>實例:【工具類封裝-<b class='flag-5'>頁面</b>路由】](https://file1.elecfans.com/web2/M00/C5/D1/wKgZomYChGOAUaiiAADe1d8SeRY102.jpg)
評論