小程序開發(fā)如何跳轉(zhuǎn)頁面和實(shí)現(xiàn)參數(shù)的傳遞與視圖層顯示

最近在研究小程序開發(fā)，看了一些官網(wǎng)文檔，我們今天就來學(xué)習(xí)一下如何跳轉(zhuǎn)，順便把跳轉(zhuǎn)過程中的參數(shù)傳遞，以及接收賦值到模板中顯示學(xué)習(xí)了。

首先我們創(chuàng)建一個(gè)小程序，填寫項(xiàng)目名稱，以及路徑，這里AppID我用的測(cè)試賬號(hào)。

我們進(jìn)入到開發(fā)頁面顯示的默認(rèn)代碼中Pages目錄中只有index和logs，小程序頁面一般都包裹.js文件主要是邏輯層的一些內(nèi)容，.json文件主要作用是頁面的獨(dú)立配置文件，wxml文件主要是我們直觀顯示的頁面相當(dāng)于html，wxss文件主要是用于頁面的樣式相當(dāng)于css，不對(duì)贅述詳細(xì)可以看官方文檔，這里主要講頁面跳轉(zhuǎn)以及傳參。

我們首先增加一個(gè)新的頁面test，創(chuàng)建的時(shí)候，系統(tǒng)會(huì)自動(dòng)在app.json中創(chuàng)建一條路由，還有更簡(jiǎn)單的辦法，直接在app.json中添加一條路由，系統(tǒng)就會(huì)幫你直接創(chuàng)建相對(duì)應(yīng)的內(nèi)容，這里要注意的是，如果刪除頁面，路由是不會(huì)自動(dòng)刪除的，需要手動(dòng)刪除一下，路由也是一樣。

接下來我們改造一下首頁的內(nèi)容，index文件夾中的index.wxml，增加跳轉(zhuǎn)，小程序中是沒有a標(biāo)簽的，跳轉(zhuǎn)的標(biāo)簽是，這樣就可以正常跳轉(zhuǎn)到設(shè)置好的頁面了。

除了這種類似于a標(biāo)簽的跳轉(zhuǎn)，小程序還集成api按鈕跳轉(zhuǎn)，只需要在button中設(shè)置bindtap參數(shù)即可，bindtap這個(gè)是小程序的事件綁定，寫法api跳轉(zhuǎn)，同樣是在index.wxml中寫，這里js中事件沒有寫報(bào)錯(cuò)，和回調(diào)等。關(guān)于跳轉(zhuǎn)有多種api，根據(jù)官方文檔，我們文中使用的是navigateTo會(huì)保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面，另外還有redirectTo是會(huì)關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面，以及navigateBack關(guān)閉當(dāng)前頁面，返回上一頁面或多級(jí)頁面等，具體可以查詢一下官網(wǎng)文檔，或者在文章下方回復(fù)。

接下來我們講怎么傳遞參數(shù)以及接收參數(shù)，傳遞很簡(jiǎn)單沒什么可說的，直接上代碼了

接下來我們說一下如何接收傳遞過來的參數(shù)，接收過來的數(shù)據(jù)是放在options中的，我們直接用console.log打印一下。

我們?cè)趏nLoad中可以直接打印出來了，onLoad會(huì)在創(chuàng)建頁面的時(shí)候執(zhí)行，所以跳轉(zhuǎn)之后會(huì)直接打印出來。

接下來我們講怎么把傳遞過來的數(shù)據(jù)顯示出來，需要對(duì)js以及wxml文件進(jìn)行一定的改造，我先改造一下test.wxml

既然要獲取數(shù)據(jù)就要在js文件中操作，這里要提到setData， 這個(gè)函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層（異步），同時(shí)改變對(duì)應(yīng)的 this.data 的值（同步），看到網(wǎng)上有說用this.data的，官網(wǎng)文檔特別說明了一下，是不行的，原文在這里：直接修改 this.data 而不調(diào)用 this.setData 是無法改變頁面的狀態(tài)的，還會(huì)造成數(shù)據(jù)不一致。

最后上一張效果圖：