`
腾讯攻城师tom
  • 浏览: 52455 次
  • 来自: 深圳
社区版块
存档分类
最新评论

如何开发一款堪比APP的微信小程序(腾讯内部团队分享)

阅读更多
一夜之间,微信小程序刷爆了行业网站和朋友圈,小程序真的能如张小龙所说让用户“即用即走”吗?

其功能能和动辄几十兆安装文件的APP相比吗?

开发小程序,是不是意味着移动应用开发的一次推倒重来,企业的运营成本会不会因此增加?

近日,笔者参加了一次腾讯自选股介绍小程序开发过程的内部沙龙,自选股小程序产品经理Poppy和首席开发工程师小K的一番海聊,从开发技术和行业走势两个方面为我们揭开了小程序的秘密。

今年7月,腾讯自选股团队接到微信的邀请,做一个Web+的应用测试。当时他们还不知道,这就是微信小程序的首批开发内测。而当时,其实连“小程序”这个名字也还没有确定。

三个月后,“腾讯自选股”成为第一个开发成功的微信小程序。相比于原来身量庞大的APP,它无需用户下载、安装,即可在微信内一键即达,并可实现盯盘、看盘、在线交易等APP的核心功能。自选股的用户无需离开微信,就可以边聊天边看盘乃至进行股票交易,与身处大户室的感受几乎无异。

这三个月,是小程序拨云见日、从无到有的三个月,自选股团队为探索开发一款完美的小程序奏响了先声。

揭秘一:在内容上有所取舍,更符合小程序所适配的场景

小程序的特点在于“轻”。自选股小程序的安装包只有900K,轻装的实现,首先来自于取舍的理念。

“小程序不是对APP的原样照搬。”Poppy介绍说,自选股小程序对APP中深度、专业的资讯服务做了取舍,只收录了支持个股的部分资讯。因为在微信里,用户可以通过订阅号、服务号等多种渠道收看资讯,小程序不必再做重复建设,而是主要适配交易与交流同步的应用场景。

小程序开发团队对自选股做了重新设计。围绕用户的核心需求,在自选股小程序的页面上,最终只保留了自选、行情和设置三个页卡,轻巧而清晰。

揭秘二:采用WebSocket协议实现数据实时性

显示实时行情是股票应用核心功能之一,但实时数据传输最为占用网络资源,也影响到小程序应用的流畅性和用户体验。

自选股小程序采用WebSocket完美解决了这个问题。小K说,以往数据更新多采用轮询机制,即客户端按照一定的周期频率发起数据请求,对网络资源的占用较大。自选股小程序的解决方案是采用WebSocket,当服务器有数据更新时主动PUSH,从而降低了无效的网络传输,使数据的实时性更强。

揭秘三:数据缓存加速数据呈现

自选股小程序通过数据缓存,加速页面的数据呈现。本地缓存文件最大可以达到10M。

10M缓存量是根据自选股用户的偏好来设置的。数据显示,80%用户的自选股不超过20支,一只股票的缓存数据大约300K,10M的缓存空间足够缓存30支以上的股票。这对于绝大多数用户来说已经足够了,而且实现了用少量数据支持页面的流畅呈现。




揭秘四:响应式绘图完美适配不同机型

Canvas在使用前需要设置大小以便占位。而在小程序里面,目前Canvas不支持RPX的方式,Canvas需要动态添加图形的宽高数据。

为了更快渲染Canvas,且不出现闪屏效果,自选股小程序在启动程序时即在后台记录用户所用设备的屏幕尺寸。进入Canvas绘制页时在OnLoad方法中计算Canvas大小并设置画布。这完美地解决了在小程序中实现响应式绘图的问题。

揭秘五:简洁的UI平衡美观与实用

自选股小程序的UI十分简洁。与iOS开发完全不同,从UI到整体前端处理大部分都采用CSS做渲染。对个别需要用到PNG的设计元素,对PNG做无损压缩。这让小程序在页面的美观与程序的轻灵之间找到了平衡。

揭秘六:人性化优化很重要

对于股票应用来说,任何一支股票的异动都需要马上看到变化,否则对于用户来说是致命的缺陷。开发团队认识到,小程序之轻绝不能以牺牲核心功能和用户体验为代价。因此,在自选股团队的建议下,微信团队专门开发了小程序动画支持功能。现在,自选股小程序中,股票一旦发生价格变化会自动闪烁,提醒用户重点关注,让小程序的功能完全不输APP。

揭秘七:人人可做小程序

“自选股小程序代表了目前微信小程序开发的标杆和极限。”Poppy对此十分自信。股票类应用本身是比较复杂的移动应用。自选股小程序开发成功,相当于厘定了小程序开发的边界。只要你的应用不比自选股更复杂,就一定能实现小程序应用。

微信小程序作为一个轻应用,它的优势之一在于使开发变得相对容易。自选股小程序的研发之所以走过了三个月时间,是因为他们作为微信小程序应用开发的拓荒者,和微信小程序研发团队共同经历了开发、完善底层技术的全过程,甚至客观上成为小程序开发标准的参照。

小程序到底该有多大才算“轻”,在小程序开发之初,微信团队对此也没有概念。当得知自选股小程序最终完成的安装包只有900 K后,他们将小程序安装包体量的上限定在了1024K。

揭秘八:对流量入口的争夺将再次开启

小程序规避了过去加载应用必需的扫码、下载、安装等繁复过程,更容易触发用户应用,更方便商家留存用户信息。月活量已经超过八亿用户的微信已经成为了一种实实在在的生活方式,其中集合了丰富的生活场景入口。微信小程序的出现,可以帮助O2O行业获取更多用户,是个绝对的利好。Poppy认为:“基本上,服务类的商家都适合做小程序。”

小K认为,相对APP,小程序的开发更为容易,只需一套代码就适配所有机型,视应用复杂程度,最多五六个人一个月就可以搭建出来,成本优势十分明显。

有人说,互联网APP创业的风口正在关闭。但小程序所倡导的基于微信环境的轻型应用的理念,为已陷入增速减缓的互联网移动应用带来一股清流,为服务类APP的转型发展带来了启发。

引用
本文来之「H5程序俱乐部」公众号
「H5程序俱乐部」是一个专注微信小程序学习交流,相关外包/招聘需求信息发布的微信公众号



  • 大小: 39.6 KB
  • 大小: 24.8 KB
1
1
分享到:
评论

相关推荐

    微信小程序--旋转木马/缩放轮播图效果

    话不多说先上图.gif ...原因:我懒+我自己写的也不敢说性能堪比原生组件 先来分析一波gif中我们需要实现效果和哪些效果可以直接修改原生Swiper的属性就能实现的   我们需要自己实现的功能 自动滚动+手动拖拽 (原生

    采用uni-app开发的多端圈子社区论坛系统

    系统支持微信公众号端、微信小程序端、H5端、PC端多端账号同步,可快速打包生成APP, 我们为你准备了完善的后台管理,不需要你懂PHP,按照教程3分钟安装完即可使用, 堪比深夜的杜蕾斯还方便。我们为你准备漂亮的UI...

    采用uni-app开发的多端圈子社区论坛系统.zip

    2022 采用uni-app开发的多端圈子社区论坛系统 系统基于TP6+Uni-app框架开发;客户移动端采用uni-app开发,管理后台TH6开发。 系统支持微信公众号端、微信小程序端、H5端、PC端多端账号同步,可快速打包生成APP。 ...

    uni-app开发的多端圈子社区论坛系统-内附教程

    系统基于TP6+Uni-app框架开发;客户移动端采用uni-app开发,管理后台TH6开发。...堪比深夜的杜蕾斯还方便。我们为你准备漂亮的UI前端。 导入UNI,2分钟编译为小程序,3分钟编译为安卓app,5分钟编译为ios系统。

    2022 采用uni-app开发的多端圈子社区论坛系统源码前后端

    2022 采用uni-app开发的多端圈子社区论坛系统 系统基于TP6+Uni-app框架开发;客户移动端采用uni-app开发,管理后台TH6开发。 系统支持微信公众号端、微信小程序端、H5端、PC端多端账号同步,可快速打包生成APP。 ...

    微信App Store中国区免费榜总榜第九名.pdf

    如果一款手游无法在微信平台上获得一席之地,往往意味着其市场前景堪忧。 【描述】:“微信App Store中国区免费榜总榜第九名.pdf” 描述中并未提供具体细节,但可以推测,文档可能包含对微信在榜单上位置的分析,...

    仿微信营销平台源码

    viicms多用户微信营销系统 是目前互联网上做微信营销系统最好的平台,其功能堪比乐享! viicms多用户微信营销系统营销管理平台为个人和企业提供基于微信公众平台的一系列功能,包括智能回复、微信3G网站、互动营销...

    内网文件传输APP (支持电脑手机文件互传)

    采用微信、企业微信等即时通讯软件分享的文件在手机中老是找不到文件目录,并且传输速度堪忧且作者流量较少,故开发了本软件,本软件还很简陋,原理是在APP端启动了一个WEB服务器,PC端内网访问部署在WEB服务器上的...

    多客开源前端/免费开源版/兴趣爱好圈子/社交圈子/游戏开黑圈子

    系统基于TP6+Uni-app框架开发;客户移动端采用uni-app开发,管理后台TH6开发。 系统支持微信公众号端、微信小程序端、H5端、PC端多端账号同步,可快速打包生成APP;...APP采用短信验证登录,小程序采用微信授权登录。

    大型购物网站堪比淘宝网

    【大型购物网站堪比淘宝网】的开发与构建是一个复杂且综合的过程,涉及到多个技术层面。首先,我们从标签"购物"、"网站"、"asp"出发,可以推测这个项目是一个基于ASP(Active Server Pages)技术构建的在线购物平台...

    科学家开发微芯片技术堪比超人的透视能力.pdf

    科学家开发微芯片技术堪比超人的透视能力.pdf

    企业邮局(可自定义皮肤,堪比网易)

    "企业邮局(可自定义皮肤,堪比网易)"这个标题暗示了我们正在讨论的是一款具有高度定制化能力和用户体验优秀的企业邮箱服务。这款邮局系统不仅在功能上与知名的163和126邮箱相媲美,还特别强调了用户界面的个性化...

    人工智能正在酝酿一场堪比历次技术革命的大变革.docx

    人工智能正在酝酿一场堪比历次技术革命的大变革.docx

    “环保精灵”App用户需求调研分析.pdf

    为了响应政府政策、贯彻国家可持续发展理念以及促进社会闲置资源的再次利用,项目组推出“环保精灵”项目,并结合近几年互联网思维以及平台搭建的相关理念,着力于打造一款公益性质的App。 通过对比同类环保App的...

    国产js框架 带中文+实例API 堪比jquery

    【国产js框架 带中文+实例API 堪比jquery】 在当前的Web开发领域,JavaScript框架扮演着至关重要的角色,...总的来说,Como.js作为一款“堪比jQuery”的国产框架,旨在为中文开发者提供一个既熟悉又高效的开发工具。

    堪比Flash的超眩JS特效

    总的来说,"堪比Flash的超炫JS特效"代表了JavaScript在现代Web开发中的强大能力,开发者可以借助各种库和API创造出丰富多样的动态内容,提升用户体验,同时保持跨平台的兼容性和性能。随着技术的不断进步,...

Global site tag (gtag.js) - Google Analytics