想要开发出属于自己的微信小程序，这些文件必

世界上有很多种语音，其他的语音你可以不懂！只要你掌握了它的核心，读懂它不是问题。开发自己的专属小程序，就是明白它每个部分代表的什么意思，你该怎么正确的表达来让它明白您的意思的过程。今天咱们一起来了解下，制作属于自己的小程序，咱们该怎么去读懂它。

如果你上节课跟着一起去操作了，会发现小程序的页面的组成部分就只是4类文件构成！如下图所示：

这4类文件是.wxml、.js、.json和.wxss。它们都代表着什么意思呢？

.wxml是模板文件

.js是脚本逻辑文件

.json是配置文件

.wxss是样式文件

如果你稍微有点编程的基础，我想你会很容易的就明白过来它们的具体是代表什么。不过没关系，如果没有基础的话，继续跟着往下走吧！

咱们把目录中的所有文件夹全部打开，咱们会看到有三个带有.json后缀的文件。如下图所示：

这三个文件都有什么不同，都是干什么用的呢？

如果你整个小程序的风格是蓝色调，那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此提供了 logs.json，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。

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

通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。

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

从事过网页编程的人知道，网页编程采用的是 HTML CSS JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。

在这里wxml就是充当的html的角色，它和js实现与用户的交互。如下图所示，就是index.wxml文件中的代码。

此处的js文件起到的作用与其他程序中所表达的功能是相同的，实现网页与用户的交互。

在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。

此处的wxss文件与css具有相同的作用，起到组织页面展现的样式。宽度、高度等信息。

但此处wxss与css又有一些不同之处！

新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。

提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。

此外 WXSS 仅支持部分 CSS 选择器

以上就是咱们开发小程序用到的四种文件！熟悉这4类文件，对你开发小程序是必不可少的工具。咱们接下来还会教大家每种文件中的代码是什么意思？该如何进行配置等！没有跟上速度的速度跟上咯！