微信小程序 | 小程序配置和架构

2023-09-16 271

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 微信小程序 | 小程序配置和架构

一、小程序的双线程模型

谁是小程序的宿主环境? => 微信客户端

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

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

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

双线程模型：

WXML模块和WXSS样式运行于渲染层，渲染层使用 WebView线程渲染（一个程序有多个页面，会使用多个 WebView的线程）。

JS脚本（app/home.js等）运行于逻辑层，逻辑层使用JsCore运行JS脚本。

这两个线程都会经由微信客户端（Native）进行中转交互。

二、不同配置文件的区分

小程序的配置文件

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

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

常见的配置文件有哪些?

project.config.json => 项目配置文件
sitemap.json => 小程序搜索相关
app.json => 全局配置
page.json => 页面配置

三、全局配置文件app.json

全局app配置文件

完整的可查看官方文档 => 打开开发文档 => 框架 => 全局配置

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

pages: 页面路径列表
指定小程序由哪些网页组成,每一项对应一个页面的路径(含文件名)信息
小程序所有页面都必须在pages中注册
window:全局的默认窗口展示
用户指定窗口怎样展示,包含很多其他属性
tabBar:底部tab栏展示
案例:

在app.json中进行tabbar配置

JSON
  "tabBar": {
    "selectedColor": "#ff8189",
    "list": [
      {
        "text": "首页",
        "pagePath": "pages/index/index",
        "iconPath": "assets/tabbar/home.png",
        "selectedIconPath": "assets/tabbar/home_active.png"
      },
      {
        "text": "收藏",
        "pagePath": "pages/favor/favor",
        "iconPath": "assets/tabbar/category.png",
        "selectedIconPath": "assets/tabbar/category_active.png"
      },
      {
        "text": "订单",
        "pagePath": "pages/order/order",
        "iconPath": "assets/tabbar/cart.png",
        "selectedIconPath": "assets/tabbar/cart_active.png"
      },
      {
        "text": "我的",
        "pagePath": "pages/profile/profile",
        "iconPath": "assets/tabbar/profile.png",
        "selectedIconPath": "assets/tabbar/profile_active.png"
      }
    ]
  },