疫情間好好學(xué)習(xí)小程序開(kāi)發(fā)不落伍不掉隊(duì),！最近疫情期間,，大家都不敢出門，還不如好好的利用這個(gè)時(shí)間在家好好學(xué)習(xí),，辦公,，充好電，等疫情過(guò)后好有用武之地,。最近智企云在研究小程序開(kāi)發(fā),，看了一些官網(wǎng)文檔，我們今天就來(lái)跟小程序開(kāi)發(fā)公司智企云學(xué)習(xí)一下如何跳轉(zhuǎn),，順便把跳轉(zhuǎn)過(guò)程中的參數(shù)傳遞,，以及接收賦值到模板中顯示學(xué)習(xí)了。

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

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

　　我們首先增加一個(gè)新的頁(yè)面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)容,，這里要注意的是,，如果刪除頁(yè)面，路由是不會(huì)自動(dòng)刪除的,，需要手動(dòng)刪除一下,，路由也是一樣。

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

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

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

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

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

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

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

　　最后上一張效果圖：

           以上就是小程序開(kāi)發(fā)公司智企云給我們帶來(lái)的疫情期間學(xué)習(xí)小程序開(kāi)發(fā)的一些相關(guān)知識(shí)介紹,，在此期間一定要好好學(xué)習(xí)，充好電?，F(xiàn)在很多事態(tài)都在不斷的發(fā)展,，小程序開(kāi)發(fā)的技術(shù)也是日新月異的，因?yàn)槲覀円欢ㄒ獣r(shí)常保持學(xué)習(xí)的心態(tài)不應(yīng)對(duì),，這樣才不會(huì)落伍不掉隊(duì),，關(guān)于更多小程序開(kāi)發(fā)的學(xué)習(xí)，智企云也會(huì)陸續(xù)為大家?guī)?lái),，敬請(qǐng)關(guān)注,！