這篇主要是給大家講解下小程序整體的代碼結(jié)構(gòu)形式,那么事不宜遲,Let's go.
首先打開項(xiàng)目(看吧,項(xiàng)目又自己跑好了),我們可以這樣簡單的理解,小程序?qū)?yīng)的一個頁面就是由??的四個文件組成(這個理解只是前期幫助小白們適應(yīng)下代碼,實(shí)際上如果加上組件,就不是這么個回事)
.wxml文件就是俗稱的html(什么!沒聽說過,出門右轉(zhuǎn)百度謝謝)在小程序的展示(大概先這么理解吧...),簡單來說就是畫頁面的,然后這個文件配合.wxss文件(也就是相當(dāng)于css文件)就能制作出各種精美的頁面了,那么到這來,這兩文件就介紹完畢了(wtf,黑人問號,這啥都沒講),主要這里涉及到兩個文件是寫一個頁面的主要文件,如果要展開說明,那么又要開辟一個非常長的篇幅,所以超級小白們自己百度前端基礎(chǔ)知識html+css吧
(大概過了一萬年后)經(jīng)過自己對于html+css的自學(xué),是不是對畫頁面有了非常深刻的理解了呢,那么現(xiàn)在來說下.js文件,html+css負(fù)責(zé)頁面內(nèi)容的展示,那么頁面上要處理的一些邏輯或者數(shù)據(jù)要在哪里處理呢,就是在這個js文件里面,很遺憾這塊的知識怕比html+css還要多,那么請超級小白繞道百度自行學(xué)習(xí)js的知識吧.
那么接下來我們來看看index.json文件,json文件是整個模塊的配置文件,那么點(diǎn)進(jìn)來一看,只寫了一個usingComponents,對沒錯,就是表面的意思??"使用中的組件",這個地方主要是用來配置使用的組件,那說到組件我們這篇先不對此展開說明,后面會單獨(dú)開一篇來對組件進(jìn)行介紹.
好了,本篇的重點(diǎn)來了,讓我們把目光移向這個地方??
那從上面一大堆的介紹,這里的文件看起來就沒有那么陌生了吧,只是這里沒有wxml文件.先看app.json,這個文件是整個小程序的配置文件,點(diǎn)開一看,這里是一個字典,首先先看第一個pages這個字段,這個字段是干什么用的呢.你需要展示的頁面都需要在這里配置,比如這里原本就幫我們創(chuàng)建的index頁面跟logs頁面,如果需要展示到這兩個頁面,那么需要在這里寫上路徑.然后接著往下看,有個window的字段,這里呢主要是設(shè)置小程序的狀態(tài)欄、導(dǎo)航條涮坐、標(biāo)題、窗口背景色等等,這里舉個??讓大家能夠更淺顯易懂,往下看
這里把顏色值改成黑色,然后點(diǎn)擊編譯(不用再強(qiáng)調(diào)在哪個地方了吧,笑),小程序的頭部是不是變成黑色了,是的,這里的配置會整體改變小程序的樣式,那么因?yàn)檫@里可配置的屬性很多,大家參照官網(wǎng)開心的搞事情吧(嘿嘿)??官方文檔.然后介于這些篇章主要是給小白們看的,我們再動手做一個tabBar出來(tabBar不懂是啥?叫你不學(xué)好英語??).看下面的配置信息
跟這樣寫,然后點(diǎn)擊編譯,來吧,看看這可人的效果!??
是不是!有木有!好的,這就是tabBar,接下來如果要做出酷炫的東西,那么準(zhǔn)備好切圖,打開??官方文檔,自己動手做起來吧(講真,怎么感覺像開了個小朋友學(xué)畫畫的頻道了,笑).
那么關(guān)于配置方面的東西我們講解到這里,其他的字段都可以參照??官方文檔來進(jìn)行配置,先熟悉下配置,下篇我們開始介紹一些常用的控件,go!
