1。项目结构

用于存储所有小程序的页面

用于存储工具属性的模块

app.js 的项目入口地址

app.json 项目的全局配置文件，“包括中的所有页面路径，窗口外观，接口性能，底部选项卡等”。

app.wxss for 项目的全局样式文件

.. JSON项目配置文件，用于记录开发工具的个性化配置

.JSON用于配置小本及其页面是否允许由微信索引。

2。小程序的页面组件

每个小程序的页面存储在目录中，并存在于单独的文件夹中。

然后每个页面都包含四个组件，.js，.json，.wxml，.wxss

。 =====实际上，Web 中的HTML File.wxss文件（当前页面的样式表文件）================基本相同

提示：页面中的.wxss文件的样式将覆盖app.wxss文件的样式。页面中的.json文件还将在全局配置文件app.json文件中覆盖相同的配置项。

3。项目结构和页面结构文件的一些说明3.1。 JSON文件

在微信中，.json文件用作配置文件。通过不同级别的.json文件（在根目录或页面目录中），可以在不同级别上以不同级别进行配置。

项目根目录中的JSON文件：

app.json

{ "pages":[ "pages/list/list", "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Weixin", "navigationBarTextStyle":"black" }, "style": "v2", "sitemapLocation": "sitemap.json" }

：用于记录当前的所有页面路径（数组中的页面路径的顺序是启动项目时页面的优先访问顺序，默认情况下将访问正面的任何人）。

：在全球定义小程序所有页面的背景颜色，文本颜色等

：在全球定义小程序组件使用的样式版本

：用于指示.json的位置

..杰森

{ "description": "项目配置文件", "packOptions": { "ignore": [], "include": [] },

// setting 中保存小程序编译相关的配置 "setting": { "bundle": false, "userConfirmedBundleSwitch": false, "urlCheck": true, "scopeDataCheck": false, "coverView": true, "es6": true, "postcss": true, "compileHotReLoad": false, "lazyloadPlaceholderEnable": false, "preloadBackgroundData": false, "minified": true, "autoAudits": false, "newFeature": false, "uglifyFileName": false, "uploadWithSourceMap": true, "useIsolateContext": true, "nodeModules": false, "enhance": true, "useMultiFrameRuntime": true, "useApiHook": true, "useApiHostProcess": true, "showShadowRootInWxmlPanel": true, "packNpmManually": false, "enableEngineNative": false, "packNpmRelationList": [], "minifyWXSS": true, "showES6CompileOption": false, "minifyWXML": true, "babelSetting": { "ignore": [], "disablePlugins": [], "outputPath": "" }, "condition": false }, "compileType": "miniprogram", "libVersion": "2.19.4", // appid 小程序的账号id "appid": "wx937fc52c91c2d68f", // 项目名称 "projectname": "miniprogram-92", "condition": { }, "editorSetting": { "tabIndent": "insertSpaces", "tabSize": 2 } }

.json

{ "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", "rules": [{ "action": "allow", "page": "*" }] }

页面目录中的JSON文件：

xxxx.json

{ "usingComponents": { }, // 此时下面的这条信息会覆盖掉app.json 文件中window配置项的同名项目 "navigationBarBackgroundColor": "#EEEEEE" }

3.2。 WXML和WXSS 3.2.1。 WXML

实际上，WXML与HTML相同，也是标签语言。它只是一组专门设计用于微信的小型程序开发的标签语言，以构建迷你程序的页面结构。

WXML和HTML之间的区别在于，标签名称是不同的，属性节点是不同的。然后，它提供一些有趣的语法糖，例如数据绑定，列表渲染，有条件渲染等。

3.2.2。 WXSS

比较CSS样式的功能也是如此。这是一套专门为微信小程序设计的样式语言，以描述WXML的组件样式。

WXSS和CSS之间的区别：

添加了RPX尺寸单元

在CSS中，您需要手动转换像素单元，例如REM

WXSS支持底部的新尺寸单元RPX。小程序将自动在不同尺寸的屏幕上转换，并提供全局样式和本地样式。

项目根目录将在所有小程序页面上发挥作用

部分页面的WXSS样式仅对当前页面WXS仅有效，仅支持某些CSS选择器（实际上，基本上支持这些选择器）3.2.3。 .js file app.js in

一个。它是整个小程序项目的入口文件。通过调用app（）函数，它启动了整个页面的.js

一个。是页面的输入文件。通过调用paga（）函数（例如，util.sj）来创建并运行页面的正常.js

一个。它是一个普通的功能模块文件，用于封装某些常见功能或属性4。主机环境

微信小计划的主机环境是微信应用程序本身，该应用与系统相同，例如华为，的iOS，大多数手机系统和应用程序都无法在iOS上运行。否则，主机环境是正在运行的程序。对环境的必要依赖性，离开主机环境的软件没有意义（即使运行也无法运行）。

微信小程序依赖于微信应用程序，这些应用程序可以使用微信来完成许多在普通网页上难以执行的功能，例如最常用的微信支付，微信QR QR代码扫描，微信登录等以及许多APIS以及许多API微信。

4.2。运行机构4.2.1。启动小程序的过程将的代码软件包下载到局部区域（如果首次使用微信小程序）解析app.json全局配置文件并执行app.js 的条目文件，并调用app（）创建实例渲染 启动启动完成4.2.2。小程序页面的过程渲染加载解析页面的.json文件加载.wxml模板和.wxss样式执行页面。