如何开发一款堪比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的转型发展带来了启发。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码
HTML5使用DOM进行自定义控制
使用HTML5 Canvas绘制阴影效果的方法
使用PHP和HTML5 FormData实现无刷新文件上传
如何解决HTML5 虚拟键盘出现挡住输入框的问题
HTML5中div和section以及article的区别分析
html5和CSS 实现禁止IOS长按复制粘贴功能
html5 touch事件实现触屏页面上下滑动
canvas 模拟实现电子彩票刮刮乐的代码
HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能
Android自定义环形LoadingView效果
HTML5 canvas绘制五角星的方法
html5使用html2canvas实现浏览器截图
使用Canvas处理图片的方法介绍
利用Canvas模仿百度贴吧客户端loading小球的方法