02_小程序配置和架构.pdf

小程序的架构和配置

王红元coderwhy

目录

1小程序的双线程模型

content

2不同配置文件的区分

3全局配置文件app.json

4页面配置文件page.json

5注册App实例的操作

6注册Page实例的操作

coderwhy小程序的架构模型

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

宿主环境为了执行小程序的各种文件：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）进行中转交互。

coderwhy小程序的配置文件

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

◼为什么这样做呢?

这样做可以更有利于我们的开发效率；

并且可以保证开发出来的小程序的某些风格是比较一致的；

比如导航栏–顶部TabBar，以及页面路由等等。

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

project.config.json：项目配置文件,比如项目名称、appid等；

➢/miniprogram/dev/devtools/projectconfig.html

sitemap.json：小程序有哪些信誉好的足球投注网站相关的；

➢/miniprogram/dev/framework/sitemap.html

app.json：全局配置；

page.json：页面配置；

coderwhy全局app配置文件

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

/miniprogram/dev/reference/configuration/app.html

属性类型必填描述

pagesString[]是页面路径列表

windowObject否全局的默认窗口表现

tabBarObject否底部tab栏的表现

◼pages:页面路径列表

用于指定小程序由哪些页面组成，每一项都对应一个页面的路径（含文件名）信息。

小程序中所有的页面都是必须在pages中进行注册的。

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

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

◼tabBar:顶部tab栏的展示

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

coderwhy配置案例实现

◼我们来做如下的效果:

coderwhy页面page配置文件

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