二、完善小程序信息：小程序管理后台
三、获取appid：“设置”-“开发设置”
四、打开“微信开发者工具”，新建项目
五、进入到项目首页
六、代码构成
自动生成的目录结构如下：
├── pages
| ├── index
| | ├── index.json index 页面配置
| | ├── index.js index 页面逻辑
| | ├── index.wxml index 页面结构
| | └── index.wxss index 页面样式表
| └── log
| ├── log.json log 页面配置
| ├── log.wxml log 页面逻辑
| ├── log.js log 页面结构
| └── log.wxss log 页面样式表
├── app.js 小程序逻辑
├── app.json 小程序公共设置
└── app.wxss 小程序公共样式表
- .json 后缀的 JSON 配置文件
app.json是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。属性文档
pages: 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。pages 字段的第一个页面就是这个小程序的首页（打开小程序看到的第一个页面）
window: 定义小程序所有页面的顶部背景颜色，文字颜色定义等。{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}2>工具配置 project.config.json，可配置一个性化配置，例如界面颜色、编译配置等等。属性文档
{
"description": "项目配置文件。",
"packOptions": {
"ignore": []
},
"setting": {
"urlCheck": true,
"es6": true,
},
"compileType": "miniprogram",
"libVersion": "2.2.1",
"appid": "wxdda21eb8b323db99",
"projectname": "GrapefruitRecord",
"isGameTourist": false,
"condition": {
}
}3>页面配置 page.json，可独立定义每个页面的一些属性，例如导航栏颜色、是否允许下拉刷新等等。属性文档
{
"navigationBarTitleText": "查看启动日志"
}
- .wxml 后缀的 WXML 模板文件
类似HTML，用来描述当前这个页面的结构，由标签、属性等等构成。也存在着不同点：
标签名不同，提供了包装好的组件标签
不同的属性和表达式 属性文档
wx:if 实现控制语句比如：if/else, for
{{ }} 实现数据绑定
- .wxss 后缀的 WXSS 样式文件
类似CSS，用来描述页面的样子，具备CSS的大部分特性并进行了扩展 属性文档：
新增了尺寸单位 rpx（手机设备的屏幕会有不同的宽度和设备像素比，免去像素换算的烦恼）
提供了全局的样式和局部样式
仅支持部分 CSS 选择器
- .js 后缀的 JS 脚本逻辑文件
用来处理这个页面和用户的交互事件说明文档
七、小程序的启动流程
整个小程序只有一个 App 实例，是全部页面共享的，注册程序APP
八、页面Page
Page 是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构，于是就得到了你看到的小程序的样子。
onLoad方法：页面渲染完成之后执行
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})九、组件
十、小程序API
可以很方便的调起微信提供的能力，例如获取用户信息、微信支付等等
需要注意的是：多数 API 的回调都是异步，你需要处理好代码逻辑的异步问题