如何从零制作小程序（如何从零制作小程序游戏）

编者简介：剧本杀作为近年来年轻人青睐的社交活动，不仅在线下蓬勃发展，线上也出现了类似的产品。本文作者分享了他从零开始完全制作一个杀死微信小程序的脚本的故事。让我们来看看。

趁着这几周宅在家里的机会，我做了一个杀脚本的微信小程序，用于在线预订、支付、点评。感谢大白、社区志愿者和医护人员的长期奉献。我们期待上海早日解封，让工作、生活各方面恢复正常。该小程序适用于桌游、剧本杀、派对厅、私人影院、主题民宿、各大文创旅游项目。

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

一、前言

在资本和真人秀节目的推动下，剧本杀作为年轻人交友、娱乐的新方式，迎来了19年、20年的第一波辉煌。后来受疫情和行业规范的影响，我们开始专注于周边和IP创作，更加注重玩家尝鲜、交友、聚会的充分体验。迎来脚本杀2.0。除了与服饰、美妆、文创、家居等行业跨界合作，提供沉浸式时空穿梭体验外，全新剧本杀服务还拥有专门针对约会、婚姻、团队建设的真人杀，结合KTV、酒吧、网吧、民宿、旅游景区等场景，发展旅游群体。民宿和文旅项目提供了吃、住、玩的沉浸式体验，比普通民宿和旅游更有特色。还有一些奇奇怪怪的“喝酒书”，是设计来边喝酒边玩的；针对中小学生的文学、场景、知识点的“学习书”；还有杀脚本外卖服务的出现等等，可谓五花八门、各显神通。

新的行业参与者也更加注重自身软实力的建设，利用信息技术充分调动渠道、场地、优秀DM等资源。拥抱疫情后市场新机遇。针对这样的需求，我们初步打造了一套基于微信小程序的在线剧本展示、游戏组织、支付和点评应用。

二、需求梳理

脚本查杀功能脑图

跨区域、多门店应用场景。不同的商店有不同的促销活动和脚本设置。

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

三、原型设计

根据上一个链接的功能需求，参考常用的功能组件，用Axure简单画出了各个页面，方便后续讨论和细化。

四、界面设计

经过多轮讨论，确定了各页面的详细功能，开始UI美工。

页面设计以简洁实用为主。整体风格统一，内容层次清晰、标准化。

主要组件有：搜索导航栏、场景卡、拼车卡、玩家数组件、评分、优惠卡等。

五、数据结构设计

数据围绕拼车采集，基于品类、脚本、玩家、店铺等实体对象进行关系型数据存储设计。数据ER设计

六、开发准备

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

产品可以以App、H5或微信小程序的形式制作。考虑到用户的使用场景和后续的口碑流量，产品将默认按照微信功能扩展进行开发。在比较界面流畅度和品牌附加值后，选择微信小程序来实现。

在微信小程序系统之前，CS部署中间环节太多。开发者需要考虑应用层、数据库层、负载均衡、SSL安全等节点。后来云开发上线后，使用对象图数据存储变得方便多了，让开发者更加专注。业务功能实现。考虑到数据独立性和团队自己的SSL服务器，我们仍然使用关系数据模型。

微信小程序展示层有很多框架可供选择。考虑到组件的丰富性以及后期采购和供应展示的扩展需求，我们选择了jqueryweui、vant。

参照组件库的风格，对各页面及数据呈现进行开发进度及可行性分析讨论，并反馈至设计更新页面。

开发过程中主要工具：微信开发者工具、sqlyog、sublime、winscp、xshell。

页面风格微调

主要功能开发链接

七、迭代开发

第一个冲刺连接首页、列表、详情、预订主流程页面。

第二次冲刺增加了分组、组建团队和付款的过程。

第三次冲刺完成了搜索功能和列表排序。

第四次冲刺增加了优惠券功能，包括局点和拼车支付环境的重构。

第五次冲刺增加了订单列表、取消和退款功能。

在第六次冲刺中，我们对每个页面的样式进行微调，并完成数据记录测试。

开发测试完成后，将发布暂存预览版本，提供给甲方在手机上进行实际测试。根据甲方反馈调整页面功能后。提交代码质量优化，优化前后端算法、查询、数据、材料和代码规范。

开发过程中遇到的主要逻辑函数有：

1.微信小程序服务器

安全密码协议、请求参数及返回包协议、微信支付、短信密码发送、制作复合海报分享等。

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

2.微信小程序应用

组件搜索组件、排名排名、席位玩家状态显示组件、步数设置规则、信息元素多风格Flex布局组合等。

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

关于开发，如果大家有兴趣，可以继续提出自己关心的知识点，我可以另外开一个帖子来详细讲解具体的实现。

八、单元测试

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

九、staging测试

上传后即可使用试用版.并邀请相关人士参与体验反馈。

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

十、产品发布

使用git进行版本控制，发布产品，完整发布，注意声明。

十一、应用推广

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

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

第一版本快速开发后，将根据实际使用反馈设定第二阶段升级版本的要求。比如DM设置、团队激励等。此后，开发了一套实用的脚本杀微信小程序。

产品设计不仅要解决用户的痛点，还要为用户提供愉悦的体验，包括细节的关怀和激励。

我是青云茶客，欢迎感兴趣的朋友讨论更多产品设计和项目开发的案例实践。

最后以茶诗结束本文：

喝完茶，我们在清屋檐下唱午鸡，偶尔骑着毛驴去东西河。

酒食由樵夫拿，笔砚由童子扛。

回首，我倚在水榭栏杆上。和尚家的墙是用新鲜的泥土砌成的，他写诗。

当我从星兰回来，问起来时的路时，到处都是蝉鸣，太阳已经西斜了。

——宋代赵汝琪《茶》

题图来自Unsplash，基于CC0协议