周家溢：大众点评+如何在小程序开发中少走弯路
发表时间：2023-12-10 16:10:34
文章来源：炫佑科技
浏览次数：195
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
周佳怡，美团点评工程师，拥有3年Web前端开发经验。 主要负责朋友去哪儿、霸王餐、大众点评框架等项目的开发。 在Web前端开发及工程化、开发调试方面有一定的经验积累和研究。
作为特邀用户，大众点评早在小程序内测阶段就开始了产品设计和开发。 “大众点评+”自然成为1月9日小程序上线后的首批应用之一，并于当天上线。 它的访问量超过了两百万。 我想大家一定很想知道小程序开发如何少走弯路。 为此，我们专门总结了开发过程中的各种“坑”和经验，希望能为后续开发提供一些思路和建议。
大众点评+简介
首先我们简单了解一下大众点评+的功能：
大众点评+主页列表
大众点评+产品特点
根据小程序的开发规范，我们总结了影响小程序产品形态的几个关键特征：
以上特点要求我们只为用户提供核心服务，从产品到技术的一切都必须围绕“简单”二字。 因此，结合大众点评的业务场景，我们*终在“大众点评+”中提供以下两项基础服务：
快速找店：让用户通过搜索、分类列表、推荐等方式快速找到商户，并提供商户信息包括位置、电话、评论、菜品等商户信息，帮助用户决策
团购购买：向用户推荐团购产品，实现交易闭环，帮助用户获得收益
大众点评+开发经验讨论
产品层面已经足够精简了，我们来看看技术层面如何做到简单。
早期技术选型
我们先来看看项目之初开发的困惑：
在稍微了解了小程序开发流程并测试了接口后，我们发现在腾讯运维体系的支持下，无需担心相关服务的稳定性和性能，但新的问题却出现了：
对于任何一个新的应用场景来说，开发环境、工具和框架不够完善是可以理解的，但如何在提供一定的规范和工程能力的同时，保证开发过程的简单性呢？ 为此，在符合小程序基本框架的前提下，我们做了如下技术选型和简单封装：
项目分为开发目录和构建目录。 在开发目录中进行开发，然后通过gulp构建开发目录（主要处理压缩等基本功能）。 build目录是小程序
引入npm的.json来解决开发依赖的管理和请求接口的版本管理，但不要使用任何npm包（只复制一个实现）
只使用ES6语法并配合快速检查基本的JS错误（现阶段小程序错误提示不够友好，部分错误是由JS语法错误引起的）
封装小程序提供的JS-API，并以捕获各种运行时错误的风格编写代码。
同时，我们持续关注小程序社区和论坛的动态，比如利用社区解决方案解决富文本渲染的问题小程序制作经验，但对一些技术和框架持观望态度:
各种基于组件的解决方案和模拟解决方案的框架（我们希望详细了解小程序的运行和构建机制，当代码逻辑比较简单时，框架的封装对我们来说弊大于利）
使用async/await或者其他ES6/7语法需要引入大量代码主要是受到1M代码的限制。 后面我们会详细介绍我们在体积优化方面所做的工作（如果你只是想学习和体验小程序的开发，那么就尽情使用吧）
开发过程中的陷阱
接下来就是大家比较关心的部分了。 在开发过程中，小程序开发有哪些“陷阱”，我们该如何应对？ 事实上，作为一个内测用户，我在小程序开发初期确实遇到了很多坑，但是这不得不归功于我们微信的同事。 每次我们反馈问题，我们都会得到很快的回复，而且问题总是很快得到解决。 所以这里我们不打算讲小程序的Bug以及如何解决。 想要了解更多的朋友可以参考推荐资料中的“微信小程序常见常见问题解答”。 但一些技术架构或者产品交互的限制仍然需要初次开发小程序的开发注意。 以下是我们认为重要的一些问题：
平台差异、基础设施和解决方案对应的设计开发思维和技术限制
针对上面提到的问题，我们通过自己的实践总结了一套解决方案，在这里也和开发分享和讨论：
平台差异化
在开发过程中，我们肯定会使用开发工具来完成开发和调试，但这并不意味着真机上的表现会完全符合预期。 在以往开发框架的经验中周家溢：大众点评+如何在小程序开发中少走弯路，我们总是遇到iOS、H5、H5性能不一致的问题。 这既涉及到底层实现的差异，也涉及到不同开发团队之间的沟通问题。 这个问题很难一劳永逸地完善。 解决。
因此，我们针对这个问题的解决方案是使用日志，类似于Web端日志，记录关键功能信息，辅以真机调试、抓包等常用调试技术。
网络服务支持
随着苹果对https的推广，大众点评也完成了整个网站转https，所以在我们项目的后期，这个问题自然就消失了。 但对于一些中小型公司或个人开发来说，这仍然是一个问题。 建议直接使用腾讯云的小程序云服务来解决。
Web 界面版本控制
解决方案并不复杂，可以通过API前向兼容或者API版本管理（在API请求中统一携带当前小程序的版本信息）来解决。 我们采用了后者。
开发思路转变
传统的/zepto开发模式中，前端是用来直接改变DOM内容的。 当需要更新大量 DOM 时，这种解决方案会变得非常低效。 后来随着React和DOM DIFF技术的推广，大家也逐渐习惯了。 通过更改数据来更新视图，但操作 DOM 的 API 始终保留在 React 中。 但在小程序中，由于JS代码运行在app中，所以没有DOM和BOM的概念，任何相关操作都是无效的（你可能会发现在开发工具中可以使用，但肯定不行真机上）的）
因此，一些常见解决方案的实现思路将需要改变，包括但不限于以下操作：
5 级页面限制
解决这个问题其实有三个思路：
优化代码大小
*后，我们单独谈谈代码大小优化。
为什么要优化音量？
虽然大众点评现阶段只提供了店铺搜索和团购两个主要功能，但1M的代码量毕竟太小了。 为了在1M的大小中给用户带来更多的功能和更好的体验，还没有为以后的扩展预留足够的空间，这就需要我们对代码的大小要“小心”。
小程序的大小是如何计算的？
小程序会将我们项目的json、wxml、wxss、js全部转换为js，合并成一个文件，上传到微信云服务器。 当用户**次打开小程序时，会从服务中下载并解析小程序。 以我们的项目为例，通过工具压缩和统计，我们计算出项目体积达到~370K。 经过微信编译上传，手机预览下载，下载文件达到~540K。 这正是开发工具显示告诉我们编译后的包的大小。
如何优化？推荐信息
大众点评+开发总结
大众点评前端团队有幸见证了微信小程序从早期内测到功能和基础设施逐步完善的全过程。 再次感谢小程序团队始终倾听我们开发的声音和意见，**时间响应，不断丰富API功能，不断完善开发。 经验。
这让我们有理由相信，微信小程序生态将会越来越完善，而随着腾讯云对小程序在Web服务层的支持越来越强大，微信小程序将会越来越受到中小企业的青睐。规模企业和个体企业家。 开发门槛变得更低。 也欢迎更多微信小程序开发和创业者加入。
