2-认识小程序项目

其他
2025-08-06 03:39:01

基本结构 myapp ├─miniprogram ┊ └──pages ┊ ┊ └──index ┊ ┊ ┊ ├──index.json ┊ ┊ ┊ ├──index.ts ┊ ┊ ┊ ├──index.wxml ┊ ┊ ┊ └──index.wxss ┊ ┊ └──logs ┊ ┊ ├──index.json ┊ ┊ ├──index.ts ┊ ┊ ├──index.wxml ┊ ┊ └──index.wxss ┊ ├───utils ┊ ┊ └──util.ts ┊ ├──app.json ┊ ├──app.ts ┊ ├──app.wxss ┊ └──sitemap.json └── typings └──.eslintrc.js ├──package.json ├──project.config.json ├──project.private.config.json └──tsconfig.json pages用来存放所以小程序界面utlis用来存放工具性质的模块app.ts小程序的入口文件app.json小程序的全局配置文件app.wxss小程序的全局样式文件project.config.json项目配置文件sitemap.json用来配置小程序及其页面是否允许被微信索引 pages

小程序官方间隙把小程序页面存放在pages目录，以单独的文件夹存在

.js页面脚本文件，存放页面数据、事件处理函数.json当前页面配置文件，配置外观.wxml页面结构文件.wxss页面样式表文件 json配置文件

小程序项目中有四种配置文件

1. 项目根目录中app.json配置文件

官网入口api

当前小程序全局配置包括小程序的所有页面路径、窗口外观、界面表现、底部tab等。默认app.json配置如下

{ //记录当前小程序所有页面路径 "pages": [ "pages/index/index", "pages/logs/logs" ], //全局定义小程序所以页面背景色文字等 "window": { "navigationBarTextStyle": "black", "navigationStyle": "custom" }, //全局定义小程序所有组件使用的样式版本 //v2默认为最新版本，删除style表示使用旧的版本 "style": "v2", "rendererOptions": { "skyline": { "defaultDisplayBlock": true, "disableABTest": true, "sdkVersionBegin": "3.0.0", "sdkVersionEnd": "15.255.255" } }, "componentFramework": "glass-easel", //指明sitemap.json的位置 "sitemapLocation": "sitemap.json", "lazyCodeLoading": "requiredComponents" } 2. typings目录中project.config.json project.private.config.json配置文件

project.config.json项目配置文件，用来记录我们对小程序开发工具所做的个性化配置 project.private.config.json项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。

{ "description": "项目配置文件", "miniprogramRoot": "miniprogram/", "compileType": "miniprogram", //编译相关配置 "setting": { "useCompilerPlugins": [ "typescript" ], "babelSetting": { "ignore": [], "disablePlugins": [], "outputPath": "" }, "coverView": false, "postcss": false, "minified": false, "enhance": false, "showShadowRootInWxmlPanel": false, "packNpmRelationList": [], "ignoreUploadUnusedFiles": true, "compileHotReLoad": false, "skylineRenderEnable": true, "condition": false }, "simulatorType": "wechat", "simulatorPluginLibVersion": {}, "condition": {}, "srcMiniprogramRoot": "miniprogram/", "editorSetting": { "tabIndent": "insertSpaces", "tabSize": 2 }, "libVersion": "2.32.3", "packOptions": { "ignore": [], "include": [] }, //小程序帐号id "appid": "wxeebf7ff270e81f02" }

setting配置项可以在本地配置中开启或关闭

3. 项目根目录中sitemap.json配置文件

官网入口

微信现以开放小程序内搜索，类似于pc网页的SEO。sitemap.json用来配置微信小程序页面是否允许微信索引

4. pages目录中每个页面文件夹.json配置文件

.json文件对本页面窗口外观进行配置，页面配置项会覆盖app.json中的相同配置项

小程序页面

在app.json->pages中新增页面存放路径，小程序开发工具会自动创建对应的页面文件 app.json->pages配置项中默认第一个位项目首页

WXML模版

官网入口 WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。作用类似网页开发的HTML

标签名称差异

HTML （div,span,img,a） WXML （view,text,image,navigator）