小程序架构和配置文件

摆烂打咩

已于 2023-03-25 23:13:54 修改

阅读量100

点赞数

分类专栏：小程序文章标签：前端微信小程序

于 2023-03-24 09:26:22 首次发布

本文链接：https://blog.csdn.net/m0_50789696/article/details/129724320

版权

4 篇文章 0 订阅

订阅专栏

一. 小程序包括哪些？以及都有哪些开发模式？

原生小程序开发
- 微信小程序开发：wxml、wxss、JavaScript
- 支付宝小程序开发：axml、acss、JavaScript
框架开发小程序
- mpvue
  - mpvue是一个使用Vue开发小程序的前端框架
  - 支持微信小程序、百度智能小程序，头条小程序和支付宝小程序
  - 该框架在2018年之后就不再维护和更新了，目前已经被放弃
- wepy
  - 由腾讯开源的一款让小程序支持组件化开发的框架
  - 通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序
  - 该框架目前维护的也较少，不推荐使用
uni-app
- 由DCloud团队开发和维护
- uni-app 是一个使用 Vue 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台
- uni-app目前是很多公司的技术选型，特别是希望适配移动端App的公司
taro
- 由京东团队开发和维护
- taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书小程序 / H5 / RN 等应用
- taro因为本身支持React、Vue的选择，给了我们更加灵活的选择空间
- 特别是在Taro3.x之后，支持Vue3、React Hook写法等
- taro ['tɑ:roʊ]，泰罗·奥特曼，宇宙警备队总教官，实力最强的奥特曼

小程序的宿主环境是：微信客户端
- 宿主环境可以执行小程序的各种文件
当小程序运行在 WebView 环境下时，会有什么问题呢？
- JS 逻辑、DOM 树创建、CSS 解析、样式计算、Layout、Paint (Composite) 都发生在同一线程中
- 在 WebView 上执行过多的 JS 逻辑可能阻塞渲染，导致界面卡顿
小程序考虑到性能与安全的问题，采用了「双线程模型」的架构
- WXML模块和WXSS样式运行于渲染层，渲染层使用WebView线程渲染
  - 当一个程序有多个页面时，会使用多个WebView的线程
- JS脚本（app.js/home.js等）运行于逻辑层，逻辑层使用 JsCore 运行 JS脚本
  - 这两个线程都会经由微信客户端（Native）进行中转并交互

sitemap.json 官方文档说明
- 微信会爬取你的页面内容, 当用户在自己的微信中搜索时可以搜索到你开发的小程序
project.private.config.json：
一些配置信息
- 比如：项目名字，是否开启热重载, 是否开启地址检查，当前版本库的版本号
- 这个文件中设置的内容会覆盖掉project.config.json文件中的相同设置
- 与project.config.json配置不同时会改变这个文件中的配置
project.config.json：一些基础配置官方文档说明
- 比如项目名称、appid
- 这个文件一般不会发生变化
app.json：全局配置官方文档说明
- pages: 页面路径列表
  - 用于指定小程序由哪些页面组成，每一项都对应一个页面的路径（含文件名）信息
  - 小程序中所有的页面都是必须在pages中进行注册
- window: 全局的默认窗口展示
  - 用户指定窗口如何展示, 其中还包含了很多其他的属性
- tabBar: 底部tab栏的展示
page.json：页面的单独配置官方文档说明
- 每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置
- 页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项

判断小程序的进入场景
- 常见的打开场景：群聊会话中打开、小程序列表中打开、微信扫一扫打开、另一个小程序打开
- 在生命周期函数在onLaunch 和 onShow 中有一个参数options， options中的scene记录着从什么场景进入的小程序
- 场景列表地址微信开放文档
监听生命周期函数
- 在对应的生命周期函数中执行刚开始的业务逻辑比如登录操作或者初始化时请求全局的网络数据
- App()实例只有一个所以可以创建一个globalData的对象存放全局的共享数据，但是数据发生变化时，页面不会响应