贝利信息

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

日期:2026-01-15 11:01 / 作者:网络

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

.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";