开发基础
页面组件（WXML）
小程序中使用 来实现页面结构。
1. 常见页面组件（标签）
| 标签 | 功能 | 标签 | 功能 |
|---|---|---|---|
| <view> | 视图容器 | <icon> | 图标文件 |
| <text> | 文本域 | <checkbox> | 复选框 |
| <button> | 按钮 | <radio> | 单选框 |
| <image> | 图片 | <input> | 输入框 |
| <form> | 表单 | <progress> | 进度条 |
2. <include> 标签
在wxml 文件中，可以使用 标签引用其他文件中的代码（）。
- 当一个
wxml页面中的代码过多时，利用\<include>将代码拆分到多个文件中，方便查找代码。 - 当多个
wxml页面中有相同的部分时，可以将公共部分抽离出来，保存到单独的wxml文件中，再通过\<include>引入，减少重复代码。
页面样式（WXSS）
WXSS（WeiXin Style Sheets） 用于描述 WXML 的组件样式。WXSS 具有 CSS 大部分特性。
1. 尺寸单位
微信小程序在 WXSS 中加入了新的尺寸单位 rpx（responsive pixel，响应式像素）。
为了方便换算，rpx 单位规定了任何手机屏幕的宽度都为 750rpx（逻辑像素），由小程序内部负责将逻辑像素转换成当前手机中的物理像素。
2. 样式导入
在 WXSS 中可以使用 语句导入外联样式表。
CSS
@import index.css;3. 全局样式
可以在项目根目录下创建全局样式文件，将公共样式卸载全局样式文件中。
配置文件（*.json）
页面配置分为页面级和应用级，pages 目录下的页面均可以使用 json 文件对页面效果进行配置，而 app.json 是应用级配置文件。
1. 页面级配置文件
在页面级配置文件中，可以修改页面的导航样式，控制页面是否允许上下滚动等。
| 属性 | 说明 |
|---|---|
| navigationBarBackgroundColor | 导航栏背景颜色，默认为#000000 |
| navigationBarTextStyle | 导航栏标题颜色，仅支持 black、white（默认） |
| navigationBarTitleText | 导航栏的标题内容 |
| backgroundColor | 窗口的背景颜色，默认为#ffffff |
| backgroundTextStyle | 下拉 loading 的样式，仅支持 dark（默认）、light |
| enablePullDownRefresh | 是否全局开启下拉刷新，默认为 false |
| onReachBottomDistance | 页面上拉触底事件触发时距页面底部距离（单位 rpx），默认 50 |
| disableScroll | 默认为 false。设置为 true 时，页面整体不能上下滚动 |
2. 应用级配置文件
项目根目录下的 app.json 为应用级配置文件。
| 属性 | 说明 |
|---|---|
| pages | 页面路径列表 |
| window | 全局默认窗口表现 |
| tabBar | 底部 tab 栏的表现 |
| networkTimeout | 网络超时时间 |
| debug | 是否开启调试模式，默认为 false |
| requireBackgroundModes | 需要在后台使用的能力，如音乐播放 |
| plugins | 使用到的插件 |
实例
JSON
{
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/form/form"
],
"window": {
"navigationBarTitleText": "比较两个数字大小",
"navigationBarBackgroundColor": "#369"
},
"networkTimeout": {
"request": 30000
},
"debug": true
}页面逻辑（*.js）
页面逻辑分为页面级和应用级，pages 目录下的页面均可以使用 js 文件对页面逻辑进行控制，而 app.js 是应用级页面逻辑文件。
1. 页面逻辑文件
JS
// pages/index/index.js
Page({
// 页面初始化数据
data: {},
// 生命周期函数
onLoad： function(options) {},
})页面逻辑通过 函数来注册一个页面，通过该对象可以指定页面的初始数据、生命周期函数、事件处理函数等。
| 属性 | 类型 | 说明 |
|---|---|---|
| data | Object | 页面的初始数据 |
| onLoad | Function | 生命周期回调函数，监听页面加载，一个页面只会触发一次 |
| onReady | Function | 生命周期回调函数，监听页面初次渲染完成，一个页面只会触发一次，可交互 |
| onShow | Function | 生命周期回调函数，监听页面显示，例：从后台切入前台时触发 |
| onHide | Function | 生命周期回调函数，监听页面隐藏，例：从前台切入后台时触发 |
| onUnload | Function | 生命周期回调函数，监听页面卸载，例：使用 和 |
| onPullDownRefresh | Function | 页面事件处理函数，监听用户下拉动作 |
| onReachBottom | Function | 页面事件处理函数，监听上拉触底 |
| onShareAppMessage | Function | 页面事件处理函数，用户单击右上角的分享按钮 |
| onPageScroll | Function | 页面事件处理函数，页面滚动会连续触发 |
| 其他 | Any | 开发者可以添加任意的函数或者数据，在页面的函数中可以通过 来访问 |
2. 组件事件处理函数
对比 e.target 和 e.currentTarget
- e.target 获取的是子元素的属性值集合
- e.currentTarget 获取的是父元素的属性值集合
常用冒泡事件
| 事件类型 | 触发条件 |
|---|---|
| touchstart | 手指触摸动作开始 |
| touchmove | 手指触摸后移动 |
| touchcancel | 手指触摸动作被打断，如来电提醒、弹窗 |
| touchend | 手指触摸动作结束 |
| tap | 手指触摸后马上离开 |
| longpress | 手指触摸后，超过 350ms 再离开。如果指定了事件回调函数并触发了这个事件，tap 事件将不会被触发 |
事件绑定与冒泡
为组件绑定事件有两种方式，bind 事件绑定、catch 事件绑定。
- bind 事件绑定特点是，不会阻止冒泡事件向上冒泡
- catch 事件绑定特点是，可以阻止冒泡事件向上冒泡
3. 应用级逻辑（注册程序）
在项目根目录下 app.js 文件中可以使用 App() 函数来实现注册小程序，以及小程序启动、显示、隐藏等操作。
JS
// app.js
App({
// 生命周期回调函数，小程序初始化完成时触发，全局只执行一次
onLaunch: function(options) {},
//
onShow: function(options){},
//
onHide: function(options){},
// 错误监听函数，小程序发生脚本错误，或API 调用失败时触发
onError: function(error){},
// 页面不存在监听函数
onPageNotFound: function(options) {},
})利用 App() 函数还可以保存一些所有页面中的共享数据，页面中可以通过 获取小程序实例后拿到这些共享数据。
js
// app.js
App({
txt: "hello world",
});
// pages/index/index.js
Page({
onReady() {
const app = getApp();
console.log(app.txt); // 'hello world'
},
});