1.小程序代码构成
通过开发者工具快速创建了一个 wechatdemo 项目。项目里边生成了不同类型的文件:
.json为配置文件
.wxml 为模板文件，相当于HTML模板
.wxss 为样式文件，相当于HTML的CSS样式表
.js 为JS 脚本逻辑文件，相当于HTML的js脚本
一个描述整体程序的 app
多个描述各自页面的 pages
一个项目IDE配置文件 project.config.json
一个共用程序逻辑库 utils
2.一个小程序主体部分(名称为app)由三个文件组成，必须放在项目的根目录
文件 作用 必填
app.js 小程序逻辑 是
app.json 小程序公共配置 是
app.wxss 小程序公共样式表 否
2.1 一个描述整体程序的 app 之app.js文件(注册小程序项目)
2.不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。
3.不要在 onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。
4.通过 getApp() 获取实例之后，不要私自调用生命周期函数。
相当于ApplicationContext，在整个小程序上下文中都以使用，即服务整个小程序scope。
app.js程序主体逻辑层使用this访问，在页面.js逻辑层使用getApp().属性名称可以访问。
// app.js
App({
onLaunch (options) {
// Do something initial when launch.
},
onShow (options) {
// Do something when show.
},
onHide () {
// Do something when hide.
},
onError (msg) {
console.log(msg)
},
globalData: ‘I am global data‘
})
onLaunch(Object object)
小程序初始化完成时触发，全局只触发一次。参数也可以使用 wx.getLaunchOptionsSync 获取。
参数：与 wx.getLaunchOptionsSync 一致
onShow(Object object)
小程序启动，或从后台进入前台显示时触发。也可以使用 wx.onAppShow 绑定监听。
参数：与 wx.onAppShow 一致
onHide()
小程序从前台进入后台时触发。也可以使用 wx.onAppHide 绑定监听。
onError(String error)
小程序发生脚本错误或 API 调用报错时触发。也可以使用 wx.onError 绑定监听。
参数：与 wx.onError 一致
onPageNotFound(Object object)
基础库 1.9.90 开始支持，低版本需做兼容处理。
小程序要打开的页面不存在时触发。也可以使用 wx.onPageNotFound 绑定监听。注意事项请参考 wx.onPageNotFound。
参数：与 wx.onPageNotFound 一致
2.2 一个描述整体程序的 app 之app.json文件(配置小程序项目)
作用：对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
所有的选项配置pages、window、tabBar、networkTimeout、debug
app.json 配置项列表:
属性 类型 必填 描述
pages String Array 是 设置页面路径
window Object 否 设置默认页面的窗口表现
tabBar Object 否 设置底部 tab 的表现
networkTimeout Object 否 设置网络超时时间
debug Boolean 否 设置是否开启 debug 模式
"pages": [
//这里的的第一个页面作为首页显示
"pages/index/index",
"pages/logs/logs"
],
//小程序中新增/减少页面，都需要对 pages 数组进行修改
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "演示",
"navigationBarTextStyle": "black"
},
属性 类型 默认值 描述 最低版本
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色，如 #000000
navigationBarTextStyle string white 导航栏标题颜色，仅支持 black / white
navigationBarTitleText string wechat 导航栏标题文字内容
navigationStyle string default 导航栏样式，仅支持以下值：default 默认样式；custom 自定义导航栏，只保留右上角胶囊按钮 微信客户端 7.0.0
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle string dark 下拉 loading 的样式，仅支持 dark / light
backgroundColorTop string #ffffff 顶部窗口的背景色，仅 iOS 支持 微信客户端 6.5.16
backgroundColorBottom string #ffffff 底部窗口的背景色，仅 iOS 支持 微信客户端 6.5.16
enablePullDownRefresh boolean false 是否开启当前页面下拉刷新。详见 Page.onPullDownRefresh
onReachBottomDistance number 50 页面上拉触底事件触发时距页面底部距离，单位为px。详见 Page.onReachBottom
pageOrientation string portrait 屏幕旋转设置，支持 auto / portrait / landscape 详见 响应显示区域变化2.4.0 (auto) / 2.5.0 (landscape)
disableScroll boolean false 设置为 true 则页面整体不能上下滚动。只在页面配置中有效，无法在 app.json 中设置
usingComponents Object 否 页面自定义组件配置 1.6.3
style string default 启用新版的组件样式 2.10.2
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "page/component/index",
"iconPath": "image/icon_component.png",
"selectedIconPath": "image/icon_component_HL.png",
"text": "组件"
},
{
"pagePath": "page/weui/example/index",
"iconPath": "image/icon_component.png",
"selectedIconPath": "image/icon_component_HL.png",
"text": "扩展组件"
},
{
"pagePath": "page/API/index",
"iconPath": "image/icon_API.png",
"selectedIconPath": "image/icon_API_HL.png",
"text": "接口"
},
{
"pagePath": "page/cloud/index",
"iconPath": "image/icon_cloud.png",
"selectedIconPath": "image/icon_cloud_HL.png",
"text": "云开发"
}
]
},
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象。
tabBar配置传送门，传送门里比我这里详细多了。。。
3.多个描述各自页面的 pages(pages目录存储小程序的每个页面)
文件 作用 必填
页面名称.js 本页面逻辑逻辑 是
页面名称.json 本页面配置 否
页面名称.wxml 本页面结构 是
页面名称.wxss 本页面样式表 否
3.1 页面的js逻辑层(注册页面)
页面的逻辑层：其主要功能就是“注册页面”，每个页面目录/页面名称.js
页面注册的使用：与app.js的注册小程序项目函数App(Object)类似使用
Page(Object)；Object参数对象{}表示，其指定页面的初始数据、生命周期函数、事件处理函数等。
//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// 页面创建时执行
},
onShow: function() {
// 页面出现在前台时执行
},
onReady: function() {
// 页面首次渲染完毕时执行
},
onHide: function() {
// 页面从前台变为后台时执行
},
onUnload: function() {
// 页面销毁时执行
},
onPullDownRefresh: function() {
// 触发下拉刷新时执行
},
onReachBottom: function() {
// 页面触底时执行
},
onShareAppMessage: function () {
// 页面被用户分享时执行
},
onPageScroll: function() {
// 页面滚动时执行
},
onResize: function() {
// 页面尺寸变化时执行
},
onTabItemTap(item) {
// tab 点击时执行
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// 事件响应函数
viewTap: function() {
this.setData({
text: ‘Set some data for updating view.‘
}, function() {
// this is setData callback
})
},
// *数据
customData: {
hi: ‘MINA‘
}
})
3.2 页面的json配置(页面名称.json)
每一个页面也可以使用.json文件来对本页面的窗口表现进行配置。
页面的配置比app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。
页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键。
总结：每个页面.json(页面配置)，其实就是对app.json的window配置项进行继承覆盖重写
应用：app.json中配置了启用上下拉刷新，但某些页面不需要，那么就可以在页面名.json中进行重写禁用了。又比如每个页的标题，也是需要重写的。
{
"navigationBarBackgroundColor":"#ffffff",
"navigationBarTextStyle":"black",
"navigationBarTitleText":"微信接口功能演示",
"backgroundColor":"#eeeeee",
"backgroundTextStyle":"light"
}
所有app.json中的window配置项在页面名.json中都是可以覆盖重写的，
但页面名.json配置又有自己的特性是app.json小程序全局配置没有的。
属性 类型 默认值 描述
disableScroll Boolean false 设置为 true 则页面整体不能上下滚动；
只在 page.json 中有效，无法在 app.json 中设置该项。
3.3 页的视图层(页面名称.wxml 和 页面名称.wxss)
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
数据绑定
<!--wxml--> <view> {{message}} </view>
// page.js
Page({
data: {
message: ‘Hello MINA!‘
}
})
列表渲染
<!--wxml--> <view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5]
}
})
条件渲染
<!--wxml--> <view wx:if="{{view == ‘WEBVIEW‘}}"> WEBVIEW </view> <view wx:elif="{{view == ‘APP‘}}"> APP </view> <view wx:else="{{view == ‘MINA‘}}"> MINA </view>
// page.js
Page({
data: {
view: ‘MINA‘
}
})
定义模板
WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。
<!--pages/item/item.wxml-->
<template name="msgItem"> <view> <text> {{index}}: {{msg}} </text> <text> Time: {{time}} </text> </view> </template>
使用模板
使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：
<!--pages/index/index.wxml-->
<import src="../item/item.wxml"/> <template is="msgItem" data="{{...item}}"/>
<!--pages/index/index.js-->
Page({
data: {
item: {
index: 0,
msg: ‘this is a template‘,
time: ‘2016-09-15‘
}
}
})
模板的作用域
模板拥有自己的作用域，只能使用 data 传入的数据以及模板定义文件中定义的 <wxs /> 模块。
3.4 WXS
（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。
4.根目录下的project.config.json
1).项目配置文件或称为项目IDE配置文件
在“微信开发者工具”上做的任何配置都会写入到这个文件。
2).应用场景：
通常在使用一个开发IDE工具的时候，都会针对各自喜好做一些个性化配置，
例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。
3).解决办法：就是这个project.config.json项目IDE配置文件
当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，
开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，
其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项
4).引申
这么说，每个项目都可以定制了一套自己喜欢的IDE配置
5.一个共用程序逻辑库(util目录)
这个目录可以自定义名称
公共的js函数文件，通过module.exports的方式暴露pages下的每个页面使用
不需要每个页面编写重复的Js代码。