新建好一個(gè)微信小程序工程后揭措,會(huì)發(fā)現(xiàn)其有四種文件類型傀蓉,分別是:
.js -------- 腳本文件:頁(yè)面的交互邏輯均在此頁(yè)面中進(jìn)行
json ------ 配置文件:用于設(shè)置程序的配置效果
.wxml ---- 頁(yè)面結(jié)構(gòu)文件:書(shū)寫(xiě)控件,構(gòu)建頁(yè)面
wxss ----- 樣式文件:類似于css樣式颇玷,用于美化頁(yè)面
以下三個(gè)文件比較重要锌云,作下解釋
app.js
app.json
app.wxss
app.js
每個(gè)小程序工程中,有且僅有一個(gè)app.js文件褂乍,用于處理程序的生命周期等持隧,位于項(xiàng)目的根目錄下。
生命周期函數(shù)主要有:
onLaunch: function () {
//監(jiān)聽(tīng)小程序初始化-小程序初始化完成時(shí)逃片,會(huì)觸發(fā)屡拨,且只會(huì)觸發(fā)一次。
},
onShow: function () {
//監(jiān)聽(tīng)小程序顯示-小程序啟動(dòng)或從后臺(tái)進(jìn)入前臺(tái)褥实,會(huì)觸發(fā)呀狼。
},
onHide: function () {
//監(jiān)聽(tīng)小程序隱藏-小程序從前臺(tái)進(jìn)入后臺(tái),會(huì)觸發(fā)损离。
},
app.json
使用app.json對(duì)程序進(jìn)行全局配置哥艇,如:文件的路徑、窗口表現(xiàn)僻澎、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間貌踏、設(shè)置多 tab 等。
{
"pages": [
"pages/index/index"http://可以在這里寫(xiě)上路徑窟勃,可自動(dòng)生成頁(yè)面文件祖乳。
],
"window": {
"navigationBarTitleText": "Demo"http://可設(shè)置窗體的背景顏色等。
},
"tabBar": {//底部tabBar
"list": [{
"pagePath": "pages/index/index",
"text": "首頁(yè)",
"iconPath": "images/tab_income.png",//設(shè)置圖片
"selectedIconPath": "images/tab_income_selected.png"http://選中后的圖片
}, {
"pagePath": "pages/logs/logs",
"text": "日志"
}]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true
}
app.wxss
和css樣式很相似秉氧,多了兩個(gè)特性
尺寸單位: 主要用rpx眷昆,可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)
樣式導(dǎo)入:使用@import可引入外聯(lián)樣式表,句尾用分號(hào)隔開(kāi)
如:
@import "common.wxss";