| 泡芙小姐 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 这一步骤，有这几个需要注意的地方： 必须在 app.js中，使用 app()函数注册微信小程序。全局小程序中，只能注册一次； 不能在 app()内的函数中调用 getApp()（小程序实例），使用 this就可以拿到小程序的实例； 不要在 onLaunch的时候 getCurrentPage()，因为此时 Page还没有生成； 通过其他子页面调用 getApp()获取实例后，不要私自调用">小程序全局的生命周期方法； 可以通过 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有两种形式： 字符串：wx:key="unique"； 保留关键字：wx:key="*this"。 3.3 运算 WXML 可以执行简单的运算任务。例如： 也可以做到字符串拼接： 甚至，你可以使用 ...在 WXML 中展开对象。

 | 泡芙小姐 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 这一步骤，有这几个需要注意的地方： 必须在 app.js中，使用 app()函数注册微信小程序。全局小程序中，只能注册一次； 不能在 app()内的函数中调用 getApp()（小程序实例），使用 this就可以拿到小程序的实例； 不要在 onLaunch的时候 getCurrentPage()，因为此时 Page还没有生成； 通过其他子页面调用 getApp()获取实例后，不要私自调用">小程序全局的生命周期方法； 可以通过 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有两种形式： 字符串：wx:key="unique"； 保留关键字：wx:key="*this"。 3.3 运算 WXML 可以执行简单的运算任务。例如： 也可以做到字符串拼接： 甚至，你可以使用 ...在 WXML 中展开对象。

 | 泡芙小姐 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 这一步骤，有这几个需要注意的地方： 必须在 app.js中，使用 app()函数注册微信小程序。全局小程序中，只能注册一次； 不能在 app()内的函数中调用 getApp()（小程序实例），使用 this就可以拿到小程序的实例； 不要在 onLaunch的时候 getCurrentPage()，因为此时 Page还没有生成； 通过其他子页面调用 getApp()获取实例后，不要私自调用">小程序全局的生命周期方法； 可以通过 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有两种形式： 字符串：wx:key="unique"； 保留关键字：wx:key="*this"。 3.3 运算 WXML 可以执行简单的运算任务。例如： 也可以做到字符串拼接： 甚至，你可以使用 ...在 WXML 中展开对象。

 | 泡芙小姐 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 这一步骤，有这几个需要注意的地方： 必须在 app.js中，使用 app()函数注册微信小程序。全局小程序中，只能注册一次； 不能在 app()内的函数中调用 getApp()（小程序实例），使用 this就可以拿到小程序的实例； 不要在 onLaunch的时候 getCurrentPage()，因为此时 Page还没有生成； 通过其他子页面调用 getApp()获取实例后，不要私自调用">小程序全局的生命周期方法； 可以通过 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有两种形式： 字符串：wx:key="unique"； 保留关键字：wx:key="*this"。 3.3 运算 WXML 可以执行简单的运算任务。例如： 也可以做到字符串拼接： 甚至，你可以使用 ...在 WXML 中展开对象。