小程序入门到精通（二）：了解小程序开发4个重要文件

比眉伴天荒 2023-02-11 10:16 5阅读 0赞

![image.png][]

### 1. 小程序没有DOM对象，一切基于组件化 ###

### 2. 小程序的四个重要的文件 ###

*  \*.js —> view逻辑 —> javascript
 *  \*.wxml —> view结构 ----> html
 *  \*.wxss —> view样式 -----> css
 *  \*. json ----> view 数据 -----> json文件

**注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。**

#### 2.1 WXML ####

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合[基础组件][Link 1]、[事件系统][Link 2]，可以构建出页面的结构。`WXML` 充当的就是类似 `HTML` 的角色  
要完整了解 WXML 语法，请参考[WXML 语法参考][WXML]。

#### 2.2 WXSS ####

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。  
WXSS 用来决定 WXML 的组件应该怎么显示。  
为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。  
与 CSS 相比，WXSS 扩展的特性有：

*  尺寸单位
 *  样式导入

#### 2.3 json ####

JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。

1.  全局配置

小程序根目录下的 `app.json` 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

1.  页面配置

每一个小程序页面也可以使用同名 `.json` 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 `app.json` 的 `window` 中相同的配置项。

1.  工具配置 project.config.json

通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。  
考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 `project.config.json`，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动  
**注意：**  
JSON文件都是被包裹在一个大括号中 \{\}，通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中，在实践中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。  
JSON的值只能是以下几种数据格式，其他任何格式都会触发报错，例如 JavaScript 中的 undefined。

1.  数字，包含浮点数和整数
2.  字符串，需要包裹在双引号中
3.  Bool值，true 或者 false
4.  数组，需要包裹在方括号中 \[\]
5.  对象，需要包裹在大括号中 \{\}
6.  Null

还需要注意的是 JSON 文件中无法使用注释，试图添加注释将会引发报错。

##  ##

#### 2.4 js ####

一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 `JS` 脚本文件来处理用户的操作。

1.  注册页面

对于小程序中的每个页面，都需要在页面对应的 `js` 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等

1.  使用 Page 构造器注册页面

简单的页面可以使用 `Page()` 进行构造。

1.  使用 Component 构造器构造页面

`Page` 构造器适用于简单的页面。但对于复杂的页面， `Page` 构造器可能并不好用。  
此时，可以使用 `Component` 构造器来构造页面。 `Component` 构造器的主要区别是：方法需要放在 `methods: { }` 里面。

[image.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAyMC9wbmcvMTQ4MTQ2LzE1OTAxNTk5NTY0OTMtOTEzODcyNmMtMzZhMS00Yzk5LTk3YjktNzdmZjJmZjRjMDUxLnBuZw
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/component/
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
[WXML]: https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/