背景分析

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

从0到1：基于微信小程序的瑜伽馆预约平台的开发笔记相关推荐

微信小程序约课_基于微信小程序的瑜伽馆约课系统设计
李涛何绍平龙建宇江明韦美雁摘要:系统前端采用微信小程序开发工具实现,后台采用thinkPHP5进行搭建,并运用Javascript技术进行研发,系统主要实现了约课管理.课表管理.用户管理.商 ...
2023基于微信小程序的婚庆婚纱摄影预约平台(SSM+mysql)-JAVA.VUE(论文+开题报告+运行)
摘要社会发展日新月异,用计算机应用实现数据管理功能已经算是很完善的了,但是随着移动互联网的到来,处理信息不再受制于地理位置的限制,处理信息及时高效,备受人们的喜爱.所以各大互联网厂商都瞄准移动互联 ...
计算机毕业设计PHP基于微信小程序寸金校园租车平台（源码+程序+uni+lw+部署）
该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程.欢迎交流项目运行环境配置: phpStudy+ Vscode +Mysql5.7 + HBuilderX+Navicat11+Vue ...
2022基于微信小程序的图书馆座位预约管理系统.rar（论文+程序设计源码+数据库）毕业设计
随着时代不断的发展,我们对于知识的汲取需要从不同领域了解,从而扩大自己的知识面,图书馆作为大学生学习的宝地,有着不可替代的地位.但是在互联网信息化时代,传统模式下的图书馆管理模式,并不能满足校园学生需 ...
计算机毕业设计-基于微信小程序的大学生心理预约咨询系统-心理测试小程序
注意:该项目只展示部分功能,如需了解,评论区咨询即可. 本文目录 1.开发环境 2.系统的设计背景 3 各角色功能模块 3.1 学生用户 3.2 心理老师 3.3 管理员 4 系统页面展示 4.1 用 ...
基于微信小程序的医院挂号预约系统
末尾获取源码开发语言:Java Java开发工具:JDK1.8 后端框架:SSM 前端:Vue 数据库:MySQL5.7和Navicat管理工具结合服务器:Tomcat8.5 开发软件:IDEA ...
基于微信小程序新冠疫苗预约系统（微信小程序）
基于微信小程序新冠疫苗预约系统基于微信小程序新冠疫苗预约系统,后端是基于java编程语言,ssm框架,mysql数据库,前端是微信小程序制作:本系统分为用户和管理员两个角色,其中用户注册和登陆系统, ...
基于微信小程序的充电桩预约管理系统的设计与实现(论文+源码)_kaic
摘要微信小程序的充电桩预约管理系统是一个复杂的系统,需要遵循不同的设计原则和方法,在实现高可用性.高性能.高安全性和高稳定性等特点的同时,还要注重用户体验和易用性,不断改进和迭代优化,以提高系统性能 ...
基于微信小程序的图书馆座位预约系统的设计与实现
1. 系统开发背景图书馆因有良好的学习氛围.大量的学习资源吸引大家前来学习,图书馆还未开馆就有大量的同学在门口排队等待,有限的座位与日益增加的自主学习者之间形成了供不应求的现象,再加上不了解图书馆的 ...

从0到1：基于微信小程序的瑜伽馆预约平台的开发笔记

背景分析

功能抽象

数据库设计

遇到的技术难点

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

对启动耗时的影响

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

对启动耗时的影响

首页（初次）渲染

对启动耗时的影响

小程序首屏渲染完成

小程序启动阶段

打开率/到达率

小程序代码包优化

界面设计

后台界面设计

从0到1：基于微信小程序的瑜伽馆预约平台的开发笔记相关推荐

最新文章

热门文章