微信小程序的文件结构 —— 微信小程序教程系列（1）
文件结构
示例目录：HelloWorld
*******************************************************分割线********************************************************
全局文件
app.js文件
这个是小程序的脚本代码文件，可以在这个文件上进行监听，并处理小程序的一些生命周期（比如一些全局变量）
在这个app.js文件内，需要使用App()函数，来注册程序。
演示：
//app.js
App({
onLaunch: function () {
//当小程序初始化完成时，会触发onLaunch（全局只触发一次）
},
onShow: function () {
//当小程序启动，或从后台进入前台显示，会触发onShow
},
onHide: function () {
//当小程序从前台进入后台，会触发onHide
},
onError: function (msg) {
//当小程序发生脚本错误，或者api调用失败时，会触发onError并带上错误信息
},
other:function(){
//全局函数，可以被项目上的其他js文件调用
},
globalData:{
//全局对象
},
})
app.json文件
小程序的全局配置文件
pages
来指定小程序由哪些页面组成
接受一个数组，每一项都是字符串。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对pages数组进行修改。
文件名不需要写文件后缀，因为框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。
例如：
{
"pages":[
"pages/index/index",
"pages/logs/logs"
]
}
备注：pages内只需要写wxml文件的路径，其他文件不用写
window
用于设置小程序的状态栏、导航条、标题、窗口背景色
示例：
{
"window":{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
}
tabBar
如果我们的小程序是一个多 tab应用（客户端窗口的底部或顶部有 tab栏可以切换页面），那么我们可以通过 tabBar配置项指定 tab栏的表现，以及 tab切换时显示的对应页面。
Tip： 通过页面跳转（wx.navigateTo）或者页面重定向（wx.redirectTo）所到达的页面，即使它是定义在 tabBar配置中的页面，也不会显示底部的 tab栏。
tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab按数组的顺序排序。
示例：
{
"tabBar": {
"color":"#818181",
"selectedColor":"#0082D7",
"borderStyle":"white",
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath":"images/tabbar/index@2x.png",
"selectedIconPath":"images/tabbar/index[email protected]"
}, {
"pagePath": "pages/me/me",
"text": "设置",
"iconPath":"images/tabbar/me@2x.png",
"selectedIconPath":"images/tabbar/me[email protected]"
}]
}
}
networkTimeout
可以设置各种网络请求的超时时间。
示例：
{
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
}
}
debug
可以在开发者工具中开启 debug模式，在开发者工具的控制台面板，调试信息以 info的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发 。 可以帮助开发者快速定位一些常见的问题。
示例：
{
"debug": false
}
app.wxss文件
定义全局的样式
基本上与css差不多，这里不用多讲
*******************************************************分割线********************************************************
一个页面的内部
xxx.js
逻辑主函数
Page({
})
示例：
//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// Do some initialize when page load.
},
onReady: function() {
// Do something when page ready.
},
onShow: function() {
// Do something when page show.
},
onHide: function() {
// Do something when page hide.
},
onUnload: function() {
// Do something when page close.
},
onPullDownRefresh: function() {
// Do something when pull down.
},
onReachBottom: function() {
// Do something when page reach bottom.
},
onShareAppMessage: function () {
// return custom share data when user share.
},
// Event handler.
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
})
},
customData: {
hi: 'MINA'
}
})
示例：
Page({
onShareAppMessage: function () {
return {
title: '自定义分享标题',
desc: '自定义分享描述',
path: '/page/user?id=123'
}
}
})
xxx.wxml
使用微信提供的组件来代替html元素
示例：
xxx.wxss
小程序样式，与css样式基本相似，这里不重复论述
在当前页面的wxss文件内编辑的css样式，只能使用在当前页面
xxx.json
每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多，只是设置 app.json中的 window配置项的内容，页面中配置项会覆盖 app.json的 window中相同的配置项。
页面的.json只能设置 window相关的配置项，以决定本页面的窗口表现，所以无需写 window这个键
示例：
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
微信小程序教程系列
相关连接：http://blog.csdn.net/michael_ouyang/article/details/54700871
注册上线篇
------------------------------------------------------------
微信小程序之如何注册微信小程序
微信小程序之小程序上线
基础篇
------------------------------------------------------------
微信开发者工具的快捷键
微信小程序的文件结构 —— 微信小程序教程系列（1）
微信小程序的生命周期实例演示 —— 微信小程序教程系列（2）
微信小程序的动态修改视图层的数据 —— 微信小程序教程系列（3）
微信小程序的新建页面 —— 微信小程序教程系列（4）
微信小程序的如何使用全局属性 —— 微信小程序教程系列（5）
微信小程序的页面跳转 —— 微信小程序教程系列（6）
微信小程序标题栏和导航栏的设置 —— 微信小程序教程系列（7）
微信小程序的作用域和模块化 —— 微信小程序教程系列（8）
微信小程序视图层的数据绑定 —— 微信小程序教程系列（9）
微信小程序视图层的条件渲染 —— 微信小程序教程系列（10）
微信小程序视图层的列表渲染 —— 微信小程序教程系列（11）
微信小程序视图层的模板 —— 微信小程序教程系列（12）
微信小程序之wxss —— 微信小程序教程系列（13）
微信小程序的网络请求 —— 微信小程序教程系列（14）
微信小程序的百度地图获取地理位置 —— 微信小程序教程系列（15）
微信小程序使用百度api获取天气信息 —— 微信小程序教程系列（16）
微信小程序获取系统日期和时间 —— 微信小程序教程系列（17）
微信小程序之上拉加载和下拉刷新 —— 微信小程序教程系列（18）
微信小程序之组件 —— 微信小程序教程系列（19）
微信小程序之微信登陆 —— 微信小程序教程系列（20）
实战篇
------------------------------------------------------------
微信小程序之顶部导航栏实例 —— 微信小程序实战系列（1）
微信小程序之上拉加载（分页加载）实例 —— 微信小程序实战系列（2）
微信小程序之轮播图实例 —— 微信小程序实战系列（3）
微信小程序之仿android fragment之可滑动的底部导航栏实例 —— 微信小程序实战系列（4）
微信小程序之登录页实例 —— 微信小程序实战系列（5）
微信小程序之自定义toast实例 —— 微信小程序实战系列（6）
微信小程序之自定义抽屉菜单（从下拉出）实例 —— 微信小程序实战系列（7）
微信小程序之自定义模态弹窗（带动画）实例 —— 微信小程序实战系列（8）
电商篇
------------------------------------------------------------
微信小程序之侧栏分类 —— 微信小程序实战商城系列（1） 微信小程序之仿淘宝分类入口 —— 微信小程序实战商城系列（2）
微信小程序之购物数量加减 —— 微信小程序实战商城系列（3）
微信小程序之商品属性分类 —— 微信小程序实战商城系列（4）
微信小程序之购物车 —— 微信小程序实战商城系列（5）
更多小程序的教程：http://blog.csdn.net/column/details/14653.html