微信小程序之逻辑层与界面层03

微信小程序之逻辑层与界面层03

逻辑层(JavaScript)

在小程序中,我们认知的JavaScript是和小程序中的JavaScript是有些不同的

1.小程序不是运行在游览器中的,所以是没有DOM和BOM对象的

2.在小程序的Javascript中有一些额外的成员

APP() 用于定义应用程序的实例对象

Page() 用于定义对象

getAPP() 用于获取到应用程序的实例对象

getCurrentPages()用来获取当前页面的调用栈(数组,也就是最后一个也就是当前页面)

wx对象 用来提供额外的API的

3.小程序中的JavaScript是支持Commonjs规范的(了解node.js即可)

在utils包中去写一个公共的方法

微信小程序之逻辑层与界面层03

 

 

通过foo来在别的页面调用我们写好的公共的方法

4.关于ES6转ES5

官方文档给了我们提供了解决方案

微信小程序之逻辑层与界面层03

界面层(wxml+wxss)

数据绑定

微信小程序之逻辑层与界面层03

之前接触到的后端和前端的一些模板引擎,比如Java中的jsp里面支持一些el和jstl的表达式,或者是Thymeleaf.小程序的这种数据简单绑定比较类似于vue中的插值表达式也就是通过俩个花括号进行数据的简单绑定

 

微信小程序之逻辑层与界面层03

补充:

mustache语法也可以用在class属性后面,使用wxss文件来去定义它的样式

 

 

微信小程序之逻辑层与界面层03

语法会默认将字符串不为空的值为true,可以使用mustache来解决这个问题

关于列表的渲染

首先需要在我们页面的data中定义一个数组

 

微信小程序之逻辑层与界面层03

注意:如果我们的全局变量中有item,可以使用vx:for-iten="aaa"用aaa来代替item,遍历每个坐标的索引可以通过vx:for-index来获取