小程序目录结构
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：
文件 必填 作用 app.js 是 小程序逻辑 app.json 是 小程序公共设置 app.wxss 否 小程序公共样式表
一个小程序页面由四个文件组成，分别是：
文件类型 必填 作用 js 是 页面逻辑 wxml 是 页面结构 wxss 否 页面样式表 json 否 页面配置
注意：为了方便开发者减少配置项，我们规定描述页面的这四个文件必须具有相同的路径与文件名
配置
app.json 文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
以下是一个包含了所有配置选项的简单配置app.json ：
{
"pages": [
"pages/index/index",
"pages/logs/index"
],
"window": {
"navigationBarTitleText": "Demo"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/logs/logs",
"text": "日志"
}]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true
}
app.json 配置项列表
属性 类型 必填 描述 pages StringArray 是 设置页面路径 window Object 否 设置默认页面的窗口表现 tabBar Object 否 设置底部 tab 的表现 networkTimeout Object 否 设置网络超时时间 debug Boolean 否 设置是否开启 debug 模式
pages
接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。
文件名不需要写文件后缀，因为框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。
如开发目录为：
pages/
pages/index/index.wxml
pages/index/index.js
pages/index/index.wxss
pages/logs/logs.wxml
pages/logs/logs.js
app.js
app.json
app.wxss
则，我们需要在 app.json 中写
{
"pages":[
"pages/index/index"
"pages/logs/logs"
]
}
window
用于设置小程序的状态栏、导航条、标题、窗口背景色。
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色，如"#000000" navigationBarTextStyle String white 导航栏标题颜色，仅支持 black/white navigationBarTitleText String 导航栏标题文字内容 backgroundColor HexColor #ffffff 窗口的背景色 backgroundTextStyle String dark 下拉背景字体、loading 图的样式，仅支持 dark/light enablePullDownRefresh Booleanfalse 是否开启下拉刷新
注：HexColor（十六进制颜色值），如"#ff00ff"
如 app.json ：
{
"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 按数组的顺序排序。
属性说明：
属性 类型 必填 默认值 描述 color HexColor 是 tab 上的文字默认颜色 selectedColor HexColor 是 tab 上的文字选中时的颜色 backgroundColor HexColor 是 tab 的背景色 borderStyle String 否 black tabbar上边框的颜色，仅支持 black/white list Array 是 tab 的列表，详见 list 属性说明，最少2个、最多5个 tab position String 否 bottom 可选值 bottom、top
其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下：
属性 类型 必填 说明 pagePath String 是 页面路径，必须在 pages 中先定义 text String 是 tab 上按钮文字 iconPath String 是 图片路径，icon 大小限制为40kb selectedIconPath String 是 选中时的图片路径，icon 大小限制为40kb
networkTimeout
设置各种网络请求的超时时间。
属性说明：
属性 类型 必填 说明 request Number 否 wx.request的超时时间，单位毫秒，默认为：60000 connectSocket Number 否 wx.connectSocket的超时时间，单位毫秒，默认为：60000 uploadFile Number 否 wx.uploadFile的超时时间，单位毫秒，默认为：60000 downloadFile Number 否 wx.downloadFile的超时时间，单位毫秒，默认为：60000
page.json
每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。
页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键，如：
属性类型默认值描述 navigationBarBackgroundColor HexColor #000000 导航栏背景颜色，如"#000000" navigationBarTextStyle String white 导航栏标题颜色，仅支持 black/white navigationBarTitleText String 导航栏标题文字内容 backgroundColor HexColor #ffffff 窗口的背景色 backgroundTextStyle String dark 下拉背景字体、loading 图的样式，仅支持 dark/light enablePullDownRefresh Boolean false 是否开启下拉刷新，详见页面相关事件处理函数。 disableScroll Boolean false 设置为true则页面整体不能上下滚动；只在 page.json 中有效，无法在 app.json 中设置该项
如
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
底部导航修改步骤
1、制作图标并保存到项目(在项目下创建imgs文件夹保存图标文件)
|_ imgs
|_ icon_1.png
|_ icon_2.png
2、修改app.json
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "imgs/icon_1.png",
"selectedIconPath": "imgs/icon_1.png"
}, {
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "imgs/icon_2.png",
"selectedIconPath": "imgs/icon_2.png"
}]
}
}
注册程序 App()
App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。object参数说明：
属性 类型 描述 触发时机
onLaunch Function生命周期函数--监听小程序初始化当小程序初始化完成时，会触发 onLaunch（全局只触发一次） onShow Function生命周期函数--监听小程序显示当小程序启动，或从后台进入前台显示，会触发 onShow onHide Function生命周期函数--监听小程序隐藏当小程序从前台进入后台，会触发 onHide onError Function错误监听函数当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息其他Any开发者可以添加任意的函数或数据到Object参数中，用this可以访问
前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。
只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。示例：
App({
onLaunch: function() {
// Do something initial when launch.
},
onShow: function() { // Do something when show.
},
onHide: function() { // Do something when hide.
},
onError: function(msg) { console.log(msg)
},
globalData: 'I am global data'
})
getApp()
小程序提供了全局的 getApp() 函数，可以获取到小程序实例。// other.js var appInstance = getApp() console.log(appInstance.globalData) // I am global data
注意：
App() 必须在 app.js 中注册，且不能注册多个。不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。
不要在 onLaunch 的时候调用 getCurrentPage()，此时 page 还没有生成。
通过 getApp() 获取实例之后，不要私自调用生命周期函数。
注册页面 Page()
Page()函数用来注册一个页面。接受一个object参数，其指定页面的初始数据、生命周期函数、事件处理函数等 object参数说明： 属性 类型 描述 data Object 页面的初始数据 onLoad Function 生命周期函数--监听页面加载 onReady Function 生命周期函数--监听页面初次渲染完成 onShow Function 生命周期函数--监听页面显示 onHide Function 生命周期函数--监听页面隐藏 onUnload Function 生命周期函数--监听页面卸载 onPullDownRefresh Function 页面相关事件处理函数--监听用户下拉动作 onReachBottom Function 页面上拉触底事件的处理函数 onShareAppMessage Function 用户点击右上角分享其他Any开发者可以添加任意的函数或数据到object参数中，在页面的函数中用this可以访问
初始化数据
初始化数据将作为页面的第一次渲染。data 将会以 JSON 的形式由逻辑层传至渲染层，所以其数据必须是可以转成 JSON 的格式：字符串，数字，布尔值，对象，数组。
渲染层可以通过 WXML 对数据进行绑定。
示例代码：
<view>{{text}}</view>
<view>{{array[0].msg}}</view>
Page({
data: {
text: 'init data',
array: [{msg: '1'}, {msg: '2'}]
}
})
生命周期函数说明
onLoad: 页面加载一个页面只会调用一次。
接收页面参数可以获取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。
onShow: 页面显示
每次打开页面都会调用一次。
onReady: 页面初次渲染完成
一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期
onHide: 页面隐藏
当navigateTo或底部tab切换时调用。
onUnload: 页面卸载
当redirectTo或navigateBack的时候调用。
页面相关事件处理函数
onPullDownRefresh: 下拉刷新
监听用户下拉刷新事件。
需要在config的window选项中开启enablePullDownRefresh。
当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
onShareAppMessage: 用户分享
只有定义了此事件处理函数，右上角菜单才会显示“分享”按钮
用户点击分享按钮的时候会调用
此事件需要 return 一个 Object，用于自定义分享内容
分享设置演示
Page({
......,
onShareAppMessage: function () {
return {
title: '自定义分享标题',
desc: '自定义分享描述',
path: '/page/user?id=123'
}
}
})
事件处理函数
除了初始化数据和生命周期函数，Page 中还可以定义一些特殊的函数：事件处理函数。在渲染层可以在组件中加入事件绑定，当达到触发事件时，就会执行 Page 中定义的事件处理函数。
示例代码：
<view bindtap="viewTap"> click me </view>
Page({
viewTap: function() {
wx.showToast({title:'hi'});
}
})
Page.prototype.setData()
setData 函数用于将数据从逻辑层发送到视图层，同时改变对应的 this.data 的值。注意：
直接修改 this.data 无效，无法改变页面的状态，还会造成数据不一致。
单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
setData() 参数格式
接受一个对象，以 key，value 的形式表示将 this.data 中的 key 对应的值改变成 value。
其中 key 可以非常灵活，以数据路径的形式给出，如 array[2].message，a.b.c.d，并且不需要在 this.data 中预先定义。
示例代码：
Page({
data:{
"text1":"hi"
},
myfunc : function(){
//wx.showToast({title:'hi'});
this.setData({"text1":"hi......"});
}
});
页面跳转
wx.navigateTo({
url: "../logs/logs"
})
文件作用域
在 JavaScript 文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。
通过全局函数 getApp() 可以获取全局的应用实例，如果需要全局的数据可以在 App() 中设置，如：
// app.js
App({
globalData:{
appName :'hcoder'
}
})
// page.js
var app = getApp();
Page({
data:{},
myfunc : function(){
//wx.showToast({title:'hi'});
this.setData({"text1":"hi......"});
},
onLoad: function(){
this.setData({'appName':app.globalData.appName});
}
});
模块化（js引用）
我们可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。
需要注意的是：
exports 是 module.exports 的一个引用，因此在模块里边随意更改 exports 的指向会造成未知的错误。所以我们更推荐开发者采用 module.exports 来暴露模块接口，除非你已经清晰知道这两者的关系。
示例 :
//common.js
function toast(msg){
wx.showToast({title:msg});
}
module.exports.toast = toast;
//页面调用
var app = getApp();
var common = require('../../common.js');
Page({
data:{
},
myfunc : function(){
common.toast('ok');
this.setData({"text1":"hi......"});
},
onLoad: function(){
this.setData({'appName':app.globalData.appName});
}
});