| 泡芙小姐 110

1. JSON 配置文件

小程序中，包含唯一的全局配置文件 app.json，以及每个页面的配置文件 page.json。每单页页面相应的 JSON 文件会覆盖与 app.json相同的配置项。

如下，是一个包含了所有配置选项的简单配置 app.json。

2. JS 逻辑层

小程序的逻辑层由 Java 语言完成。但因为小程序不在浏览器中运行，所以 JS 在 web 浏览器中的一些函数不能用，如 document、 window等。

app.js有全局的小程序生命周期， page.js有自己本页面的生命周期。

2.1 注册小程序 app.js

这一步骤，有这几个需要注意的地方：

1. 必须在 app.js中，使用 app()函数注册微信小程序。全局小程序中，只能注册一次；

2. 不能在 app()内的函数中调用 getApp()（小程序实例），使用 this就可以拿到小程序的实例；

3. 不要在 onLaunch的时候 getCurrentPage()，因为此时 Page还没有生成；

4. 通过其他子页面调用 getApp()获取实例后，不要私自调用小程序全局的生命周期方法；

5. 可以通过 var app=getApp()获取小程序的实例。

2.2 注册小程序的页面 page.js

Page()用来注册一个页面，维护该页面的生命周期以及数据。

2.3 公共模块 util.js

公共模块方法需要通过 module.exports对外暴露接口，使用的时候需要利用 require(path)，将文件引入。如：

2.4 数据操作

setData()不能直接操作数据，例如 this.data.text="xxxxx"就是错误的。你需要在 this.setData()之中，进行数据的操作。

同时，这里有作用域的问题。比如，需要在">局部函数中使用，就需要 .bind(this)。

如果你需要操作全局的数据，你需要在 app.js中进行相应设置，例如：

3. 视图层 WXML

视图层的数据绑定均来自于 Page中的 data，想要修改相应值，你需要用到 this.setData。数据绑定使用两对花括号，将变量名包起来。

3.1 条件渲染

你可以利用 if和 else，在视图层上编写在特定情况下，出现的不同的视图结果。

很多人会将 CSS 中的 display: hidden属性，与 WXML 的这个特性做一个比较。

• 微信小程序中的 wx:if是惰性的。如果不符合渲染条件，它不会渲染相应部分；

• 使用 display: hidden时，元素始终渲染，只是视图层上没有显示，用户看不见。

如果你的小程序有元素显示频繁切换的需求，建议你使用 display: hidden，能够为用户提供能顺畅的使用体验。

3.2 列表渲染

相当于让 WXML 处理一个循环。

在 WXML 中，你可以这样来建立一个 for循环：

然后在相应的 JS 中，新建一个数组：

需要注意的是，如果列表中的项需要动态添加到列表中，并希望项目保持原有的特征和状态，那么你应该使用 wx:key。

wx:key有两种形式：

1. 字符串：wx:key="unique"；

2. 保留关键字：wx:key="*this"。

3.3 运算

WXML 可以执行简单的运算任务。例如：

也可以做到字符串拼接：

甚至，你可以使用 ...在 WXML 中展开对象。