小程序的配置和架构

最新推荐文章于 2025-06-29 11:43:39 发布

DustinWangq

最新推荐文章于 2025-06-29 11:43:39 发布

阅读量866

点赞数 13

CC 4.0 BY-SA版权

分类专栏： # 小程序基础进阶文章标签：小程序架构

本文链接：https://blog.youkuaiyun.com/Welitsi/article/details/147817554

一、小程序的双线程模型

1.小程序的架构模型

谁是小程序的宿主环境呢？微信客户端

宿主环境为了执行小程序的各种文件：wxml文件、wxss文件、js文件

当小程序基于 WebView 环境下时，WebView 的 JS 逻辑、DOM 树创建、CSS 解析、样式计算、Layout、Paint (Composite) 都发生在同一线程，在 WebView 上执行过多的 JS 逻辑可能阻塞渲染，导致界面卡顿。

以此为前提，小程序同时考虑了性能与安全，采用了目前称为**「双线程模型」**的架构。

双线程模型：

WXML模块和WXSS样式运行于渲染层，渲染层使用 WebView线程渲染（一个程序有多个页面，会使用多个 WebView的线程）。
JS脚本（app.js/home.js等）运行于逻辑层，逻辑层使用JsCore运行JS脚本。
这两个线程都会经由微信客户端（Native）进行中转交互。

在这里插入图片描述

二、小程序配置

1.小程序的配置文件

小程序的很多开发需求被规定在了配置文件中。

为什么这样做呢?

这样做可以更有利于我们的开发效率；
并且可以保证开发出来的小程序的某些风格是比较一致的；
比如导航栏 – 顶部TabBar，以及页面路由等等。

常见的配置文件有哪些呢?

project.config.json：项目配置文件, 比如项目名称、appid等；
- https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html
sitemap.json：小程序搜索相关的；
- https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html
app.json：全局配置；
page.json：页面配置；

2.全局配置文件app.json

全局配置比较多, 我们这里将几个比较重要的. 完整的查看官方文档.

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

属性	类型	必填	描述
pages	String[]	是	页面路径列表
window	Object	否	全局的默认窗口表现
tabBar	Object	否	底部tab栏的表现

pages: 页面路径列表

用于指定小程序由哪些页面组成，每一项都对应一个页面的路径（含文件名）信息。
小程序中所有的页面都是必须在pages中进行注册的。

window: 全局的默认窗口展示

用户指定窗口如何展示, 其中还包含了很多其他的属性

tabBar: 顶部tab栏的展示

具体属性稍后我们进行演示

3.tabBar配置案例

app.json

{
   
   
  "pages": [
    "pages/index/index",
    "pages/favor/favor",
    "pages/order/order",
    "pages/profile/profile"
  ],
  "window": {
   
   
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "WQmini",
    "navigationBarBackgroundColor": "#ff8189"
  },
  "tabBar": {
   
   
    "selectedColor": "#ff8189",
    "list": [