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

news2024/9/25 0:42:17

🖥️ 微信小程序专栏：小程序配置和架构
🧑‍💼 个人简介：一个不甘平庸的平凡人🍬

✨ 个人主页：CoderHing的个人主页

🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

👉 你的一键三连是我更新的最大动力❤️

一、小程序的双线程模型

二、不同配置文件的区分

小程序的配置文件

三、全局配置文件app.json

全局app配置文件

四、页面配置文件page.json

页面page配置文件

五、注册App实例的操作

注册小程序 - App函数

App函数中的参数

作用一:判断用户打开场景

作用二:定义全局App的数据

作用三: 生命周期函数

六、注册Page实例的操作

注册页面 - Page函数

注册页面时做什么?

Page页面的生命周期

上拉和下拉的监听

一、小程序的双线程模型

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

宿主环境是为了执行小程序的各种文件: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"
      }
    ]
  },