首頁>技術>

最近在研究小程式開發,看了一些官網文件,我們今天就來學習一下如何跳轉,順便把跳轉過程中的引數傳遞,以及接收賦值到模板中顯示學習了。

首先我們建立一個小程式,填寫專案名稱,以及路徑,這裡AppID我用的測試賬號。

我們進入到開發頁面顯示的預設程式碼中Pages目錄中只有index和logs,小程式頁面一般都包裹.js檔案主要是邏輯層的一些內容,.json檔案主要作用是頁面的獨立配置檔案,wxml檔案主要是我們直觀顯示的頁面相當於html,wxss檔案主要是用於頁面的樣式相當於css,不對贅述詳細可以看官方文件,這裡主要講頁面跳轉以及傳參。

我們首先增加一個新的頁面test,建立的時候,系統會自動在app.json中建立一條路由,還有更簡單的辦法,直接在app.json中新增一條路由,系統就會幫你直接建立相對應的內容,這裡要注意的是,如果刪除頁面,路由是不會自動刪除的,需要手動刪除一下,路由也是一樣。

接下來我們改造一下首頁的內容,index資料夾中的index.wxml,增加跳轉,小程式中是沒有a標籤的,跳轉的標籤是<navigator>,這樣就可以正常跳轉到設定好的頁面了。

除了這種類似於a標籤的跳轉,小程式還整合api按鈕跳轉,只需要在button中設定bindtap引數即可,bindtap這個是小程式的事件繫結,寫法<button bindtap="ondemo">api跳轉</button>,同樣是在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 是無法改變頁面的狀態的,還會造成資料不一致。

最後上一張效果圖:

最新評論
  • BSA-TRITC(10mg/ml) TRITC-BSA 牛血清白蛋白改性標記羅丹明
  • web專案中基於Vue實現的資料分頁元件|給你程式碼