小程序基础知识
微信小程序开发与网页开发的差异
微信小程序开发与网页开发在多个方面存在显著差异。首先，微信小程序缺乏完整的浏览器对象，因此无法使用诸如jQuery、Zepto、Angular、React、Vue等库。其次，在渲染与脚本线程方面，微信小程序将这两者分开运行，与网页开发中的互斥性不同。此外，微信小程序不提供DOM API和BOM API，且其开发仅需针对iOS和Android微信客户端，无需担心客户端兼容性问题。同时，由于安全限制，微信小程序不支持使用eval执行JS代码或使用new Function创建函数。
微信小程序的构成
微信小程序主要由四类文件组成：JSON配置文件、WXML模板文件、WXSS样式文件以及JS脚本逻辑文件。其中，JSON配置文件以.json为后缀，提供小程序的配置信息；WXML模板文件以.wxml为后缀，负责实现小程序的视图层；WXSS样式文件以.wxss为后缀，用于定义小程序的样式；而JS脚本逻辑文件以.js为后缀，包含小程序的逻辑处理代码。
JS脚本逻辑文件，以.js为后缀，是微信小程序逻辑层的实现关键。同时，这四个文件需保持同名，且WXML模板文件与JS脚本逻辑文件为不可或缺的组成部分。此外，微信默认创建的小程序根目录下会包含多个JSON文件，如app.json、project.config.json、sitemap.json以及index.json等，它们共同构成了小程序的配置信息。
️1 app.json
app.json是微信小程序的全局配置文件，它定义了小程序的页面路径、窗口外观以及底部tab栏等关键属性。
以下是一个典型的app.json配置示例：
{ "pages":
"pages/index/index"
, "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Weixin", "navigationBarTextStyle": "black" }, "style": "v2", "sitemapLocation": "sitemap.json"}
在app.json中，我们详细解释了几个关键配置项。其中，pages数组用于指定小程序的所有页面路径，这是小程序运行的基础。window对象则用于配置小程序的窗口外观，包括状态栏、导航条、标题以及背景色等。此外，tabBar对象（虽在示例中未列出，但为可选配置）可用于定义底部tab栏的外观和行为。
tabBar
"color": "#000000",
"selectedColor": "#4CAF50",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list":
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/icon_home.png",
"selectedIconPath": "images/icon_home_active.png"
},
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "images/icon_logs.png",
"selectedIconPath": "images/icon_logs_active.png"
networkTimeout
Object
设置网络请求的超时时间
debug
Boolean
是否开启调试模式，开启后会在开发者工具的控制台输出调试信息
permission
Object
设置小程序需要的权限
subPackages
Array
配置分包加载，以支持代码分割和模块化开发。例如，你可以通过配置subPackages来将小程序的不同部分拆分成独立的包，以实现更灵活的代码管理和加载优化。
requiredBackgroundModes
Array
配置小程序在后台运行所需的模式，例如音频和位置。
"requiredBackgroundModes":
"audio", "location"
plugins
Object
配置小程序所使用的插件。
"plugins": {"myPlugin": {"version": "0", "provider": "wx1234567890"}}
usingComponents
Object
配置全局自定义组件的使用。
"usingComponents": {"component-tag-name": "path/to/component"}
sitemapLocation
String
指定小程序的sitemap文件位置。
"sitemapLocation": "sitemap.json"
style
String
配置小程序的整体风格，支持v2版本。
"style": "v2"
lazyCodeLoading
String
配置是否启用代码包懒加载功能。
"lazyCodeLoading": "requiredComponents"
workers
String
配置Worker代码的目录。
"workers": "workers"
preloadRule
Object
配置页面预加载的规则。
"preloadRule": {"pages/index/index": {"network": "all", "packages":
"packageA"
}}
disableScroll
Boolean
配置是否全局禁用页面的滚动功能。
"disableScroll": true
darkmode
Boolean
配置是否启用暗黑模式。
在微信小程序开发中，project.config.json 文件扮演着至关重要的角色。它不仅用于配置小程序的诸多方面，还是项目管理和开发流程的关键一环。以下是关于 project.config.json 的一些核心要点：
项目配置信息：project.config.json 详细记录了小程序项目的各项基础信息，如项目名称、AppID、版本号以及开发者详情。这些数据对于小程序的识别、管理以及后续开发至关重要。
开发者工具设置：该文件同样提供了对开发者工具的全方位配置能力，涵盖编译、预览、编辑器等各个方面的设置，旨在优化开发者的开发体验和工作流程。
代码编辑器配置：通过 project.config.json，开发者可以精细地调整代码编辑器的各项参数，如代码风格检查、代码片段库以及代码格式化规则，从而确保代码风格的一致性和质量。
插件管理：该文件还集成了插件配置功能，使开发者能够轻松地引入和管理所需的插件whatsapp网页版，包括指定插件的AppID和版本号等信息。
环境配置：此外whatsapp官网，project.config.json 还提供了灵活的环境配置选项，允许开发者根据不同环境（如开发、测试、生产等）灵活调整小程序的行为。
综上所述，project.config.json 在微信小程序开发中发挥着不可或缺的作用，为开发者提供了全面而强大的项目配置和管理能力。
"miniprogramRoot": "miniprogram/",
"pluginRoot": "plugin/",
"qcloudRoot": "qcloud/",
"compileType": "miniprogram",
"setting": {
"urlCheck": true,
"es6": true,
"enhance": true,
"postcss": true,
"minified": true
},
"condition": {
"search": {
"current": -1,
"list":
},
"conversation": {
"current": -1,
"list":
},
"plugin": {
"current": -1,
"list":
},
"game": {
"currentL": -1,
"list":
},
"miniprogram": {
"current": -1,
"list":
},
"cloudfunctionRoot": "cloudfunctions/"
"cloudfunctionRoot": "cloudfunctions/"
cloudbaseRoot
Object
云开发环境设置
"cloudbaseRoot": {"env": "cloud1-0g123456789abcdef", "functionRoot": "functions/"}
packOptions
Object
包配置选项，包含忽略文件和忽略目录的设定
"packOptions": {"ignore":
{"type": "file", "value": "test.js"}, {"type": "folder", "value": "docs"}
libVersion
String
小程序基础库版本，用于开发者工具的模拟和编译
"libVersion": "1"
scripts
Object
自定义脚本，包含编译和上传前的钩子函数
"scripts": {"beforeCompile": "npm run build", "beforeUpload": "npm run upload"}
debugOptions
Object
调试选项，用于配置调试相关参数
"debugOptions": {"hidedInDevtools": true}
simulatorType
String
模拟器类型，指定开发者工具所使用的模拟器类型
"simulatorType": "wechat"
simulatorPluginLibVersion
String
插件模拟器基础库版本，用于兼容性测试和调试
"simulatorPluginLibVersion": "1"
sourceMap
Boolean
是否生成sourceMap文件，便于调试和错误追踪。
"sourceMap": true
useExtendedLib
Object
使用扩展库，例如
weui
"useExtendedLib": {"weui": true}
nativeComponents
Boolean
是否使用原生组件
"nativeComponents": true
uniStatistics
Object
统计配置选项
"uniStatistics": {"enable": true}
sitemap.json
sitemap.json 是微信小程序中的一项重要配置文件telegram中文版，它指定了哪些页面可以被微信搜索引擎索引和展示在搜索结果中。这一配置文件对于提高小程序在微信搜索中的曝光度和可发现性至关重要，同时也有助于优化搜索结果、控制页面权限以及及时更新页面内容。在 sitemap.json 中，开发者可以提供页面的描述信息、设置访问规则等，从而更好地管理和优化小程序。
配置访问规则的数组，其中每个元素都是一个对象，用于定义特定页面或路径的访问权限和是否被索引。具体来说，这个数组中的每个对象都包含以下几个配置项：
以下是一个示例的sitemap.json文件，其中包含了几个不同的访问规则配置：
{ "desc": "This is a sitemap for my mini program", "rules":
{"action": "allow","page": "/pages/index/index" }, {"action": "disallow","page": "/pages/secret/*","priority":}, {"action": "allow","page": "/pages/profile/*","params": {"view": "value"} }
在这个示例中，我们定义了三条不同的访问规则。第一条规则允许搜索引擎抓取/pages/index/index页面；第二条规则禁止抓取以/pages/secret/开头的所有路径，并设置了较高的优先级；而第三条规则则允许抓取以/pages/profile/开头的路径，并指定了特定的页面参数。通过这些配置，我们可以更精细地控制小程序在微信搜索引擎中的展示和抓取行为。
public
},
"priority": }
详细解释
配置项
描述
示例
desc
sitemap.json
文件的描述信息，主要是为了方便开发者阅读和维护文件。
"desc": "This is a sitemap for my mini program"
rules
配置访问规则的数组，其中每个元素都是一个对象，用于定义特定页面或路径的访问权限和是否被索引。
详见下表：
backgroundColor
设置窗口的背景色。可以使用十六进制颜色值来指定颜色。
"#eeeeee"（浅灰色）或其他颜色值。例如，"#ffffff"表示白色。
backgroundTextStyle
设置下拉背景的字体和loading图的样式。仅支持两种样式：dark和light。其中，dark表示深色样式，light表示浅色样式。在小程序中，如果背景色是深色，则建议使用dark样式以保持视觉一致性。例如，设置为"dark"。
backgroundColorTop/backgroundColorBottom
分别设置顶部和底部窗口的背景色。这些配置项在iOS平台上有效。可以使用十六进制颜色值来指定颜色。例如，"#ffffff"表示白色。
底部窗口的背景色，仅 iOS 平台支持
#ffffff
disableScroll
设置为true时，页面整体将无法上下滚动
false
onReachBottomDistance
当页面上拉触底时，此配置项指定触发事件距页面底部的距离，单位为像素
navigationStyle
导航栏样式，仅支持default和custom两种。其中，custom表示自定义导航栏，仅保留右上角胶囊按钮
"default"
usingComponents
声明页面中使用的自定义组件，例如{"customComponent": "/components/customComponent/customComponent"}
pageOrientation
屏幕旋转设置，仅支持auto、portrait和landscape三种模式，其中"portrait"表示竖屏模式
"portrait"
initialRenderingCache
初始渲染缓存设置，仅支持static和dynamic两种模式，其中"static"表示静态渲染缓存
"static"
2 视图层
微信小程序的运行环境包含视图层与逻辑层。WXML模板文件与WXSS样式文件负责视图层的渲染，而JS脚本文件则处理逻辑层的业务。视图层采用WebView进行界面渲染，逻辑层则通过JSCore线程运行JS脚本。由于微信小程序包含多个界面，因此视图层会创建多个WebView线程来分别渲染这些界面。这两个线程之间的通信，以及逻辑层发送的网络请求，都会通过微信客户端（Native）进行中转。
class
"container"
class
"userinfo"
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
