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

2019-05-29  本文已影响0人  wanncy

视图层

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

1. 绑定数据

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

2. 条件渲染

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

3. 列表渲染

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

4. 定义模板

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

5. 引用功能

逻辑层

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

注:

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

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

App()注册程序

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

Page()注册页面

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

上一篇 下一篇

猜你喜欢

热点阅读