爆款小程序是如何诞生的?

腾讯云开发者

于 2018-04-09 11:02:25 发布

阅读量940

点赞数

分类专栏：腾讯云云服务器移动开发文章标签：腾讯云微信小程序 web

本文链接：https://blog.csdn.net/QcloudCommunity/article/details/79863162

版权

腾讯云同时被 3 个专栏收录

209 篇文章 3 订阅

订阅专栏

云服务器

76 篇文章 1 订阅

订阅专栏

移动开发

29 篇文章 1 订阅

订阅专栏

欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~

本文首发在云+社区，未经许可，不得转载。

作者：黄荣奎|腾讯云微信小程序解决方案负责人

今年可以说是小程序的元年，各类游戏、店商、旅游类的小程序如雨后春笋般涌现，我想在座的朋友大家或多或少都使用过小程序，那么一款火爆的小程序是如何开发出来的呢？今天我们邀请了来自腾讯云Layabox和加推科技的五位技术专家为大家一站式分享解析如何从0到1低成本甚至是0成本开发一款爆款的小游戏，让微信小程序开发真正实现触手可及。

今天我给大家带来的题目是腾讯云微信小程序解决方案。我叫黄荣奎，是腾讯微信小程序方案的负责人，目前我正在负责小程序在腾讯云上的解决方案，如何快速帮助开发者快速完成开发和上线。

在去年的12月份我做一次分享的时候，大概有1/3的人有使用过小程序，现在应该会有更多。我们简单回顾一下微信小程序的发展历程，微信小程序在9月份开始内测到2017年1月9日的时候微信小程序正式开放，到了大家真正所接受的是2017年12月28日，就是微信小游戏开始开放的那一次，也就是大家所熟悉的跳一跳，那个时候微信小程序才被大家广泛的认识起来。

简单分享一下微信小程序的一个分布，去年的时候微信小程序它的主要的来源来在于工具这一部分。类似于我们在生活中常用的摩拜单车，滴滴打车，但是现在比较火的游戏、社交已经赶超它的市场份额。

那么小程序它如何实现的呢？

先介绍一下小程序，这是官方给出的概念，小程序是一种新的开放能力，开发者可以快速的开发一个小程序，小程序可以在微信内被快捷的获取和传播，同时具有出色的使用体验。

那么小程序实现的原理是什么？

第一是它的渲染层，就是他的Webviews，第二个是它的逻辑层，就是我们写业务逻辑实现登录功能和支付功能，第三个可以理解为微信原生的能力。

那么它是如何实现这一部分能力呢？

Webviews的话主要负责渲染，底层微信提供更多的底层的能力。我们可以看到微信把很多的丰富的原生客户端以及它自己的这些能力提供到了给了开发者。比如说网络，发起网络请求，存储和下载，存储包括文件的读写、音视频的读写，登录是微信版，形成关系连。组件就是我们常用的组件，包括这里面还有硬件给到开发者，包括音视频的录制、摄像头，还有拍照、扫码等。

那么它中间是通过什么进行消息的传递及调用的呢？

可以看到这里是通过事件以及返回数据来进行传递的。当用户它在界面上有一些操作行为的时候，就会触发一些事件，给到原生Webviews，再到业务逻辑。

那么小程序如何渲染出来的？

有过小程序开发者经验的都知道，我们写了一个叫WXM2的东西，定义成Javascript，和业务一起打包形成小程序。

这是小程序的一个事件处理的方法，可以看到里面有Publish。Publish是Servive发送数据给View，Service监听View事件，Service和View触发Native层，调用WX.api。

那么小程序它为什么会这么快？

第一个是它有一个安装包缓存，刚才有提到每一个小程序开发完成之后都会进行一个编译，形成小程序包。对比一下我们之前的一些开发方式，比如说H5的体验，会有很大的不一样的感觉，H5是TM2，通过请求下载到用户的设备上面，然后再进行渲染。如果出现网络比较差的情况，比如说3G、4G信号不太好的时候，都会出现白屏的情况。但是小程序不一样，它会生成程序包，可以缓存在用户的设备上面，这样用户在下一次使用的时候就不会重复下载。也就不会出现白屏等情况。当然对于小程序的安装包的大小也是有限制的，不能特别大，通常官方之前要求是不能大于2Mb，不知道现在有没有提升。
第二个是Webview的界面，当进入了小程序的时候，并不是点击一下才生成一个Webview，生成Webview是有时间消耗的。当我进入到小程序的主页的时候会生成多个Webview，显示时只需展示Webview，而不用再进行生成，这样加载速度会到很大的提升。
第三，Native组件，在这个页面里是原生的组件，以及里面的一些图片都是原生的，从而加快启动速度。当然它还使用了其他的，比如说分包加载之类的。

我们来比较一下各种开发方式，我们对小程序的体验以及它的开发难度及对用户使用上的消耗做一个对比。之前H5是我们想到的可以跨平台的解决方案，从开发来讲H5和小程序只需要了解前端开发就可以开发了。但是原生开发APP就比较大，而且是分平台的，IOS和安卓是不同的开发语言。如果一个团队开发一个小程序必须有IOS团队和安卓团队，开发成本较高。

从用户体验上来讲，小程序的体验只能说较好，如果针对原生APP来对比还是会差一些。但是对比外围其他APP的话，小程序的速度、性能会快很多。而且从能力上来讲的话，由微信提供的一些功能，小程序可以操作一些硬件，但是外围APP就有点吃力。原生APP支持最好，可以操作很底层的硬件。小程序可以通过查找或以附近的这种形式推荐，所以它的传播能力更好，同时支持朋友圈进行分享传播。相对原生APP传播能力就很弱。针对某些使用场景的话，原生APP体验是非常差的，小程序非常快。比如说我在路上看到摩拜单车的话，我会直接用我的小程序扫一下。但是APP你还需要下载。

腾讯云开发者工具解决方案

如果要自己进行小程序的开发的话，通常需要有自己的服务器、运营也需要给它配置一些证书才进行开发，所以每一个开发者要了解服务器运维的知识。同时部署服务器代码不方便，服务器端代码调试不直观，更多的时候花费在周围环境的部署，而不是把更多的心思放在业务开发上面。

针对这种情况我们做了这么一个解决方案Wafer1.0，它的目的是解决服务器部署的问题，把服务器的均衡、服务器的扩容提前处理好，把业务的基础服务代码在服务器里面写好，同时拥有基础的会话服务，这是我们早期的解决方案。但是这种解决方案也存在一定的问题，需要用户了解原理是什么样的，服务器程序部署也要自己弄，架构太过专业化，不适合个人开发者，代码调试也不方便。

我们跟微信做了深度的合作，开发出了我们的Wafer2，Wafer1和Wafer2区别很大，尤其是开发者用户可以上传服务器端的代码，可以直接上传代码到开发环境和生产环境。开发设置环境和生产环境、域名、证书还有数据库都是系统提前准备好的。用户把代码写好，就可以直接上传代码。我们Wafer2也是集成了腾讯云现成的能力，比如说信道服务、对象存储，万象优图、智能语音等等。

可以看到Wafer2其实有很多新特性，包括代码一键上传，您不需要了解服务器端知识，只需要了解开发环境和生产环境即可。我们的开发和线上环境是分离的，我们能做到一键签发、部署SSL证书。同时Node.js开发环境支持远程调试，这一套都是免费的，欢迎大家体验。

这个是我们现在在微信开发者工具里面的能力，右上角有一个腾讯云的小图标。有了这个能力您可以直接上传代码到开发环境，然后启动弹幕调试，可以在后台可以看到当前的环境变量，重启服务、停止服务，还可以上传代码到生产环境去。

腾讯云小程序解决方案已经完美的解决了前面的两个问题（需要您一定服务器运维知识，部署服务器代码不方便的问题）那么还剩下两个问题，一个是服务器端代码调试不直观，针对这个问题我们和微信做了远程调试的能力，当然这是针对与Nods.js版本的。有Nods.js开发经验的同学肯定都不会陌生。另一个是远程调试，这里的代码都是服务器的代码，可以看到断点以及查看环境变量。

Wafer2除了这些特点之外，还将用户的框架做好了，用户只需使用Wafer2绑定腾讯云账号和小程序的账号，然后创建小程序的项目。

创建完成后，我们需要点击这里上传测试代码，这时您本地的代码就被上传到服务端，这里我们也给用户分配好了域名，用户只要在小程序里面把这个给配置好就可以来进行访问了。我们提供了蛮多的能力，包括快速节点接口、登录、语音识别等等这些能力我们都提供了，可以保证用户在开发的时候方便的使用到。

那么在这个基础上我们有做哪些东西呢？

第一个是聊天室小程序，这是基于我们自己Sdk做的聊天室的功能，主要使用到Websocket的服务。聊天主要用到的是信息的互动，双方通信，Websocket提供的一个能力，小程序登录会向服务器获取地址，其他由Paas提供当前的用户需不需要跟业务服务器进行连接，还是需要跟当时的服务器进行连接。这样做的好处是可以让我们开发的时候不需要更多的关注Websocket的实现。而且websocket有一定的性能消耗的，如果使用Paas可以免去这个性能消耗。我们也可以对异常的情况进行监测，比如说断线或者异常的情况进行兼容，这些能力都在我们的SDK里面，大家使用的时候了解一下。
第二是图像识别，可以看到这是由腾讯云提供的万象优图能力，如身份证识别：用户上传身份证之后可以识别上面的姓名、出生年月、性别以及地址等，当然这只是腾讯云提供的一部分的能力。优图还可以提供了活体校验，大家后续可去了解。本文暂不涉及。

除了这些之外，我们接下来还要做哪些东西呢？

目前的版本控制的现状是这样的，用户在开发小程序的时候，代码是在客户端进行编辑的，存储是用户自己存储的，当然这就会带来很多弊端，比如说代码的版本管理，版本对比，很多情况都不能在客户端完成。用户在开发完成之后需要部署服务器的话，需要自己去完成代码的部署。

另一个弊端就是初始化项目比较复杂，版本控制和服务端没有关联，无法回退代码，开发者工具也不支持GIT操作。针对这种情况我们和微信也做了进一步的合作。结合腾讯云的TGIT，也就是腾讯内部使用的代码管理。然后在部署方面我们使用了程序集成，就是可以直接用开发者工具发布到服务器上，这个服务器可以是用户自己的服务器，也可以其他的服务器。

有了这些能力的，我们就可以快速的一键初始化代码，开发者可以快速查看、对比和回滚代码，精确发布和回滚代码，然后TGIT提供免费私有的仓库。

目前我们小程序开发者工具支持了有GS和PSP，后面我们可以支持到C++、Java和编译的发布。

融合了这种持续继承之后它的优势，可以发布前可以预编译代码，支持编译语言，支持自定义持续集成，可以部署发布前运行，就是这些，谢谢大家。