第一部分: 小程序全局配置
之前筆記 關(guān)于client/app.json 的文件說(shuō)明
// app.json 是對(duì)當(dāng)前小程序的全局配置,包括了小程序的所有頁(yè)面路徑呐矾、界面表現(xiàn)尉辑、網(wǎng)絡(luò)超時(shí)時(shí)間渔肩、底部 tab 等
// pages字段 —— 用于描述當(dāng)前小程序所有頁(yè)面路徑,這是為了讓微信客戶端知道當(dāng)前你的小程序頁(yè)面定義在哪個(gè)目錄挺尾。
// window字段 —— 小程序所有頁(yè)面的頂部背景顏色络凿,文字顏色定義在這里的。
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html
// 所有參數(shù)配置地址詳見(jiàn)上面
第二部分:個(gè)性化配置部分
工具配置 project.config.json
通常大家在使用一個(gè)工具的時(shí)候世杀,都會(huì)針對(duì)各自喜好做一些個(gè)性化配置,例如界面顏色肝集、編譯配置等等瞻坝,當(dāng)你換了另外一臺(tái)電腦重新安裝工具的時(shí)候,你還要重新配置杏瞻。
考慮到這點(diǎn)所刀,小程序開(kāi)發(fā)者工具在每個(gè)項(xiàng)目的根目錄都會(huì)生成一個(gè) project.config.json,你在工具上做的任何配置都會(huì)寫(xiě)入到這個(gè)文件捞挥,當(dāng)你重新安裝工具或者換電腦工作時(shí)浮创,你只要載入同一個(gè)項(xiàng)目的代碼包,開(kāi)發(fā)者工具就自動(dòng)會(huì)幫你恢復(fù)到當(dāng)時(shí)你開(kāi)發(fā)項(xiàng)目時(shí)的個(gè)性化配置树肃,其中會(huì)包括編輯器的顏色蒸矛、代碼上傳時(shí)自動(dòng)壓縮等等一系列選
第三部分:每個(gè)頁(yè)面的單獨(dú)個(gè)性化配置———頁(yè)面配置 page.json
這里的 page.json 其實(shí)用來(lái)表示 pages/logs 目錄下的 logs.json 這類(lèi)和小程序頁(yè)面相關(guān)的配置。
如果你整個(gè)小程序的風(fēng)格是藍(lán)色調(diào)胸嘴,那么你可以在 app.json 里邊聲明頂部顏色是藍(lán)色即可雏掠。實(shí)際情況可能不是這樣,可能你小程序里邊的每個(gè)頁(yè)面都有不一樣的色調(diào)來(lái)區(qū)分不同功能模塊劣像,因此我們提供了 page.json乡话,讓開(kāi)發(fā)者可以獨(dú)立定義每個(gè)頁(yè)面的一些屬性,例如剛剛說(shuō)的頂部顏色耳奕、是否允許下拉刷新等等绑青。
第四部分:WXML 模板
網(wǎng)頁(yè)編程采用的是 HTML + CSS + JS 這樣的組合
在小程序中也有同樣的角色诬像,其中 WXML 充當(dāng)?shù)木褪穷?lèi)似 HTML 的角色
WXML特有的標(biāo)簽
不同于傳統(tǒng)的div, p, span,WXML對(duì)標(biāo)簽進(jìn)行進(jìn)一步封裝闸婴。小程序的 WXML 用的標(biāo)簽是 view, button, text 等等坏挠,這些標(biāo)簽就是小程序給開(kāi)發(fā)者包裝好的基本能力,我們還提供了地圖邪乍、視頻降狠、音頻等等組件能力
WXML特色(類(lèi)似React與vue)擁有的數(shù)據(jù)雙向綁定MVVM開(kāi)發(fā)模式
多了一些wx:if 這樣的屬性以及 {{ }} 這樣的表達(dá)式 和語(yǔ)法
通過(guò) {{ }} 的語(yǔ)法把一個(gè)變量綁定到界面上,我們稱(chēng)為數(shù)據(jù)綁定庇楞。僅僅通過(guò)數(shù)據(jù)綁定還不夠完整的描述狀態(tài)和界面的關(guān)系榜配,還需要 if/else, for等控制能力,在小程序里邊吕晌,這些控制能力都用 wx: 開(kāi)頭的屬性來(lái)表達(dá)蛋褥。
第五部分 WXSS 樣式
WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些擴(kuò)充和修改睛驳。
1.新增了尺寸單位烙心。]WXSS 在底層支持新的尺寸單位 rpx ,開(kāi)發(fā)者可以免去換算的煩惱乏沸,只要交給小程序底層來(lái)?yè)Q算即可弃理,由于換算采用的浮點(diǎn)數(shù)運(yùn)算,所以運(yùn)算結(jié)果會(huì)和預(yù)期結(jié)果有一點(diǎn)點(diǎn)偏差屎蜓。
2.提供了全局的樣式和局部樣式。和前邊 app.json, page.json 的概念相同钥勋,你可以寫(xiě)一個(gè) app.wxss 作為全局樣式炬转,會(huì)作用于當(dāng)前小程序的所有頁(yè)面,局部頁(yè)面樣式 page.wxss 僅對(duì)當(dāng)前頁(yè)面生效算灸。
第六部分 JS 交互邏輯
直接上代碼
<view>{{ msg }}</view>
<button bindtap="clickMe">點(diǎn)擊我</button>
Page({
clickMe: function() {
this.setData({ msg: "Hello World" })
}
})