使用全局配置文件app.json
app.json配置文件的作用
小程序根目录下的app.json文件用来对微信小程序进行全局配置，它决定了页面文件的路径、窗口表现、设置网络超时时间、设置多tab等
在app.json配置文件中，最主要配置节点是:
1.pages 数组：配置小程序的页面路径
2.window 对象：用于设置小程序的状态、导航条、标题、窗口背景色
3.tabBar 对象：配置小程序tab栏效果
pages – 配置小程序的页面路径
1.pages 用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径+文件名 信息
2.文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json、 .js、 .wxml 和 .wxss 四个文件进行处理
自动创建新页面
- 之前创建新页面，需要新建页面目录
->新建页面文件->修改pages数组 - 打开
app.json -> pages数组节点->新增页面路径并保存->自动创建路径对应的页面
设置默认首页
- 打开
app.json -> pages数组节点 - 按需调整数组中路径的顺序，即可修改默认首页
注意：
- 数组的第一项代表小程序的初始页面（首页）
- 小程序中新增/减少页面，都需要对 pages 数组进行修改
小程序窗口的组成部分
window节点常用的配置项
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
navigationBarTitleText |
String | 字符串 | 导航栏标题文字内容 |
navigationBarBackgroundColor |
HexColor |
#000000 | 导航栏背景颜色，如 #000000 |
navigationBarTextStyle |
String | white | 导航栏标题颜色，仅支持 black / white |
backgroundColor |
HexColor |
#ffffff | 窗口的背景色 |
backgroundTextStyle |
String | dark | 下拉 loading 的样式，仅支持 dark / light |
enablePullDownRefresh |
Boolean | false | 是否全局开启下拉刷新。 详见 Page.onPullDownRefresh |
onReachBottomDistance |
Number | 50 | 页面上拉触底事件触发时距页面底部距离，单位为px。 详见 Page.onReachBottom |
tabBar - 配置Tab栏
什么是tabBar
tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换；
小程序中通常将其分为底部tabBar和顶部tabBar
注意：tabBar中，只能配置最少2个、最多5个 tab 页签，当渲染顶部tabBar的时候，不显示icon，只显示文本
tabBar的组成部分
backgroundColor：导航条背景色selectedIconPath：选中时的图片路径borderStyle：tabBar上边框的颜色iconPath：未选中时的图片路径selectedColor：tab上的文字选中时的颜色color：tab上的文字默认（未选中）颜色
tabBar节点的配置项
| 属性 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| 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 | tabBar的位置，仅支持 bottom / top |
tabBar节点中list的配置项
| 属性 | 类型 | 必填 | 描述 |
|---|---|---|---|
| pagePath | String | 是 | 页面路径，必须在 pages 中先定义 |
| text | String | 是 | tab 上按钮文字 |
| iconPath | String | 否 | 图片路径；icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图。当 postion 为 top 时，不显示 icon。 |
| selectedIconPath | String | 否 | 选中时的图片路径；icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 postion 为 top 时，不显示 icon。 |
页面级别和全局级别配置的关系
小程序中，app.json 中的 window节点，可以全局配置小程序中每个页面的窗口表现；
如果某些小程序页面，想要拥有特殊的窗口表现，此时，“页面级别的.json配置文件”就可以实现这种需求；
总结：页面级别配置优先于全局配置生效。
页面配置文件中可选的配置项列表
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色，如 #000000 |
| navigationBarTextStyle | String | white | 导航栏标题颜色，仅支持 black / white |
| navigationBarTitleText | String | 导航栏标题文字内容 | |
| backgroundColor | HexColor | #ffffff | 窗口的背景色 |
| backgroundTextStyle | String | dark | 下拉loading的样式，仅支持 dark / light |
| enablePullDownRefresh | Boolean | false | 是否全局开启下拉刷新。 详见 Page.onPullDownRefresh |
| enReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离，单位为px。 详见 Page.onReachBottom |
| disableScroll | Boolean | false | 设置为 true 则页面整体不能上下滚动；只在页面配置中有效，无法在 app.json 中设置该项 |
**注意：**页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现
小程序中的生命周期
什么是生命周期
生命周期（Life Cycle）是指一个对象从 创建 -> 运行 -> 销毁 的整个阶段，强调的是一个时间段。
我们可以把每个小程序运行的过程，也概括为生命周期
- 小程序的启动，表示生命周期的开始
- 小程序的关闭，表示生命周期的结束
- 中间小程序运行的过程，就是小程序的生命周期
生命周期的两种类型
在小程序中，包含两种类型的生命周期：
- 应用生命周期：特指小程序从启动 -> 运行 -> 销毁的过程；
- 页面生命周期：特指小程序中，每个页面的加载 -> 渲染 -> 销毁的过程；
其中，页面的生命周期范围较小，应用程序的生命周期范围较大，如图所示：
什么是生命周期函数
**生命周期函数：**是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行；
**生命周期函数的作用：**允许程序员在特定的生命周期时间点上，执行某些特定的操作。例如，页面刚加载的时候，在生命周期函数中自动发起数据请求，获取当前页面的数据；
**注意：**生命周期强调的是时间段，生命周期函数强调的是时间点。
应用生命周期函数
app.js 是小程序执行的入口文件，在 app.js 中必须调用 App() 函数，且只能调用一次。其中，App() 函数是用来注册并执行小程序的。
App(Object) 函数接收一个Object参数，可以通过这个Object参数，指定小程序的生命周期函数。
例如：
App({
// 小程序初始化完成时，执行此函数，可以做一些初始化的工作。
onLaunch: function(options) {},
// 小程序显示到屏幕上的时候，执行此函数。
onShow : function(options) {},
// 小程序被最小化的时候，执行此函数。
onHide : function() {}
})
应用生命周期函数列表
页面生命周期函数
每个小程序页面，必须拥有自己的 .js 文件，且必须调用 Page() 函数，否则报错。其中Page() 函数用来注册小程序页面。
Page(Object) 函数接收一个Object参数，可以通过这个Object参数，指定页面的生命周期函数。
例如：
Page({
onLoad : function(options) {}, // 监听页面加载
onShow : function() {}, // 监听页面显示
onReady : function() {}, // 监听页面初次渲染完成
onHide : function() {}, // 监听页面隐藏
onUnload: function() {} // 监听页面卸载
})
页面生命周期函数列表
数据绑定与事件绑定
数据绑定
小程序中每个页面，由4部分组成，其中.js文件内可以定义页面的数据、生命周期函数、其他业务逻辑
如果要在.js文件内定义页面的数据，只需把数据定义到data节点下即可
Page({
data: {
info: 'init data', // 字符串类型的数据
array: [{msg: '1'}, {msg: '2'}] // 数组类型的数据
}
})
Mustache 语法格式
把data中的数据绑定到页面中渲染，使用 Mustache 语法（双大括号）将变量包起来即可；
语法格式：
<view>{{要绑定数据名称}}</view>
Mustache 语法的主要应用场景：
1.绑定内容
页面数据
Page({
data: {
message: 'Hello MINA!'
}
})
页面结构
<view>{{message}}</view>
2.绑定属性
页面数据
Page({
data: {
id: 0
}
})
页面结构
<view id="item-{{id}}"> </view>
3.运算（三元表达式、算术运算、逻辑判断、字符串运算、数据路径运算）
页面数据
Page({
data: {
flag: true
}
})
页面结构
<view> {{ flag ? ‘条件为真’ : ‘条件为假’ }} </view>
事件绑定
什么是事件
- 事件是视图层到逻辑层的通讯方式
- 事件可以将用户的行为反馈到逻辑层进行处理
- 事件可以绑定在组件上，当组件触发事件，就会执行逻辑层中对应的事件处理函数
- 事件对象可以携带额外信息，如 id, dataset, touches
bindtap绑定触摸事件
在小程序中，不存在网页中的 onclick 鼠标点击事件，而是通过 tap 事件来响应触摸行为；
通过 bindtap，可以为组件绑定触摸事件，语法如下
<view bindtap="tapName">点我 点我 ! </view>
在相应的Page定义中写上相应的事件处理函数，事件参数是event
Page({
tapName: function(event) {
console.log(event)
}
})
bindinput绑定文本框输入事件
在小程序中，通过 input 事件来响应文本框的输入事件；
通过 bindinput，可以为文本框绑定输入事件，语法如下：
<input bindinput=“inputName”></input>
在相应的Page定义中写上相应的事件处理函数，事件参数是event：
Page({
inputName: function(event) {
//event.detail.value 就能拿到每次输入框改变最新的值
console.log(event)
}
})
data和文本框之间的数据同步
监听文本框的数据变化
在文本框的 input 事件处理函数中，通过事件参数 event，能够访问到文本框的最新值
**语法：**event.detail.value
示例代码如下：
inputName: function (event) {
// 获取到文本框中最新的内容
console.log(event.detail.value)
}
修改data中的数据
通过 this.setData(dataObject) 方法，可以给页面中的 data 数据重新赋值
例如：监听文本框的数据变化，并把最新的值赋值给 data 中的 msg
示例代码如下：
inputName: function (event) {
this.setData({
msg: event.detail.value // 为 data 中的 msg 重新赋值
})
}
事件传参
不能在绑定事件的同时传递参数
小程序中的事件传参比较特殊，不能在为组件绑定事件的同时，为事件处理函数传递参数
例如，下面的代码将不能正常工作：
<button type="primary" bindtap='btnHandler(123)'>事件传参</button>
因为小程序会把 bindtap 后指定的值，统一当作事件名称来处理；
通过 data-* 自定义属性传参
如果要在组件触发事件处理函数的时候，传递参数，可以为组件提供 data-* 自定义属性传参。
示例代码如下：
<button bindtap='btnHandler’ data-info=“{{123}}”>事件传参</button>
其中，info 会被当作参数名，数值 123 会被当作参数值。这里可以使用变量来进行传递
获取 data-* 自定义属性中传递的参数
通过事件参数 event.target.dataset.参数名，能够获取 data-* 自定义属性传递到事件处理函数中的参数
示例代码如下：
btnHandler: function(event){
console.log(event.target.dataset.info)
}
wxs 脚本
相关概念
什么是 wxs
wxs（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构
wxs 的注意点
- 没有兼容性：wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行
- 与
javascript不同：wxs与javascript是不同的语言，有自己的语法，并不和javascript一致 - 隔离性：
wxs的运行环境和其他javascript代码是隔离的，wxs中不能调用其他javascript文件中定义的函数，也不能调用小程序提供的API - 不能作为事件回调：
wxs函数不能作为组件的事件回调 iOS设备上比javascript运行快：由于运行环境的差异，在iOS设备上小程序内的wxs会比javascript代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异
wxs 遵循 CommonJS 模块化规范
CommonJS 是 javascript 的模块化规范之一，小程序的脚本语言 wxs 遵循了 CommonJS 规范，因此，使用 wxs 时的体验和使用 node.js 的体验比较相似
在 wxs 中，可以使用 CommonJS 中规定的如下成员：
- **module 对象：**每个
wxs都是独立的模块，每个模块均有一个内置的module对象，每个模块都有自己独立的作用域 - **module.exports：**由于
wxs拥有独立作用域，所以在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见，通过 module.exports 属性，可以对外共享本模块的私有变量与函数 - **require函数：**在
.wxs模块中引用其他wxs文件模块，可以使用 require 函数
wxs 基础语法
使用 module.exports 向外共享成员
通过 module.exports 属性，可以对外共享本模块的私有变量与函数。
示例代码如下：
var foo = “‘hello world’ from wxs”; // 定义私有变量 foo
var bar = function (d) { // 定义私有函数 bar
return d;
}
module.exports = { // 通过 modules.exports 向外共享私有成员
FOO: foo, // 向外共享私有变量 foo
bar: bar, // 向外共享私有函数 bar
};
module.exports.msg = “some msg”; // 额外向 module.exports 中挂载 msg 变量
使用 require 引入其它 wxs 模块
假设有两个 wxs 模块，路径分别为 /pages/tools.wxs 和 /pages/logic.wxs，如果要在 logic.wxs 中引入 tools.wxs 脚本.
则示例代码如下：
// 使用 require 导入 tools.wxs 脚本
var tools = require("./tools.wxs");
// 得到的 tools 对象，可以直接访问到 tools.wxs 中向外暴露的变量和方法
使用 require 的注意点
在.wxs模块中引用其他 wxs 文件模块，可以使用 require 函数
引用的时候，要注意如下几点：
- 只能引用
.wxs文件模块，且必须使用相对路径 wxs模块均为单例，wxs模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个wxs模块对象- 如果一个
wxs模块在定义之后，一直没有被引用，则该模块不会被解析与运行
支持的数据类型
WXS 语言目前共有以下8种数据类型：
- number 数值类型
- string 字符串类型
- boolean 布尔类型
- object 对象类型、
- function 函数类型
- array 数组类型
- date 日期类型
regexp正则
详细的类型说明文档，请翻阅如下网址：
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/06datatype.html
**注意：**由于wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致，所以在使用以上8种数据类型的时候，一定要先翻阅官方文档，再进行使用
内嵌 wxs 脚本
wxs 代码可以编写在 wxml 文件中的 <wxs></wxs> 标签内，就像 javascript 代码可以编写在 html 文件中的 <script></script> 标签内一样
wxml 文件中的每个 <wxs></wxs> 标签，必须提供一个 module 属性，用来指定当前 <wxs></wxs> 标签的模块名。在单个 wxml 文件内，建议其值唯一
module 属性值的命名必须符合下面两个规则：
- 首字符必须是：字母
（a-zA-Z），下划线（_） - 剩余字符可以是：字母
（a-zA-Z），下划线（_）， 数字（0-9）
内嵌 wxs 脚本的示例代码
<wxs module="foo">
var some_msg = "hello world";
module.exports = {
msg : some_msg,
}
</wxs>
<view> {{foo.msg}} </view>
外联 wxs 脚本
wxs 代码还可以编写在以 .wxs 为后缀名的文件内，就像 javascript 代码可以编写在以 .js 为后缀名的文件中一样
在微信开发者工具里面，右键可以直接创建 .wxs 文件，在其中直接编写 WXS 脚本
示例代码如下：
// /pages/tools.wxs
var foo = "'hello world' from tools.wxs";
var bar = function (d) {
return d;
}
module.exports = {
FOO: foo,
bar: bar,
};
module.exports.msg = "some msg";
wxml 内引用外联的 wxs 脚本
在 wxml 中如果要引入外联的 wxs 脚本，必须为 <wxs></wxs> 标签添加 module 和 src 属性
- module 用来为
<wxs></wxs>标签指定模块名，作为当前页面访问这个模块的标识名称 src用来指定当前<wxs></wxs>标签要引入的脚本路径，必须是相对路径
示例代码如下：
<!-- page/index/index.wxml -->
<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>
WXS中不要使用高级js的语法，ES6的语法不要去用
