准备工作
官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1475052055990
开发工具：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1475052055364
开发工具安装好后，新建一个项目，记得取消勾选“创建quick start项目”
10-40-43.jpg
从Hello，World！开始
了解下目录结构
小程序 = app程序主体 + 页面pages
app程序主体文件结构：
- app.js（必填）
小程序的逻辑。通过app()函数注册一个小程序，并指定生命周期函数。 - app.json（必填）
小程序的公共设置。页面路径、窗口表现、tabBar、网络超时等配置项。 - app.wxss
小程序公共样式表。可以理解成common.css，不是必填，每个页面可以有自己的样式表，也可以引用公共样式表。
页面page文件结构：
- js文件（必填）
页面逻辑。在这里注册页面，初始化数据、生命周期函数、事件处理函数等。 - wxml文件（必填）
页面结构，可以理解成html。 - wxss
页面样式表，理解成单个页面的css文件，可以为页面单独设置样式。 - json
页面配置。只能配置window相关配置项，改变窗体表现。
创建app.js
通过开发工具的提示，使用App函数，快速生成一个小程序。
App({
onLaunch: function () {
console.log('App Launch')
},
onShow: function () {
console.log('App Show')
},
onHide: function () {
console.log('App Hide')
}
})
创建app.json
一个app.json文件的配置项包含：
- pages（必填）---页面路径管理
一个数组，每一项是字符串“路径+文件名”，指定小程序由哪些页面组成，数组第一项作为初始页面。文件名不需要后缀。
"pages":[
"pages/index/index"
"pages/logs/logs"
]
```
后面这几个不是必备，等以后用到的时候再展开
- window---设置窗口表现
- tabBar---设置tabBar
- networkTimeout---设置网络请求超时时间
- debug
所以我们的app.json代码如下
{
"pages":[
"pages/index/index"
]
}
创建index页面
为了便于管理，一般页面会放在pages文件夹下，一个页面一个子文件夹，里面包含js文件、wxml文件、wxss文件、json文件（4个文件名必须一致）。
12-10-11.jpg
index.js
用Page函数快速生成页面实例
Page({
data:{
// text:"这是一个页面"
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})
index.wxml
把view换成div是不是很容易理解
<view id="hello-world">
Hello,World!
<view>
index.wxss
样式表的使用基本跟css一样
#hello-world{
text-align: center;
margin-top: 75%;
}
编译运行
12-26-57.jpg
好了，enjoy it！下回见：）
