知识百科

新闻资讯

联系我们

联系人:曾先生

手机:137 6025 2015

电话:137 6025 2015

邮箱:gy2008c@163.com

地址: 深圳市宝安区松岗街道溪头社区 长安智谷B栋5楼509

小程序资讯

从零开始完整制作剧本杀微信小程序(如何设计一个微信小程序)

作者:非尔思小程序 发布时间: 2022-06-11 19:23:32

趁管控在家的这几周做了一套剧本杀的线上预约、支付、点评微信小程序。感谢大白、社区各自愿者与医护人员的长期付出期待上海早日解封让工作、生活各方面恢复日常。本小程序适用于桌游、剧本杀、轰趴馆、私人影院、主题民宿、文创文旅主体项目。

从零开始完整制作剧本杀微信小程序

先看一下微信小程序的最终效果截图。

从零开始完整制作剧本杀微信小程序从零开始完整制作剧本杀微信小程序从零开始完整制作剧本杀微信小程序从零开始完整制作剧本杀微信小程序从零开始完整制作剧本杀微信小程序


一、前言

本文适用于关注剧本杀等主体活动行业的读者或者已经工作1~2年且有一定产品或开发基础的技术人员。

在资本与真人秀节目等的推动下剧本杀作为年轻人交友、娱乐新方式在19、20年迎来了第一波高光。后受疫情与行业规范等影响开始关注周边及IP打造更加关注玩家的尝鲜、交友、聚会等全程体验度。迎来了剧本杀2.0。新的剧本杀服务除了与服饰、美妆、文创、家居等行业跨界合作提供沉浸式穿越体验外还有专门针对交友、婚恋、团建等的实景杀。与KTV、酒吧、网吧、民宿、旅游景点等场景结合开拓游客群体。民宿、文旅剧本杀可以吃、住、玩沉浸式体验比一般的民宿、旅游更有特色。还有一些剑走偏锋的边玩边喝酒的“喝酒本”;针对中小学生的文学、场景、知识点“学习本”;剧本杀外卖服务等的出现可谓五花八门各显神通。

新的行业玩家也更关注自身软实力的打造利用信息化手段充分调动渠道、场地、DM等资源。迎接后疫情市场的新机会。在此我们针对这类需求初步打造一套基于微信小程序的线上剧本杀展示、组局、支付与点评应用。


二、需求梳理

从零开始完整制作剧本杀微信小程序

剧本杀功能脑图梳理

跨地区、多门店应用场景。不同门店有不同促销和剧本设定。

大家可以看一下上面脑图对产品需求有个整体了解。


三、原型设计

基于上个环节的功能需求参照常用功能组件用Axure初略画了各页面方便后续讨论细化。

从零开始完整制作剧本杀微信小程序从零开始完整制作剧本杀微信小程序从零开始完整制作剧本杀微信小程序从零开始完整制作剧本杀微信小程序从零开始完整制作剧本杀微信小程序从零开始完整制作剧本杀微信小程序从零开始完整制作剧本杀微信小程序


四、界面设计

经过多轮讨论后确定好各页面细节功能后开始UI美工制图。

从零开始完整制作剧本杀微信小程序从零开始完整制作剧本杀微信小程序从零开始完整制作剧本杀微信小程序从零开始完整制作剧本杀微信小程序

页面设计以简洁、实用为主。统一整体样式内容层次清晰规范。

主要组件有:搜索导航条剧本卡片拼车卡片玩家人数反串与否组件rating评分优惠券卡片等。


五、数据结构设计

数据围绕拼车gathering按照分类、剧本、玩家、门店等实体对象进行关系型数据存储设计。

从零开始完整制作剧本杀微信小程序

数据ER设计


六、开发准备

框架选型、功能分解与项目开发讨论反馈。

产品可选App、H5或者微信小程序形式制作考虑到用户使用场景和后续口碑引流默认按照微信功能扩展开发。对比界面流畅度与品牌增值选定微信小程序来实现。

微信小程序系统之前CS部署中间环节太多开发者需要考虑应用层、数据库层、负载均衡与ssl安全等节点后来推出云开发后使用对象map数据存储方便了很多让开发者更加聚焦业务功能实现。考虑到数据独立性和团队本身已有ssl服务器所以我们还是使用了关系型数据模型。

微信小程序展示层有很多框架可选。考虑到组件丰富度以及后期购买和用品展示的扩展需求我们选择了jquery weuivant。

参照组件库的样式对各页面和数据呈现进行了开发工期与可行性分析讨论反馈给设计更新页面。

开发环节主要工具:微信开发者工具、sqlyog、sublime、winscp、xshell。

从零开始完整制作剧本杀微信小程序

页面样式微调

从零开始完整制作剧本杀微信小程序

主功能开发环节


七、迭代开发

第一个sprint把主页、列表、详情、预约主流程页面串联起来。

第二个sprint把拼班、组局和支付流程增补进去。

第三个sprint把搜索功能和列表排序完成。

第四个sprint把优惠券功能加上包括对组局、拼车支付环境的重构。

第五个sprint把订单列表、取消、退费功能加上。

第六个sprint微调各页面样式和数据记录完整测试。

经开发测试后发布staging预览版提供给甲方手机端实际测试。根据甲方反馈调整页面功能后。提交代码质量优化对前后端算法、查询、数据、素材及代码规范进行优化。

开发期间碰到的主要逻辑功能有:

1. 微信小程序服务端

安全口令约定请求参数及返回包约定微信支付短信口令发送分享海报合成图生产等。

此外对接口频次限制、参数不正确、版本不支持、服务返回错误、处理超时、接口调用错误、授权认证异常等进行了后期分析。

2. 微信小程序应用端

component搜索组件排行rankseats玩家状态展示组件stepper人数设定规则信息元素多样式的flex布局组合等。

此外对各异常的默认样式处理像网络异常、存储异常、内存异常、字段参数异常、带宽限制、内存异常、权限异常、数据异常等也需要酌情考虑。

关于开发这块如果大家有兴趣可以恢复提出您关注的知识点我可以再开帖细讲具体实现。

从零开始完整制作剧本杀微信小程序


八、单元测试

微信开发者工具提供了比较完整的调试预览功能UI、数据AppData代码代码质量优化等方面方便开发。

从零开始完整制作剧本杀微信小程序

微信小程序调试工具


九、staging测试

上传后可以使用体验版二维码邀请相关人员参与体验反馈。

这个功能还是很实用的代码修改后随时可以上传分享给大家在不同状态下的手机端测试。


十、产品发布

用git做好版本控制发布产品全量发布注意声明。


十一、应用推广

工具型应用可以挂在公众号菜单链接、门店前台等。


十二、用户体验采集与产品迭代

快速开发第一版本上线后根据实际使用反馈设定二期升级版本需求。比如DM设定与团队激励等。

从零开始完整制作剧本杀微信小程序

自此一套实用的剧本杀微信小程序就开发完成了。

产品设计不仅仅要解决用户的痛点更好能给用户带来爽点体验包括细节关怀与激励等。

相关标签:

新闻资讯

相关股权激励案例

在线客服
联系方式

热线电话

137 6025 2015

上班时间

周一到周五

公司电话

137 6025 2015

二维码
线