在上一篇教程的最后,我們生成了一個類似"Hello World"的小程序,這個過程中沒有編寫任何一行代碼。
在新建一個項目后,微信小程序會生成一個默認的程序框架,后續(xù)程序的開發(fā)工作都在這個框架上進行。這個默認框架包含下面幾部分:
app.xx
每個微信小程序都會包含app.js, app.json, app.wxss 三個文件,其中app.js文件包含了程序的邏輯實現(xiàn)代碼,app.json是一個全局配置文件,app.wxss是一個全局樣式文件。后面會詳細介紹每個文件的內(nèi)容和作用。
pages 目錄
pages目錄包含了程序當前的頁面文件,以默認生成的程序為例,該目錄下包含了index,logs兩個目錄,說明程序包括index和logs兩個頁面。
以index為例,該目錄下包含index.js,index.wxss,index.wxml3個文件,其中js是代碼文件,wxss是樣式文件,wxml是頁面結構描述文件。
熟悉web開發(fā)的同學應該會感覺很熟悉。微信小程序的開發(fā)模式確實和web開發(fā)很相似。目前邏輯部分僅支持javascript語言,并使用wxml(類似html)和wxss(類似css)來描述頁面的結構和樣式。此處的javascript和web中是完全一樣的,但因為不是運行在瀏覽器環(huán)境中,因此無法使用 windows,document等對象,自然也無法使用jquery等第三方庫。而wxml,wxss的語法和html,css也是十分相近的。
頁面也同樣可以包含一個index.json文件用于配置,不過這不是必須的。
通常一個完整的微信小程序包含上面兩部分,當然我們也可以定義自己的目錄用于存放公共代碼和程序需要的其它文件。
app.json
打開app.json文件,可以看到如下代碼
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
其中pages部分包含了程序的頁面,這樣框架就能知道從哪里找到頁面文件。而window部分包含了程序窗口的一些配置。詳細的配置項可以參考配置 小程序
app.wxss
app.wxss文件包含了全局的樣式信息,在默認生成的程序中,只有一個類選擇器.container,該類型在index.wxml和 logs.wxml中有使用到。
app.js
該文件包含了程序的主體流程代碼實現(xiàn),關于該部分的分析請見下一篇教程。