目录结构

小程序包含一个描述整体程序的 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({

})

启动页面就完成了 ^ _ ^