背景剖析

随着国民健身意识越来越强，各式各样的健身模式一直呈现。瑜伽也受到了公众的青睐，瑜伽行业倒退越来越快, 作为馆主，你还在微信群里让你的会员应用接龙的形式进行约课吗？你还在用传统的 Excel 进行排课吗？如果有一款小程序会员点一下就能约课，会不会让你惊喜、意外、冲动——没错，瑜伽预约小程序就是为了解决馆主会员约课的痛点应运而生。性能包含瑜伽馆动静，瑜伽常识，瑜伽老师预约，瑜伽课程预约等模块。

该零碎基于 MVC 架构，采纳基于微信小程序平台开发，校园用户操作轻松快捷：无需下载安装 APP。

性能形象

数据库设计

遇到的技术难点

小程序启动是用户体验中极为重要的一环，启动耗时过长会造成小程序用户散失

开发者代码注入（逻辑层）

预约小程序启动时须要从代码包内读取小程序的配置和代码，并注入到 JS 引擎中。

在预约主包代码注入过程中，会触发小程序的 App.onLaunch 和首次 App.onShow 生命周期。

在预约开发者代码注入实现后，框架侧会依据预约用户拜访的页面进行一些页面数据初始化工作，触发首页的 Page.onLoad, Page.onShow 事件。

对启动耗时的影响

预约开发者代码的注入耗时间接影响小程序的启动耗时。

在支流的 JS 引擎中，代码注入耗时包含编译和执行等环节，代码量、同步接口调用和一些简单的计算，都会影响注入耗时。

因为预约首页渲染须要应用逻辑层发送的数据，如果开发者代码注入耗时过长，也会提早首页渲染开始的工夫。

在局部平台预约上，微信客户端会应用 V8 引擎的 Code Caching 技术对代码编译后果进行缓存，升高二次注入时的编译耗时

开发者代码注入（渲染层）

预约开发者的 wxss 和 wxml 会通过编译注入到渲染层，蕴含页面渲染须要的页面构造和款式信息。

渲染层的注入耗时次要和预约页面构造复杂度和应用的自定义组件数量无关。

渲染层和逻辑层的预约开发者代码注入是并行进行的。

对启动耗时的影响

因为预约首页渲染须要应用渲染层的页面构造和款式信息，如果开发者代码注入耗时过长，会提早预约首页渲染开始的工夫。

首页（首次）渲染

在预约开发者代码注入实现后，联合逻辑层失去的数据和渲染层失去的页面构造和款式信息，预约小程序框架会进行小程序首页的渲染，

展现小程序首屏，并触发首页的 Page.onReady 事件。Page.onReady 事件触发标记小程序启动过程实现。

对启动耗时的影响

预约首页渲染耗时次要受页面构造和参加渲染的数据量影响

小程序首屏渲染实现

从开发者角度看，预约小程序首屏渲染实现的标记是首页 Page.onReady 事件触发。

从框架的角度来说，预约小程序的首屏的内容是基于小程序的初始数据，以及在渲染开始前达到的 setData 数据渲染的。

首屏渲染实现不示意小程序页面肯定有残缺内容，开发者触发的 setData（例如通过 wx.request 异步申请数据）不肯定能参加到首屏渲染中。

因为框架和启动流程的差别，小程序定义的首屏渲染实现不等同于浏览器的 load 事件。

小程序启动阶段

从预约用户点击拜访小程序到小程序首屏渲染实现（首页 Page.onReady 事件触发）。

关上率 / 达到率

预约小程序首屏渲染实现 PV 与 用户点击拜访小程序 PV 的比值。流失率 = 1 – 关上率

小程序代码包优化

代码包优化的外围伎俩是升高代码包大小，预约小程序代码包大小间接影响了下载耗时，影响用户启动预约小程序时的体验。

开发者能够采取以下伎俩优化预约小程序代码包大小

1 预约小程序分包加载
2 预约小程序代码重构和优化
3 控制代码包内图片等资源
4 及时清理没有应用到的预约小程序代码和资源

界面设计

后盾界面设计

git 开源代码