微信小程序|小程序的构成(初识小程序详细简介)

最新推荐文章于 2025-10-10 21:30:42 发布

原创

最新推荐文章于 2025-10-10 21:30:42 发布 · 3.4k 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#python #开发语言 #后端 #微信小程序 #微信

本文详细介绍了小程序的构成，包括项目结构、页面基本文件、JSON配置、WXSS样式、WXML结构和JS逻辑交互。讲解了app.js、app.json、app.wxss等关键文件的作用，以及小程序的通信模型、运行机制和组件使用。同时，阐述了小程序的发布流程和团队协作分工。

小程序的构成

1.项目结构

1.1 项目的基本组成结构

1.1.1 $\textcolor{MediumBlue}{pages(目录)}$

用来存放所有小程序页面
所有的页面都以单独的文件夹放在pages目录中

1.1.2 utils(目录)

用来存放工具性质的模块(例如:格式化事件的自定义模块)

1.1.3 $\textcolor{MediumBlue}{app.js}$

小程序项目的入口文件

1.1.4 $\textcolor{MediumBlue}{app.json}$

小程序项目的全局配置文件

1.1.5 app.wxss

小程序项目的全局样式文件

1.1.6 project.config.json

项目的配置文件

小程序开发者工具在每个项目的根目录只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

项目配置文件

可以在项目根目录使用 project.config.json 文件对项目进行配置。

字段名	类型	说明
miniprogramRoot	Path String	指定小程序源码的目录(需为相对路径)
qcloudRoot	Path String	指定腾讯云项目的目录(需为相对路径)
pluginRoot	Path String	指定插件项目的目录(需为相对路径)
compileType	String	编译类型
setting	Object	项目设置
libVersion	String	基础库版本
appid	String	项目的 appid，只在新建项目时读取
projectname	String	项目名字，只在新建项目时读取
packOptions	Object	打包配置选项
debugOptions	Object	调试配置选项
scripts	Object	自定义预处理

compileType 有效值

名字	说明
miniprogram	当前为普通小程序项目
plugin	当前为小程序插件项目

setting 中可以指定以下设置

字段名	类型	说明
es6	Boolean	是否启用 es6 转 es5
postcss	Boolean	上传代码时样式是否自动补全
minified	Boolean	上传代码时是否自动压缩
urlCheck	Boolean	是否检查安全域名和 TLS 版本

setting示例配置:

"setting": {
   
   
        "urlCheck": true,
        "es6": true,
        "enhance": true,
        "postcss": true,
        "preloadBackgroundData": false,
        "minified": true,
        "newFeature": false,
        "coverView": true,
        "nodeModules": false,
        "autoAudits": false,
        "showShadowRootInWxmlPanel": true,
        "scopeDataCheck": false,
        "uglifyFileName": false,
        "checkInvalidKey": true,
        "checkSiteMap": false,
        "uploadWithSourceMap": true,
        "compileHotReLoad": false,
        "lazyloadPlaceholderEnable": false,
        "useMultiFrameRuntime": true,
        "useApiHook": true,
        "useApiHostProcess": true,
        "babelSetting": {
   
   
            "ignore": [],
            "disablePlugins": [],
            "outputPath": ""
        },
        "enableEngineNative": false,
        "useIsolateContext": true,
        "userConfirmedBundleSwitch": false,
        "packNpmManually": false,
        "packNpmRelationList": [],
        "minifyWXSS": true,
        "disableUseStrict": false,
        "minifyWXML": true,
        "showES6CompileOption": false,
        "useCompilerPlugins": false
    },