热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

大众点评微信小程序开发经验总结

这篇文章主要为大家详细介绍了大众点评微信小程序开发经验总结,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
大众点评+ 主要页面一览

小程序以上特征要求我们只为用户提供核心服务,且从产品到技术,都必须围绕「简约」二字做文章。因此,结合大众点评业务场景,最终在「大众点评+」中,我们主要提供以下两种基础服务:

快速找店:通过搜索、分类列表和推荐三种形式,让用户快速找到商户,并提供包括定位、电话、点评、菜品等商户信息,帮助用户做出决策

购买团购:为用户推荐团购商品并实现交易闭环,帮助用户获得实惠

产品层面足够精简,我们再来看看技术层面如何做到简约。

我们先看下项目之初开发同学的困惑:

小程序是个新鲜事物,参与开发的同事普遍对开发流程和运行原理知之甚少

在不知道小程序有多少坑的前提下,我们还是要保证在小程序开放前完成全部基础功能的开发,存在着不少风险

小程序的接口稳定性和丰富程度、安全性、连接速度等究竟如何

对于任何新生的应用场景,开发环境、工具和框架不够完善都可以理解,但如何才能既保证开发过程的简单又提供一定的规范和工程化能力?为此,在遵从小程序基本框架的前提下,我们做了如下技术选型和简单封装:

项目区分开发目录和构建目录,在开发目录中进行开发,再通过 gulp 对开发目录进行构建(主要处理压缩等基本功能),构建目录才是小程序真正的运行代码

引入 npm 的 package.json,解决开发依赖的管理、请求接口的版本化管理,但不使用任何 npm 包(只复制一份 promise 实现)

只使用 ES6 语法,配合 eslint,快速检查基本 JS 错误,(现阶段小程序报错提示不够友好,部分错误由 JS 语法错误引起)

对小程序提供的 JS-API 进行 promise 封装,代码以 promise 风格书写,以便 catch 各种运行时的错误

开发过程中的「坑小程序平台差异

小程序会在开发者工具、iOS 设备和 Android 设备运行,不同平台可能存在实现上的差异,从而导致少许的展现不一致。不过总体来说,兼容问题比起之前的开发方式减少很多,期望小程序团队进一步做好底层兼容,为前端程序员造福。

开发思维和技术限制

没有 BOM\DOM 操作,只能通过数据改变视图

再次强调小程序最多支持5级页面

开发代码 + 小程序编译封装的代码 = 最终的编译包 <1M

针对上面提到的问题,我们通过自己的实践总结了一套解决方案,这里也与开发者一起分享讨论:

在开发过程中,我们肯定以开发者工具为主完成开发及调试,但这不代表在真机能获得与预期完全一致的展现。在过往开发 hybrid 框架的经历中,我们也总会遇到 iOS、Android、H5 表现不一致的问题,这里既涉及到底层实现的差异,也涉及到不同开发团队的沟通问题,这个问题很难一劳永逸地被完美解决。

web 服务支持

web 接口版本化

开发思维的转变

因此,有些常见方案的实现思路就要发生转变,包括但不局限于以下的操作:

类似微信通讯录的锚点切换(可以使用微信的 scroll-view 实现)

计算内容的高度决定截行 + 显示「展开/收起」开关

解决这个问题,其实大致有三种思路:

优化产品交互流程,尽量简化产品流程直到少于5级

redirectTo 思路,在页面达到第五级之后,后续所有页面打开都通过redirectTo方式。带来的问题也显而易见,如果用户在第N个页面点击返回,他只能看到第四个页面,中间的 N-5 个页面都不见了,适用于特定场景

goBack 的思路,采用技术手段保证主流程只有5级(在我们的实现中,既有把搜索功能作为页面的一个状态而非页面的方式,也有把订单提交后以 redirectTo 的方式销毁当前页面的办法),之后通过统一封装页面路由的方式,采用 getCurrentPages 接口判断当前页面是否在历史堆栈中,没有则通过 navigateTo 接口打开,有则通过 goBack 的方式返回,在页面侧 onShow 事件中去读取最新的参数信息,完成页面的更新动作

最后,我们单独来聊一聊代码体积优化的问题。

虽然现阶段大众点评+仅提供了找店和团购两个主要功能,但 1M 的代码量毕竟太小,为了在 1M 的体积下把更多的功能和更好的体验带给用户,并未为以后的扩展预留足够的空间,这就要求我们在代码的体积控制上必须「斤斤计较」。

会把我们项目的 json、wxml、wxss、js 全部转化为 js,合并成一个文件上传到微信云服务器。当用户第一次打开小程序时再从服务中下载并解析。以我们的项目为例,通过工具的压缩和统计,在我们计算出项目体积达到了~370K,经过微信编译上传,在手机端预览下载时,下载的文件达到了~540K,这正是开发者工具显示告诉我们的编译包大小。

开发层面:

精简 wxml,我们发现当 wxml 被编译成 js 后会占用非常大的体积(减少一个压缩后 4K 的 wxml,可以减少编译包 9K)

以上就是大众点评微信小程序开发经验总结的详细内容,更多请关注 第一PHP社区 其它相关文章!


推荐阅读
  • 作为140字符的开创者,Twitter看似简单却异常复杂。其简洁之处在于仅用140个字符就能实现信息的高效传播,甚至在多次全球性事件中超越传统媒体的速度。然而,为了支持2亿用户的高效使用,其背后的技术架构和系统设计则极为复杂,涉及高并发处理、数据存储和实时传输等多个技术挑战。 ... [详细]
  • 本文详细解析了JSONP(JSON with Padding)的跨域机制及其工作原理。JSONP是一种通过动态创建``标签来实现跨域请求的技术,其核心在于利用了浏览器对``标签的宽松同源策略。文章不仅介绍了JSONP的产生背景,还深入探讨了其具体实现过程,包括如何构造请求、服务器端如何响应以及客户端如何处理返回的数据。此外,还分析了JSONP的优势和局限性,帮助读者全面理解这一技术在现代Web开发中的应用。 ... [详细]
  • Spring Boot 实战(一):基础的CRUD操作详解
    在《Spring Boot 实战(一)》中,详细介绍了基础的CRUD操作,涵盖创建、读取、更新和删除等核心功能,适合初学者快速掌握Spring Boot框架的应用开发技巧。 ... [详细]
  • 当前,众多初创企业对全栈工程师的需求日益增长,但市场中却存在大量所谓的“伪全栈工程师”,尤其是那些仅掌握了Node.js技能的前端开发人员。本文旨在深入探讨全栈工程师在现代技术生态中的真实角色与价值,澄清对这一角色的误解,并强调真正的全栈工程师应具备全面的技术栈和综合解决问题的能力。 ... [详细]
  • 三周学会小程序第七讲:提交问题
    截止到上一讲可以支持数据库存储了,所以这一讲开始讲解怎么从小程序发布一个问题并存储到服务器端。下面简单罗列一下本讲的知识点。对了老规矩,文末附源码。对小 ... [详细]
  • 掌握PHP框架开发与应用的核心知识点:构建高效PHP框架所需的技术与能力综述
    掌握PHP框架开发与应用的核心知识点对于构建高效PHP框架至关重要。本文综述了开发PHP框架所需的关键技术和能力,包括但不限于对PHP语言的深入理解、设计模式的应用、数据库操作、安全性措施以及性能优化等方面。对于初学者而言,熟悉主流框架如Laravel、Symfony等的实际应用场景,有助于更好地理解和掌握自定义框架开发的精髓。 ... [详细]
  • Spring框架入门指南:专为新手打造的详细学习笔记
    Spring框架是Java Web开发中广泛应用的轻量级应用框架,以其卓越的功能和出色的性能赢得了广大开发者的青睐。本文为初学者提供了详尽的学习指南,涵盖基础概念、核心组件及实际应用案例,帮助新手快速掌握Spring框架的核心技术与实践技巧。 ... [详细]
  • 深入解析Tomcat:开发者的实用指南
    深入解析Tomcat:开发者的实用指南 ... [详细]
  • 全面解析:Hadoop技术栈中的Linux操作系统概览
    全面解析:Hadoop技术栈中的Linux操作系统概览 ... [详细]
  • MySQL性能优化与调参指南【数据库管理】
    本文详细探讨了MySQL数据库的性能优化与参数调整技巧,旨在帮助数据库管理员和开发人员提升系统的运行效率。内容涵盖索引优化、查询优化、配置参数调整等方面,结合实际案例进行深入分析,提供实用的操作建议。此外,还介绍了常见的性能监控工具和方法,助力读者全面掌握MySQL性能优化的核心技能。 ... [详细]
  • 可转债数据智能抓取与分析平台优化
    本项目旨在优化可转债数据的智能抓取与分析平台。通过爬取集思录上的可转债信息(排除已发布赎回的债券),并结合安道全教授提出的三条安全线投资策略,新增了建仓线、加仓线和重仓线,以提供更精准的投资建议。 ... [详细]
  • Jedis接口分类详解与应用指南
    本文详细解析了Jedis接口的分类及其应用指南,重点介绍了字符串数据类型(String)的接口功能。作为Redis中最基本的数据存储形式,字符串类型支持多种操作,如设置、获取和更新键值对等,适用于广泛的应用场景。 ... [详细]
  • 在Laravel中实现PHP对JSON数据的发布与处理 ... [详细]
  • DebianWSLdesktopinstallonwindows10
    从windowsstore安装DebianWSL安装dbussudoaptinstalldbus-x11对于ubuntu18.04增加了更多安全机制补充sudoapt-getins ... [详细]
  • 个人总结_软件工程课程——个人总结
    本文由编程笔记#小编为大家整理,主要介绍了软件工程课程——个人总结相关的知识,希望对你有一定的参考价值。前言时长4个与的软件工程实践结束。Alpha与B ... [详细]
author-avatar
Yatmiiml
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有