背景分析

　　随着国民健身意识越来越强，各式各样的健身模式不断出现。瑜伽也受到了大众的喜爱，瑜伽行业发展越来越快,作为馆主，你还在微信群里让你的会员使用接龙的方式进行约课吗？你还在用传统的 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 及时清理没有使用到的预约小程序代码和资源

界面设计   

后台界面设计  

https://gitee.com/chen-ronghuis/TurBoYoga