目錄結(jié)構(gòu)
小程序包含一個描述整體程序的 app 和多個描述各自頁面的 page寺晌。如圖2-1所示
圖2-1 目錄結(jié)構(gòu)
一個小程序主體部分由三個文件組成蛮粮，必須放在項目的根目錄溅固，如圖2-2所示
圖2-2 主體部分文件
一個小程序頁面由四個文件組成有缆，如圖2-3所示
圖2-3 頁面組成文件
注意：為了方便開發(fā)者減少配置項名秀，描述頁面的四個文件必須具有相同的路徑與文件名励负。
FirstApplet
創(chuàng)建項目啟動頁，如圖2-4所示：
圖2-4 項目啟動頁
新建一個空白項目匕得，點擊 圖2-5所示 “+” 創(chuàng)建小程序主體部分的三個文件及pages文件夾继榆，在pages文件夾下新建一個index文件夾，如圖2-5所示汁掠，選中pages文件夾 右鍵 新建目錄
圖2-5 新建目錄/文件
在index文件夾下創(chuàng)建 index.wxml 略吨、index.wxss 、index.js 考阱、index.json 四個文件翠忠。
注：除頂級目錄文件/文件夾使用 圖2-5 中的 “+” 創(chuàng)建外，其他文件創(chuàng)建選中其上級目錄文件夾 右鍵 新建目錄/文件
創(chuàng)建好文件后乞榨，在app.json中寫入：
{
"pages":[
"pages/index/index"
]
}
編輯 index.wxml 文件秽之，此處會用到圖片当娱，需在頂級目錄創(chuàng)建images文件夾用來存放圖片：
<view class='container'>
<image class='user-avatar' src="/images/avatar.jpg "></image>
<text class='user-name'>Hello,甜甜</text>
<view class='moto-container'>
<text class='moto'>開啟小程序之路</text>
</view>
</view>
模擬器的機型設(shè)置為 iPhone6 ，小程序以IPhone6的屏幕尺寸為設(shè)計標(biāo)準(zhǔn)考榨，像素使用 rpx 為單位跨细，編輯 index.wxss 文件：
page{
background-color:#b3d4db; /* 頁面背景色 */
}
.container{
display: flex; /* 將對象作為彈性伸縮盒顯示 */
flex-direction: column; /* 靈活的項目將垂直顯示，正如一個列一樣河质。 */
align-items: center;
} /* 使 view.container 中 內(nèi)容垂直且水平居中 */
.user-avatar{
width: 200rpx;
height: 200rpx;
margin-top: 160rpx;
border-radius: 50%; /* 使圖片呈現(xiàn) 圓形 */
}
.user-name{
margin-top: 100rpx;
font-size: 32rpx;
font-weight: bold;
}
.moto-container{
margin-top: 200rpx;
border: 1px solid #405f80;
width: 200rpx;
height: 80rpx;
border-radius: 5px;
text-align: center;
}
.moto{
font-size: 22rpx;
font-weight: bold;
line-height: 80rpx;
color: #405f80;
}
若使小程序呈現(xiàn) 圖2-4 的效果冀惭，需編寫 app.json 文件：
{
"pages": [
"pages/index/index"
],
"window":{
"navigationBarBackgroundColor": "#b3d4db"
}
}
項目出現(xiàn)如圖2-6 所示錯誤：
圖2-6 腳本錯誤
編寫index.js：
Page({
})
啟動頁面就完成了 ^ _ ^
