新建微信小程序工程后必知！四种文件类型及三个重要文件解析

创建一个微信小程序项目后，您会发现其中包含四种不同类型的文件，具体为：

.js —— 代表脚本文件，其中包含了页面交互逻辑的处理内容，所有相关操作均在该文件内完成。

json ------ 配置文件：用于设置程序的配置效果

.wxml ---- 页面结构文件：书写控件，构建页面

wxss是一种样式文件，其功能与CSS类似，主要用来对网页进行美化。

以下三个文件比较重要，作下解释

app.js

app.json

app.wxss

app.js

在每一个小程序项目中，都存在一个独一无二的app.js文件，该文件负责管理程序的生命周期相关事务，并且它被放置在项目的最顶层目录之中。

生命周期函数主要有：

<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'> <pre><code>onLaunch: function () { 在监听小程序的初始化阶段，一旦小程序完成初始化，便会触发该事件，并且这一事件只会发生一次。 }, onShow: function () {   //监听小程序显示-小程序启动或从后台进入前台，会触发。 }, onHide: function () {   //监听小程序隐藏-小程序从前台进入后台，会触发。 }, </code></pre></p>

app.json

通过app.json文件对程序进行全面的配置操作，这包括但不限于指定文件路径、调整窗口显示效果、设定网络连接的超时限制以及配置多标签页功能等。

<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'> <pre><code>{   "pages": [ 在路径“pages/index/index”处，可填写路径信息，系统将自动生成相应的页面文件。   ],   "window": { 导航栏标题文本设定为“Demo”，同时支持调整窗体背景色等细节设置。   },   "tabBar": {//底部tabBar "list": [{ "该路径指向"pages/index/index"页面" "text": "首页", 图标路径为"images/tab_income.png"，并对其进行配置。 选中状态的图标路径位于"images"文件夹中，具体为"tab_income_selected.png"文件。 }, { "该路径指向"pages/logs/logs"页面"。 "text": "日志" }]   },   "networkTimeout": { "request": 10000, "downloadFile": 10000   },   "debug": true } </code></pre></p>

app.wxss

和css样式很相似，多了两个特性

尺寸单位: 主要用rpx，可以根据屏幕宽度进行自适应

样式导入：使用@可引入外联样式表，句尾用分号隔开

如：

@ ".wxss";