目录结构
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。如图2-1所示
图2-1 目录结构
一个小程序主体部分由三个文件组成，必须放在项目的根目录，如图2-2所示
图2-2 主体部分文件
一个小程序页面由四个文件组成，如图2-3所示
图2-3 页面组成文件
注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。
FirstApplet
创建项目启动页，如图2-4所示：
图2-4 项目启动页
新建一个空白项目，点击 图2-5所示 “+” 创建小程序主体部分的三个文件及pages文件夹，在pages文件夹下新建一个index文件夹，如图2-5所示，选中pages文件夹 右键 新建目录
图2-5 新建目录/文件
在index文件夹下创建 index.wxml 、index.wxss 、index.js 、index.json 四个文件。
注：除顶级目录文件/文件夹使用 图2-5 中的 “+” 创建外，其他文件创建选中其上级目录文件夹 右键 新建目录/文件
创建好文件后，在app.json中写入：
{
"pages":[
"pages/index/index"
]
}
编辑 index.wxml 文件，此处会用到图片，需在顶级目录创建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>
模拟器的机型设置为 iPhone6 ，小程序以IPhone6的屏幕尺寸为设计标准，像素使用 rpx 为单位，编辑 index.wxss 文件：
page{
background-color:#b3d4db; /* 页面背景色 */
}
.container{
display: flex; /* 将对象作为弹性伸缩盒显示 */
flex-direction: column; /* 灵活的项目将垂直显示，正如一个列一样。 */
align-items: center;
} /* 使 view.container 中 内容垂直且水平居中 */
.user-avatar{
width: 200rpx;
height: 200rpx;
margin-top: 160rpx;
border-radius: 50%; /* 使图片呈现 圆形 */
}
.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;
}
若使小程序呈现 图2-4 的效果，需编写 app.json 文件：
{
"pages": [
"pages/index/index"
],
"window":{
"navigationBarBackgroundColor": "#b3d4db"
}
}
项目出现如图2-6 所示错误：
图2-6 脚本错误
编写index.js：
Page({
})
启动页面就完成了 ^ _ ^
