疫情間好好學(xué)習(xí)小程序開發(fā)不落伍不掉隊(duì)!最近疫情期間,大家都不敢出門,還不如好好的利用這個時間在家好好學(xué)習(xí),辦公,充好電,等疫情過后好有用武之地。最近智企云在研究小程序開發(fā),看了一些官網(wǎng)文檔,我們今天就來跟小程序開發(fā)公司智企云學(xué)習(xí)一下如何跳轉(zhuǎn),順便把跳轉(zhuǎn)過程中的參數(shù)傳遞,以及接收賦值到模板中顯示學(xué)習(xí)了。
首先我們創(chuàng)建一個小程序,填寫項(xiàng)目名稱,以及路徑,這里AppID我用的測試賬號。
我們進(jìn)入到開發(fā)頁面顯示的默認(rèn)代碼中Pages目錄中只有index和logs,小程序頁面一般都包裹.js文件主要是邏輯層的一些內(nèi)容,.json文件主要作用是頁面的獨(dú)立配置文件,wxml文件主要是我們直觀顯示的頁面相當(dāng)于html,wxss文件主要是用于頁面的樣式相當(dāng)于css,不對贅述詳細(xì)可以看官方文檔,這里主要講頁面跳轉(zhuǎn)以及傳參。
我們首先增加一個新的頁面test,創(chuàng)建的時候,系統(tǒng)會自動在app.json中創(chuàng)建一條路由,還有更簡單的辦法,直接在app.json中添加一條路由,系統(tǒng)就會幫你直接創(chuàng)建相對應(yīng)的內(nèi)容,這里要注意的是,如果刪除頁面,路由是不會自動刪除的,需要手動刪除一下,路由也是一樣。
接下來我們改造一下首頁的內(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這個是小程序的事件綁定,寫法api跳轉(zhuǎn),同樣是在index.wxml中寫,這里js中事件沒有寫報(bào)錯,和回調(diào)等。關(guān)于跳轉(zhuǎn)有多種api,根據(jù)官方文檔,我們文中使用的是navigateTo會保留當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面,另外還有redirectTo是會關(guān)閉當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面,以及navigateBack關(guān)閉當(dāng)前頁面,返回上一頁面或多級頁面等,具體可以查詢一下官網(wǎng)文檔,或者在文章下方回復(fù)。
接下來我們講怎么傳遞參數(shù)以及接收參數(shù),傳遞很簡單沒什么可說的,直接上代碼了
接下來我們說一下如何接收傳遞過來的參數(shù),接收過來的數(shù)據(jù)是放在options中的,我們直接用console.log打印一下。
我們在onLoad中可以直接打印出來了,onLoad會在創(chuàng)建頁面的時候執(zhí)行,所以跳轉(zhuǎn)之后會直接打印出來。
接下來我們講怎么把傳遞過來的數(shù)據(jù)顯示出來,需要對js以及wxml文件進(jìn)行一定的改造,我先改造一下test.wxml
既然要獲取數(shù)據(jù)就要在js文件中操作,這里要提到setData, 這個函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層(異步),同時改變對應(yīng)的 this.data 的值(同步),看到網(wǎng)上有說用this.data的,官網(wǎng)文檔特別說明了一下,是不行的,原文在這里:直接修改 this.data 而不調(diào)用 this.setData 是無法改變頁面的狀態(tài)的,還會造成數(shù)據(jù)不一致。
最后上一張效果圖:
以上就是小程序開發(fā)公司智企云給我們帶來的疫情期間學(xué)習(xí)小程序開發(fā)的一些相關(guān)知識介紹,在此期間一定要好好學(xué)習(xí),充好電。現(xiàn)在很多事態(tài)都在不斷的發(fā)展,小程序開發(fā)的技術(shù)也是日新月異的,因?yàn)槲覀円欢ㄒ獣r常保持學(xué)習(xí)的心態(tài)不應(yīng)對,這樣才不會落伍不掉隊(duì),關(guān)于更多小程序開發(fā)的學(xué)習(xí),智企云也會陸續(xù)為大家?guī)?,敬請關(guān)注!
全國客戶服務(wù)免費(fèi)熱線:15874991942
在線客服:2225973985
每天前10名咨詢有好禮
智企云 版權(quán)所有 ? 2016-2018 湘ICP備11017552號
地址:長沙市高新開發(fā)區(qū)尖山路39號中電軟件園總部大樓6樓
Copyright ? 2015-2024 智企云 All Rights Reserved. 湘ICP備11017552號 技術(shù)支持:中億智企云
湘公網(wǎng)安備43019002000674號 客服熱線:15874991942 公司地址:長沙市高新開發(fā)區(qū)尖山路39號中電軟件園總部大樓6樓