小程序开发有哪些坑？这份笔记都整理出来了

19-08-22

1. JSON 配置文件

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

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

2. JS 逻辑层

小程序的逻辑层由 JavaScript 语言完成。但因为小程序不在浏览器中运行，所以 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 中展开对象。

3.4 模板

name 定义组件模版的名称，引用模版的时候使用 is 属性指定模版的名字，is 可以进行简单的三目运算，需要传入模版需要的 data 数据。

因为模版拥有自己的作用域，所以只能使用 data 传入数据，而不接受双花括号的写法。

3.5 公共模块的引用

WXML 提供 import 和 include 两种文件引用方式。

import 有作用域的概念，不能多重引用。

而 include 就可以多重引用了。

3.6 事件

名称以 bind 开头的事件不阻止冒泡，名称以 catch 开头的事件冒泡是阻止的。如 bindTap和 catchTab。

在 WXML 中，可以使用 dataset 定义 data 中的数据，会通过事件传递。它的事件以 data- 开头，多个单词以 - 链接，如 data-a-b。

需要注意的是，使用这种方式定义的变量不能有大写。它会自动转成驼峰命名，调取的时候去驼峰命名的名字。

4. WXSS

WXSS 的用法类似于 CSS，并在 CSS 的基础上，扩展了 rpx 尺寸单位和样式导入功能。

WXSS 可以使用内联样式，但这样会影响渲染速度。