微信小程序開發(fā)之入門的示例分析

1、實(shí)例目錄結(jié)構(gòu)

test
?├─?page
?│?└─?index
?│??├─?index.js
?│??├─?index.json
?│??├─?index.wxml
?│??└─?index.wxss
?├─?app.js
?├─?app.json
?└─?app.wxss

2、實(shí)例文件說明及源碼

一個小程序包含一個app（主體部分）和多個page（頁面）

（1）app是用來描述整體程序的，由三個文件組成，.js后綴的是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件，必須放在項(xiàng)目的根目錄。愛掏網(wǎng) - it200.com

app.js是小程序的腳本代碼（必須），可以在這個文件中監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量，調(diào)用框架提供的豐富的 API。愛掏網(wǎng) - it200.com

App({
?onLaunch:?function?()?{
??console.log(&＃39;App?Launch&＃39;)
?},
?onShow:?function?()?{
??console.log(&＃39;App?Show&＃39;)
?},
?onHide:?function?()?{
??console.log(&＃39;App?Hide&＃39;)
?},
?globalData:?{
??hasLogin:?false
?}
})

app.json是對整個小程序的全局配置（必須），用來對微信小程序進(jìn)行全局配置，決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時時間、設(shè)置多tab等。愛掏網(wǎng) - it200.com接受一個數(shù)組，每一項(xiàng)都是字符串，來指定小程序由哪些頁面組成。愛掏網(wǎng) - it200.com微信小程序中的每一個頁面的【路徑+頁面名】都需要寫在app.json的pages中，且pages中的第一個頁面是小程序的首頁。愛掏網(wǎng) - it200.com

{
?"pages":[
??"page/index/index"
?],
?"window":{
??"navigationBarTextStyle":?"black",
??"navigationBarTitleText":?"歡迎頁",
??"navigationBarBackgroundColor":?"#fbf9fe",
??"backgroundColor":?"#fbf9fe"
?},
?"debug":?true
}

app.wxss是整個小程序的公共樣式表（非必須）。愛掏網(wǎng) - it200.com

page?{
?background-color:?#fbf9fe;
?height:?100%;
}
.container?{
?display:?flex;
?flex-direction:?column;
?min-height:?100%;
?justify-content:?space-between;
}

（2）page是用來描述頁面，一個頁面由四個文件組成，這里以首頁index為例，每一個小程序頁面是由同路徑下同名的四個不同后綴文件的組成，如：index.js、index.wxml、index.wxss、index.json。愛掏網(wǎng) - it200.com.js后綴的文件是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件，.wxml后綴的文件是頁面結(jié)構(gòu)文件。愛掏網(wǎng) - it200.com

index.js 是頁面的腳本文件（必須），在這個文件中我們可以監(jiān)聽并處理頁面的生命周期函數(shù)、獲取小程序?qū)嵗暶鞑⑻幚頂?shù)據(jù)，響應(yīng)頁面交互事件等。愛掏網(wǎng) - it200.com

Page({
?data:?{
??title:&＃39;小程序&＃39;,
??desc:&＃39;Hello?World!&＃39;
?}
})

index.wxml是頁面結(jié)構(gòu)文件（必須）。愛掏網(wǎng) - it200.com

?
??標(biāo)題：{{title}}
??描述：{{desc}}
?

index.wxss是頁面樣式表文件（非必須），當(dāng)有頁面樣式表時，頁面的樣式表中的樣式規(guī)則會層疊覆蓋app.wxss中的樣式規(guī)則。愛掏網(wǎng) - it200.com如果不指定頁面的樣式表，也可以在頁面的結(jié)構(gòu)文件中直接使用app.wxss中指定的樣式規(guī)則。愛掏網(wǎng) - it200.com

.header?{
?padding:?80rpx;
?line-height:?1;
}
.title?{
?font-size:?52rpx;
}
.desc?{
?margin-top:?10rpx;
?color:?#888888;
?font-size:?28rpx;
}

index.json是頁面配置文件（非必須），當(dāng)有頁面的配置文件時，配置項(xiàng)在該頁面會覆蓋app.json的window中相同的配置項(xiàng)。愛掏網(wǎng) - it200.com如果沒有指定的頁面配置文件，則在該頁面直接使用app.json中的默認(rèn)配置。愛掏網(wǎng) - it200.com這里無需指定。愛掏網(wǎng) - it200.com

Tips：

a.為了方便開發(fā)者減少配置項(xiàng)，小程序規(guī)定描述頁面的這四個文件必須具有相同的路徑與文件名

b.小程序提供了豐富的API，可以根據(jù)自己需求選擇（https://mp.weixin.qq.com/debug/wxadoc/dev/api/?t=202415）

四、測試小程序?qū)嵗?/strong>