小程序开发-视图层与逻辑层

视图层

视图层用WXML与WXSS编写，由组件来进行展示，负责与逻辑层进行数据交互。
组件（component）是视图的基本组成单元。
WXML用来描述页面的结构，WXSS用于描述页面的样式

1. 绑定数据

{{ }}大括号是数据绑定用的符号。绑定的数据来源于.js文件下的data.
可以进行组件属性、控制属性、关键字的绑定，并还可以进行运算。

2. 条件渲染

条件渲染使用wx:if来判断是否需要渲染该代码块，使用block wx:if判断多个组件

3. 列表渲染

列表渲染使用wx:for控制属性绑定一个数组，默认数组当前项的下表变量名为index，数组当前项的变量名为item；

4. 定义模板

定义模板使用<template />标签定义代码片段，使用name属性指定模板的名称，使用is属性声明需要使用的模板，然后将模板需要的数据传入。

5. 引用功能

• import引用
  import可以在当前文件中引用目标文件中的模板；
• include引用
  include可以将目标文件（除了 <template />）的整个代码复制粘贴到include的位置

逻辑层

逻辑层使用Javascript开发，负责将数据处理后发送给视图层，并接收视图层的事件反馈

注：

逻辑层在javascript的基础上做了一些扩展：

1. 增加了App和Page方法，进行程序和页面的注册；
2. 增加getApp和getCurrentPages方法，分别用来获取App实例和当前页面栈；
3. 提供丰富的API，如微信用户数据、扫一扫、支付等微信特有功能；
4. 每个页面有独立的作用域，提供模块化功能；
5. 框架并非运行在浏览器中，Javascript操作BOM与DOM的功能无法实现；
6. 开发者编写的所有代码最终将会打包成一个JavaScript文件，并在小程序启动时运行，直到小程序销毁。

App()注册程序

App()负责小程序的生命周期函数：

• onLaunch监听小程序初始化；
• onShow监听小程序显示；
• onHide监听小程序隐藏；
• onError错误监听函数。

Page()注册页面

Page()用来注册一个页面。

• onLoad监听页面加载；
• onReady监听页面初次渲染完成状态；
• onShow监听页面显示；
• onHide监听页面隐藏；
• onUnload监听页面卸载。