創建你的第一個小程序
創建你的第一個小程序還是比較簡單,在「微信開發工具」新建項目選擇小程序項目,選擇代碼存放的硬盤路徑,填入剛剛申請到的小程序的 AppID,給你的項目起一個好聽的名字,點擊 " 新建 ",你就得到了你的第一個小程序了,點擊頂部菜單編譯就可以在微信開發者工具中預覽你的第一個小程序。
四種不同類型的文件
你可以留意到這個項目里邊生成了不同類型的文件:
.json 后綴的 JSON 配置文件,用於頁面或小程序的配置設置
.wxml 后綴的 WXML 模板文件,用於布局與內容
.wxss 后綴的 WXSS 樣式文件,用於具體的樣式
.js 后綴的 JS 腳本邏輯文件,用於邏輯處理
app.* 和 pages/index/index.* 關系
細心的小伙伴可能已經留意到大概文件目錄有 app.* 和 pages/index/index.*
app.* 是做小程序應用的全局配置、樣式和邏輯
pages/index/index.* 是做小程序頁面的全局配置、樣式和邏輯顯示
pages/xxx/xxx.xxx 都會在 app.json 的 pages 字段里面配置 (在「微信開發工具」app.json 的 pages 字段配置一個新的路徑的話,「微信開發工具」自動生成對應的文件夾 和 json、wxml、wxss、js 文件)
pages/xxx/xxx.xxx 配置有的, 就會用自己的; 沒有的就會找 app.* 的配置。
其實我覺得這塊跟vue中的路由設置類似;
目錄結構
小程序包含一個描述整體程序的 app 和多個描述各自頁面的 page。
一個小程序主體部分由三個文件組成,必須放在項目的根目錄,如下:
文件 | 必需 | 作用 |
---|---|---|
app.js | 是 | 小程序邏輯 |
app.json | 是 | 小程序公共配置 |
app.wxss | 否 | 小程序公共樣式表 |
一個小程序頁面由四個文件組成,分別是:
文件類型 | 必需 | 作用 |
---|---|---|
js | 是 | 頁面邏輯 |
wxml | 是 | 頁面結構 |
json | 否 | 頁面配置 |
wxss | 否 | 頁面樣式表 |
注意:為了方便開發者減少配置項,描述頁面的四個文件必須具有相同的路徑與文件名。