如何开发一款堪比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 举报,一经查实,本站将立刻删除。

相关推荐


我正在使用一个返回PNG编码的base64字符串的插件,我无法更改它,我必须使用它,但是我真正需要的是tiff编码值(base-64).有办法吗?我试图创建一个画布,加载pngbase64,然后使用toDataURL(‘image/tiff’),但经过一些研究,我发现不支持tiff作为toDataURL()的输出.有什么建议么?解决
我有这个正在玩的浏览器游戏.但是我也在尝试使其也可以在移动浏览器中使用.但是当同时按下多个按钮时,我似乎无法使其正常工作.我有这个游戏,您可以左右移动并跳跃.(见下图)touchbuttonsingamehttp://www.userhome.org/mobilegame.png我的代码如下所示:functioninittouc
我正在使用d3.js进行散点图绘制,我想绘制x和y轴以使其在点(100,75)相交.如何做到这一点?我在用svg.append("g").attr("class","axis").attr("transform","translate(0,"+(padding+223)+")").call(xAxis2);//CreateY2ax
我在htmlimg标签中有一张图片.我的要求是,当用户单击图像时,它将在拖动鼠标的同时标记一个点并画一条线.然后,当用户完成拖动并单击图像时,它应该显示的线条还以毫米/厘米为单位显示线条的尺寸.即,用户必须在图像上画一条线并显示其画线的距离/长度(以毫米/厘米为单位).如何在Web
我正在开发智能电视应用程序,并且从IP摄像机流媒体直播视频是该功能的很大一部分.相机手册指出,如果将其设置为流MPEG-4或H.264,则不支持HTTP.只有RTSP/RTP.替代方法(通过HTTP)是MotionJPEG,我希望尽可能避免这种情况(电视上的帧速率糟透了).是否有用于RTSP的JavaScript/HT
遵循ControlstartpositionanddurationofplayinHTML5video的原则,我尝试使每个片段播放完后自动将视频从一个片段跳到下一片段.每个片段的持续时间相同,每个片段的开始时间位于一个数组中.我似乎无法弄清楚如何在addEventListener之后循环遍历数组.varvideo=document
我正在尝试将相当简单的html导出到canvas,然后导出到png.为此,我正在使用rasterizeHTML(http://cburgmer.github.ioasterizeHTML.js/).我面临的问题是,我收到一条警告,例如正在加载外部图像/资源,但我没有.这是我尝试过的:HTML:<canvasheight="500"width="500"id="rasterize
Thisjsfiddledemonstratesthefollowingissue.最简单的示例是:<inputid="number"type="number"value="1">console.log(document.getElementById('number').value);这将按预期记录1.但是,这:<inputid="number"type
我正在使用Spring表单,并且想使用Spring表单似乎不支持的HTML5‘required’属性.<form:inputpath="someinput"cssClass="required"/>我似乎做不到<form:inputpath="someinput"cssClass="required"required="required"/>因为Spring
我正在使用angularJS开发应用程序.我的应用程序要求将数据保存在本地.因此,我正在使用HTML5本地存储.HTML5本地存储的问题在于,当用户清除浏览数据时,所有数据都将丢失,我们需要避免这种情况.我意识到,由于数据存储在用户计算机上,因此无法100%保护数据.本质上,是否有一种方法可以
我希望在首次加载时在我的网站上预加载一些小视频文件.这样,当用户单击以进入网站的一部分时,可以自动播放和使用它们.我需要无缝过渡,因此理想情况下应预加载整个视频文件,以免造成任何延迟.香港专业教育学院尝试了一些不同的插件,如html5preloader,以及其他一些JS技术将视频文件
 指引表单在网页应用中十分重要,基本上任何一个网站都必须使用到表单元素,所以表单的美观和易于交互对于网站设计就变得十分重要。HTML5对目前Web表单进行了全面提升,使得我们使用表单更加智能。它在保持了简单易用的特性的同时,还增加了许多内置的控件或者控件属性来满足用户的需
我正在学习JavaScript,但经验不足.但是我正在制作一个HTML表,我想在每个表单元格(<td>)中添加一个onClick事件.<tableid="1"><tr><tdonClick="tes()">1<d><tdonClick="tes()">2<d><r><tr
我正在使用AngularJS,并且在选择数据列表(html5)的元素时要使用指令ng-click.这是我的实际代码示例:<label>Search</label><inputtype="text"class="input-search"list="datalistcit"ng-change="changeQuery(queryCity)"ng-model="queryC
当您将来自其他域的图像放在画布中时,画布会受到污染,并且诸如getDataURL或getImageData之类的某些功能会被禁用.当您尝试使用此类功能时,会发生SECURITY_ERROR错误.为什么有这种保护措施?这种方法使用了哪种攻击?谢谢!编辑:我应该问:如何将来自其他域的图像用于攻击?   我弄不
我写了这个webRTC应用程序,它使用添加了不同滤镜的照片进行拍摄.当我单击“单击”按钮时,来自webRTC视频提要的帧将被加载到右侧的画布上.HTML代码-<videoid="vid"autoplay="true"></video><canvasid="cvs"></canvas><buttonid="btn1"onclick="start(
如果Chrome中使用了网络摄像头,则该页面的标签上会出现一个红点.并且,如果其他页面尝试访问网络摄像头,视频将变黑.我的问题是,是否可以使用JavaScript检查是否正在使用网络摄像头?怎么样?通过使用navigator.getUserMedia,我尝试了以下代码:navigator.getUserMedia=navigator.get
好的,所以我发现使用JqueryMobile和Phonegap开发androidApp在android4中工作正常,但是在旧版本(例如2.2.2)上,可滚动功能中断.因此,我尝试使用iScroll,但是存在冲突的问题,最终我只是决定编写一个Javascript函数来处理它.它曾经可以工作,但是现在坏了.所以这里是:<!DOCTYPEHT
我有一个正在构建的Webapp,并且刚开始使用SQLite.我已经能够创建表单,打开我创建的数据库,创建表和所需的字段以及在字段中输入数据.现在,我尝试使用SELECT语句读回数据,以将其显示在屏幕上以及列的列表中.我只是不知道javascript或HTML5中的SELECTstatemnt的语法‘SELECT*FRO
这些是我正在开发的表单的屏幕截图.我要设计表单中的选择框,以使选项中的文本右对齐,并且在选择选项后,所显示的所选文本也应显示如下图所示.HTML代码:<select><optionvalue="0"selected="selected"style="text-align:right;">EqualsTo</option><optionvalue="1&quo