(Ctrl+s)保存編輯的內(nèi)容,不然調(diào)試不會出效果?。。?/b>
項目結(jié)構(gòu)
小程序入門(0)項目創(chuàng)建篇?, 下載開發(fā)工具并創(chuàng)建項目。
小程序入門(2)淺析篇?,了解wxml與wxss的配合使用
小程序進(jìn)階(1)豆瓣電影,看文檔,復(fù)制文檔代碼基礎(chǔ)布局也可以輕松搭建。
在編輯中找到加號!創(chuàng)建button目錄。

添加一個外層文件button, 在四個內(nèi)層文件?js,json , wxml , wxss . 名字與外層文件相同。

創(chuàng)建外層文件,分別在創(chuàng)建內(nèi)層?js,json,wxml,wxss。這樣就生成了一個偽頁面,說它是偽頁面到后面進(jìn)行分析。
. js:javascript 邏輯代碼區(qū)。
. json:頁面配置區(qū)。
. wxml:類類似HTML布局區(qū),?
. wxss:CSS樣式區(qū) ,
( json 與 wxss 并不是必須的可按照產(chǎn)品風(fēng)格做調(diào)整),要說的是json多數(shù)使用在API接口中,在控件中幾乎不使用,他的作用官方解釋?
子文件中的 .json只能設(shè)置window相關(guān)的配置項,以決定本頁面的窗口表現(xiàn),所以無需寫window這個鍵
window :用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色。
所以在編寫控件時可以不用創(chuàng)建 .json 文件?
. js 與 wxml就比較關(guān)鍵了“必須創(chuàng)建”,在 js?中 page方法是頁面入口方法“必須創(chuàng)建”,可以不用寫他的所有生命周期函數(shù)。
前面的這些介紹大概心里有個數(shù),往后看更精彩。
你應(yīng)該發(fā)現(xiàn)所創(chuàng)建的外層文件和內(nèi)層文件,他們的名字都是相同的,這是也是微信框架下的一種查詢調(diào)用機(jī)制,因為框架會自動去尋找路徑.json,.js,.wxml,.wxss的四個文件進(jìn)行整合,當(dāng)然在一些情況下會有所出入,比如 navigator控件 實現(xiàn) 頁面內(nèi)層跳轉(zhuǎn) 它的 文件名需要不相同,有一個大致的了解后面在深入,我們可以知道文件名不是必須相同的,只是如果不相同在APP.json中要多寫幾個路徑。

從這里就能看出微信小程序的目錄結(jié)構(gòu),是一個排插分別已有四個插口,而這個插口可以根據(jù)需求進(jìn)行靈活運(yùn)用,
PS:看到這里沒學(xué)過javascript HTML CSS的朋友會覺得必須要去學(xué)這些,其實不然,重點要學(xué)的是JavaScript,而后兩者可以邊看官方文檔邊學(xué),當(dāng)然基礎(chǔ)的內(nèi)容還是要去過一邊大概兩小時就可以對HTML CSS有個大致的了解,這兩門還是挺簡單的。
在小程序開發(fā)中wxml與Html還是有點差別的,
Wxml中的控件由標(biāo)簽決定 這點與HTML相同
View決定一個顯示區(qū)<view> 指定寬高...等等</view>等等
要說的是<view>是一個區(qū)塊,意味著我們可以更自由的使用它。?
Wxml它的關(guān)鍵字由微信框架提供,這就是不同之處,即使你對HTML學(xué)的很好,也只是多了對書寫格式的熟悉,在這里還得重新學(xué),wxml中只能使用它所定制的組件。
現(xiàn)在說一下怎么讓這偽頁面變成,半真頁面,編輯代碼時因為IDE不會自動保存所以,按Ctrl+s,保存一下。
在 button.js 中輸入 page ,之后我相信你會懂的。只添加page函數(shù)對他的其他生命周期函數(shù)不做任何改動。

接下來在button.wxml中 添加

最后在最外層中找的app.json , 把文件路徑寫上。

而要讓此文件中的內(nèi)容顯示出來,必須要在最外層的app.json中聲明配置,而最關(guān)鍵的是app.json中第一行就是主頁面、 app.json 官方解
現(xiàn)在你去調(diào)試窗口重啟一下,你的第一個頁面就出來了。
官方同名機(jī)制就在這里可以看到效果了,你不用去管button這文件里的四個文件,它也可以給你調(diào)用起來,如果文件名不相同你就需要多寫幾行引用。
總結(jié)一下:
看完我們知道了,想要創(chuàng)建出一個頁面,控件,需要先創(chuàng)建一個外層文件,然后在文件創(chuàng)建四個關(guān)鍵文件,他們的名字必須與外層文件相同。
重點學(xué)習(xí)javascript ,將大部分時間留在學(xué)習(xí)JavaScript中,將HTML CSS基礎(chǔ)知識過一遍 以后真使用到在進(jìn)行深入。
如果你有一定編程基礎(chǔ),可看一下?寫給Android/Java開發(fā)者的JavaScript精解(1)?,如果沒有什么基礎(chǔ)也過一遍,真看起來費力在去找基礎(chǔ)惡補(bǔ)。
wxml與js的關(guān)系是互相獨立的,這與HTML與javascript的關(guān)系是一模一樣的,唯一的不同就是必須要在js中寫page方法(函數(shù))才能將wxml中的布局顯示出來并且不報錯。
我學(xué)習(xí)java做android喜歡使用 方法 這一詞,函數(shù)的話對于數(shù)學(xué)不好的人看著會頭疼吧,雖然程序中的函數(shù)與數(shù)學(xué)的函數(shù)沒什么親近的關(guān)系。
WXML可以借助官方文檔進(jìn)行研究,也可以在GitHub上找一些小程序demo 現(xiàn)在已經(jīng)很多了。
當(dāng)然我也會每天更新一點關(guān)于微信小程序?qū)W習(xí)的理解。
下一篇?小程序入門(2)淺析篇,了解wxml與wxss的配合使用