小程序开发之代码构成

    上一次学习了一些关于小程序界面相关的设计技巧和原则。今天用了一部分时间了解了一些微信小程序的代码构成。

1、JSON配置。

    在项目的根目录有一个 app.json 和 project.config.json，此外在 pages/logs 目录下还有一个 logs.json。

    app.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

    通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等。考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，在工具上做的任何配置都会写入到这个文件，当重新安装工具或者换电脑工作时，只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

    page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。page.json，让开发者可以独立定义每个页面的一些属性，顶部颜色、是否允许下拉刷新等等。

2、WXML 模板。

    网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。

3、WXSS 样式。

    WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

    在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可；提供了全局的样式和局部样式。 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。

4、JS 交互逻辑。

    一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。此外还可以在 JS 中调用小程序提供的丰富的 API，利用这些 API 可以很方便的调起微信提供的能力，例如获取用户信息、本地存储、微信支付等。

通过学习了解了小程序开发涉及到的文档类型，学习了各种文档的功能作用，更有助于理解开发步骤和过程。