【小程序】的架构和配置文件

悠悠 2023-10-02 20:39 21阅读 0赞

### 小程序的架构模型 ###

**小程序的宿主环境: 微信客户端**

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

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

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

![在这里插入图片描述][7be32af1c35f4bafa1919327adfcd344.png_pic_center]

**双线程模型**：

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

### 小程序的配置文件 ###

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

> 例如顶部导航栏, 底部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`：页面配置；

#### 项目配置站点映射 ####

**project.config.json: 项目的配置文件**

> 但是一般我们修改项目的配置并不是通过project.config.json文件修改的;
> 
> 例如修改基础库的版本, 依次打开详情 -> 本地设置

![在这里插入图片描述][e1255b037026453f991827c12acc95c1.png_pic_center]

**修改完成后我们发现project.config.json文件并没有变化, 而project.private.config.json文件中修改了基础库版本号**

> 官方文档中有说明原因: 可以在 `project.config.json` 文件中配置公共配置, 在`project.private.config.json` 配置个人的配置，可以将 `project.private.config.json` 写到 `.gitignore` 避免版本管理的冲突

![在这里插入图片描述][deadd0b736f64b23b86d2b346431ee74.png_pic_center]

**sitemap.json**

> 配置是否允许微信收入，微信会通过爬虫的形式，为小程序的页面的关键字进行收入, 类似于SEO优化
> 
> 默认配置的情况下是允许的

![在这里插入图片描述][7bd3204796ca453ab09e0390a331bd2d.png_pic_center]

> 接下来我们详细介绍app.json和page.json配置文件

#### 全局app配置文件 ####

**全局配置比较多, 我们这里将几个比较重要的**.

> 完整的配置可以查看官方文档, 链接给到大家: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>必填</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>pages</td> 
   <td>String[]</td> 
   <td>是</td> 
   <td>页面路径列表</td> 
  </tr> 
  <tr> 
   <td>window</td> 
   <td>Object</td> 
   <td>否</td> 
   <td>全局的默认窗口表现</td> 
  </tr> 
  <tr> 
   <td>tabBar</td> 
   <td>Object</td> 
   <td>否</td> 
   <td>底部 tab 栏的表现</td> 
  </tr> 
 </tbody> 
</table>

**pages: 页面路径列表**

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

![在这里插入图片描述][ec895abc079e46de8eb5de2dfdb920f9.png_pic_center]

**window: 全局的默认窗口展示**

> 用户指定窗口如何展示, 其中还包含了很多其他的属性, 更多的属性配置可以查看官方文档

![在这里插入图片描述][28a7822910544844b607c27efe2c5f58.png_pic_center]

**tabBar: 底部tab栏的展示**

> tabbar中的list对应一个数组, 数组中存放一个一个的对象, 用于配置tabbar

![在这里插入图片描述][6c4fc20b62114ec9bb47f43610fa8ddb.png_pic_center]

> 我们也可以配置选中的文本颜色, 与list同级有一个selectedColor属性

"tabBar": {
        
      "selectedColor": "#f00"
    },

**App.json中还有两个配置**

> `"style": "v2"`: 表示使用最新的组件样式风格
> 
> `"sitemapLocation": "sitemap.json"`: 表示站点映射文件存放的位置

--------------------

#### 页面page配置文件 ####

**每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置**。

> 页面中配置项**在当前页面**会覆盖 app.json 的 window 中相同的配置项。
> 
> 完整的配置可以查看官方文档, 链接给到大家: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

**例如: 不同页面展示的nav导航栏不相同, 我们可以在页面配置文件中配置**

{
        
    	"usingComponents": {
        },
    	"navigationBarTitleText": "分类页面",
    	"navigationBarBackgroundColor": "#f00",
    	"navigationBarTextStyle": "white"
    }

> 在页面中配置的会覆盖app.json中的相同的配置

**“enablePullDownRefresh”, 设置为true表示开启下拉刷新**

{
        
      "enablePullDownRefresh": true
    }

**开启之后我们就可以在js代码中对下拉刷新进行监听**

Page({
        
    	onPullDownRefresh() {
        
    		console.log("用户进行了下拉刷新");
    	}
    })

[7be32af1c35f4bafa1919327adfcd344.png_pic_center]: https://img-blog.csdnimg.cn/7be32af1c35f4bafa1919327adfcd344.png#pic_center
[e1255b037026453f991827c12acc95c1.png_pic_center]: https://img-blog.csdnimg.cn/e1255b037026453f991827c12acc95c1.png#pic_center
[deadd0b736f64b23b86d2b346431ee74.png_pic_center]: https://img-blog.csdnimg.cn/deadd0b736f64b23b86d2b346431ee74.png#pic_center
[7bd3204796ca453ab09e0390a331bd2d.png_pic_center]: https://img-blog.csdnimg.cn/7bd3204796ca453ab09e0390a331bd2d.png#pic_center
[ec895abc079e46de8eb5de2dfdb920f9.png_pic_center]: https://img-blog.csdnimg.cn/ec895abc079e46de8eb5de2dfdb920f9.png#pic_center
[28a7822910544844b607c27efe2c5f58.png_pic_center]: https://img-blog.csdnimg.cn/28a7822910544844b607c27efe2c5f58.png#pic_center
[6c4fc20b62114ec9bb47f43610fa8ddb.png_pic_center]: https://img-blog.csdnimg.cn/6c4fc20b62114ec9bb47f43610fa8ddb.png#pic_center