微信小程序開(kāi)發(fā)教程(基礎(chǔ)篇)1-初識(shí)微信小程序
在上一篇教程的最后僵井,我們生成了一個(gè)類似"Hello World"的小程序陕截,這個(gè)過(guò)程中沒(méi)有編寫任何一行代碼。
在新建一個(gè)項(xiàng)目后批什,微信小程序會(huì)生成一個(gè)默認(rèn)的程序框架农曲,后續(xù)程序的開(kāi)發(fā)工作都在這個(gè)框架上進(jìn)行。這個(gè)默認(rèn)框架包含下面幾部分:
app.xx
每個(gè)微信小程序都會(huì)包含app.js, app.json, app.wxss 三個(gè)文件,其中app.js文件包含了程序的邏輯實(shí)現(xiàn)代碼乳规,app.json是一個(gè)全局配置文件形葬,app.wxss是一個(gè)全局樣式文件。后面會(huì)詳細(xì)介紹每個(gè)文件的內(nèi)容和作用暮的。
pages 目錄
pages目錄包含了程序當(dāng)前的頁(yè)面文件笙以,以默認(rèn)生成的程序?yàn)槔撃夸浵掳薸ndex冻辩,logs兩個(gè)目錄猖腕,說(shuō)明程序包括index和logs兩個(gè)頁(yè)面。
以index為例恨闪,該目錄下包含index.js倘感,index.wxss,index.wxml3個(gè)文件咙咽,其中js是代碼文件老玛,wxss是樣式文件,wxml是頁(yè)面結(jié)構(gòu)描述文件犁珠。
熟悉web開(kāi)發(fā)的同學(xué)應(yīng)該會(huì)感覺(jué)很熟悉逻炊。微信小程序的開(kāi)發(fā)模式確實(shí)和web開(kāi)發(fā)很相似互亮。目前邏輯部分僅支持javascript語(yǔ)言犁享,并使用wxml(類似html)和wxss(類似css)來(lái)描述頁(yè)面的結(jié)構(gòu)和樣式。此處的javascript和web中是完全一樣的豹休,但因?yàn)椴皇沁\(yùn)行在瀏覽器環(huán)境中炊昆,因此無(wú)法使用 windows,document等對(duì)象威根,自然也無(wú)法使用jquery等第三方庫(kù)凤巨。而wxml,wxss的語(yǔ)法和html洛搀,css也是十分相近的敢茁。
頁(yè)面也同樣可以包含一個(gè)index.json文件用于配置,不過(guò)這不是必須的留美。
通常一個(gè)完整的微信小程序包含上面兩部分彰檬,當(dāng)然我們也可以定義自己的目錄用于存放公共代碼和程序需要的其它文件。
app.json
打開(kāi)app.json文件,可以看到如下代碼
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
其中pages部分包含了程序的頁(yè)面谎砾,這樣框架就能知道從哪里找到頁(yè)面文件逢倍。而window部分包含了程序窗口的一些配置。詳細(xì)的配置項(xiàng)可以參考配置 小程序
app.wxss
app.wxss文件包含了全局的樣式信息景图,在默認(rèn)生成的程序中较雕,只有一個(gè)類選擇器.container,該類型在index.wxml和 logs.wxml中有使用到挚币。
app.js
該文件包含了程序的主體流程代碼實(shí)現(xiàn)亮蒋,關(guān)于該部分的分析請(qǐng)見(jiàn)下一篇教程扣典。