小程序入门

微信小程序来啦！！！！！！！

一： 小程序的目录

1.1 目录框架

1.2 app.js 文件解析

每个小程序都需要在 app.js (名称不可改)中调用 App 方法来注册小程序实例，可以说该文件是小程序的入口文件。同时该文件也是用来定义小程序的全局数据和函数，控制、监听小程序的全生命周期。定义的函数及数据都是全局共享的，其他页面可以直接使用全局函数和数据。而生命周期函数可以针对不同场景可以调用不同的生命周期函数，如onlaunch(监听小程序初始化)，onshow(监听小程序显示)，onhide(监听小程序隐藏)等。这里需要注意的是App() 必须在 app.js 中注册且只有一个 App 实例，通过 getApp 方法可以获取到全局唯一的 App 实例，但不要在 App() 函数中调用 getApp() 方法，使用 this 就可以拿到 App 实例。

1.3 app.json文件

该文件是一个json对象，用于对小程序进行全局配置(该文件中不能有注释)。它可以配置页面路径，窗口表现，tabBar标签导航，网络超时，debug模式，其中pages对象用来配置小程序的里面所有的页面路径(该对象是个数组且第一个是小程序的首页)，页面路径不需要写任何后缀，系统会自动去加载同名的 .json、.js、.wxml、.wxss 文件。window对象用于设置小程序的窗口表现，包括状态栏、导航条、标题、窗口背景色等。tabBar对象用于设置标签导航，就是小程序窗口底部的菜单栏，可以实现快速切换页面。

1.4 WXML文件

WXML是一套类似HTML的标签语言，是用来构建页面结构的。标签虽然与HTML有点不同但用法基本一致，同时还具备了类似Vue框架的特性，支持列表循环、条件渲染、模板引用及数据绑定等功能。一段完整的WXML语句由一个开始标签和一个结束标签组成，在标签中可以是内容也可以是其它WXML标签。这里需要注意的是WXML要求标签必需是严格闭合的，没有闭合将会导致编译错误。

1.5 WXSS文件

WXSS是一套样式语言，用于描述 WXML 的组件样式。通过定义WXSS来控制页面的呈现样式的，这个跟HTML中的CSS功能差不多(WXSS 具有 CSS 大部分特性并在CSS基础上进行了扩充以及修改)。app.wxss与页面中的.wxss文件不同之处在于它的作用域是全局，而页面中的.wxss文件只能作用于当前页面。

二： 逻辑层

2.1 注册小程序

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。

整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取App上的数据或调用开发者注册在 App 上的函数。

2.2 注册页面

对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。

2.2.1 使用 Page 构造器注册页面

2.2.2 在页面中使用 behaviors

页面可以引用 behaviors 。 behaviors 可以用来让多个页面有相同的数据字段和方法。

2.2.3 页面可以引用 behaviors 。 behaviors 可以用来让多个页面有相同的数据字段和方法。

2.3 页面路由

在小程序中所有页面的路由全部由框架进行管理。

2.4 生命周期

三： 视图层

3.1 WXML 配置

3.1.1 数据绑定

3.1.2 列表渲染

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态(如 input 中的输入内容，switch 的选中状态)，需要使用 wx:key 来指定列表中项目的唯一的标识符。

3.1.3 条件渲染

3.1.4 模板

3.1.5 引用

WXML 提供两种文件引用方式import和include

3.2 WXSS 配置

四： 组件开发