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

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

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

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

今年能够说是小程序的元年，各种游戏、店商、旅游类的小程序如雨后春笋般涌现，我想在座的朋友你们或多或少都使用太小程序，那么一款火爆的小程序是如何开发出来的呢？今天咱们邀请了来自腾讯云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和编译的发布。

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

Q/A：

Q：刚才说的发布的时候有生产和开发，我本身配置须要两台服务器吗？一个是开发一个是生产。

A：这个不须要你本身手动去作，你只须要绑定腾讯云和小程序的帐号就能够了，这个服务器是免费生成的。

Q：这个服务器咱们不须要要费用吗？

A：目前开发是免费的，生产环境可能最近是收费的，以前是免费的。

Q：我能够选用其余的服务商去提供的服务器嘛？

A：能够须要自行部署，咱们会在后面的运营、发布的话，容许用户本身去部署服务器。

Q：我若是要用小程序得多个接服务的时候，我能够有一台服务器吗？那个服务器能够支持多各小程序吗？

A：能够，须要本身在代码上作一些兼容。

Q：我们如今有方便的示例或者SDK之类的？

A：暂时尚未。

Q：如今就须要本身去调整代码逻辑？

A：OK，没错。

Q：你好，IOS版本的小程序跟安卓小程序，它的开发语言的话是同样吗？

A：目前小程序它实际上是跨平台的，也就是说写个代码的话只是一份，它能够同时兼容IOS和安卓平台，它的语言是nodejs这些是更加偏向于前端的开发。

Q：问一个万象优图的问题，刚才你讲能够识别身份证，能不能识别咱们自定义的一些，就是打印出来的病例是否能够识别？

A：目前它有印刷体识别，身份证识别只是其中一个，我能够帮你联系一下优图的同事，有没有这个能力。

Q：我们OCR进行身份证识别的时候，是直接把图片上传的吗？

A：是，直接上传上来，给一个连接地址，接口就能够识别到了。

Q：以前我有尝试到AI，须要把图片转成，就是了解了一下内部小程序是能够这样转的，社区里有人说没有实现这个功能，大家之后会有对这个功能进行对外开放吗？

A：转成64的话应该有蛮多方法的，若是不开放的话，你能够经过开放接口。

问答

短视频能够经过什么技术接入小程序？

相关阅读

微信小程序，开发大起底

刘翌：如何利用小程序技术解决企业销售难题

李明：微信小游戏技术分享

此文已由做者受权腾讯云+社区发布，原文连接：https://cloud.tencent.com/developer/article/1084417?fromSource=waitui