黄荣奎：如何快速、便捷开发小程序

摘要：相信如今大家对微信小程序都不陌生，那么小程序实现的具体原则到底是怎样的，开发一个简单的小程序，我们需要做哪些东西，11月18日腾讯云技术沙龙北京站——释放技术的想象之解码腾讯云软件架构与应用，邀请到腾讯云小程序解决方案负责人黄荣奎带来的小程序云上解决方案，教你一步开始小程序开发。

黄荣奎：大家好，今天由我来跟大家讲一下小程序内部的一个框架，我们腾讯云在小程序开发过程中做了哪些事情。首先自我介绍一下我叫黄荣奎，是腾讯这些小程序解决的一个一个负责人，我们的目标是致力于提升开发者的效率，助力企业快速上云。今天讲的部分包括三个部分，第一块是小程序核心架构的剖析。第二部分是新版小程序的介绍。第三部分是小程序云上开发实践。

2016年的1月11号提出微信小程序概念，9月21号开始内测，今年的1月9号正式开放，到目前已经快一年的时间，它已经渗透到我们的各个行业。到目前为止小程序已经覆盖了200多个行业。小程序包含了很多的一些生活常见场景，比如说工具、零售、内容。工具包括一些常用的小工具还有我们生活中经常使用到的，比如说摩拜单车；零售类的像京东这类我们常用的电商平台。什么是小程序？官方的定义，是一种新的开放的能力，开发者可以快速地开发一个小程序，可以在微信内方便快捷传播，同时具有出色的使用体验。

小程序和我们传统的H5有一些区别，之前微信有推出非常火的公众号系统，它更多的是借助H5的能力实现的，小程序和H5有什么差别？首先先说它们的共同点，H5和小程序都可以在微信内快速的传播，也都是跨平台的，可以一次开发，在安卓上使用，也可以在苹果上使用。它的不同点在于小程序相对封闭，只能在微信里面使用而不能在浏览器使用。同时小程序相对H5会有更快捷的体验，它的体验会更加的类似于APP，更快一些。

小程序是如何实现的，如何能够做到高性能的运行，提供一个更好的体验？有没有思考过小程序到底是用Webview还是native？一个是开发小程序最简单的微信的小程序的一个结构，包括几个方面，包括app.js、app.json、coefig.js等等，小程序的一个程序功能都是再生package里实现的，同时会有开发过程中使用到的基础簿。这是一个最简单的，也是一个小程序的目录。它经过编译之后会变成这样样子，大家可以看到相对原来的目录里面它多了好几个文件，比如说waservice.js这个文件、WAconsloe、WAWebview，还有app-config.js、app-service.js。这几个文件到底是什么作用呢？waserviceb.js是逻辑控制的API，这个是在比如说提供给程序调用的接口还有一些基础库的使用，WAWeView就是小程序关于界面展现相关的一些作用，比如说常用的一些图片展现是怎样的，功能是怎样的，都是在这里面控制的。WAConsole是调试控台的，在开发调试的时候是一个功能的东西。接下来是app横config.js，这个是我们的一个应用配置文件，会统一打造到这里面来。app-service.js是一个业务逻辑，pape和frame是页面框架，pages是页面的样式和模板。

首先我们的WXML，也就是在应用程序里面写的模板，它会经过WXML编译，编辑之后会到page-frame里面去，WXSS在小程序开发过程中写的样式的文件，也会通过编辑编成JS到page目录下面，然后JS代码会统一放到时候app-service这部分，json文件，会统一打包放在app-config文件里去。

小程序核心框架分为三个大块，一块是视图层，也就是在整个页面的展示，一块是逻辑层，功能是什么，或者和后台的逻辑，都是在这层来做的。最重要的一部分就是它底层提供的功能，就是我们点击一下、扫描二维码，或者调取一下它的硬件相关的一些接口，或者发起网络请求，这些都是在native这层做的。

各个模块到底都是如何使用的？首先大家看到page-franme.html，其实刚刚的那个问题大概有一个了解了，小程序到底是使用webView来做的，还是使用native来做的，这里其实已经有答案了，就是使用的是webview来做的，因为它会我们的文件都编译程html，会把我们的json文件统一使用JS，包装到这里面来。刚刚有讲到过比较重要的比如说WAServic、Webview以及我们的WAConsole。Webview是涉及展现相关的，我们在开发文档中会看到组件，比如说我们的常用的展现相关的组件都是在这里面编译和实现的。Webview它包含几个重要的部分， Conpont也就是我们常用的图片，Wapi这个的话，先是包含在这里，但是不直接对外提供使用，同时它也进行这些展现相关的控制，render以及事件。当然Webview它要调用小程序原生的native方法的话就必须使用微信的这个JSBridge，通过这个来进行通信的，同时还有一些RC方法。

WAservice这里的功能和那个有一些区别，这里都是业绩逻辑相关的梳理，比如说Module的定义，然后它的一些方法，比如说APP，或者是试件都是在这里定义的。另外一个非常重要的WAservice里提供的就是微信XX.API，或者是调取二维码扫描的功能，都是通过这个接口实现的。也必须要有微信JSBridge来和微信的Native进行通信。这里也包含了相关的一些接口。

各个模块之间是如何进行通信的？首先讲一下在界面和业务逻辑之间是如何进行通信的？比如说我们点击了一个登录的操作，点击了之后会调取后台的逻辑，具体的交互过程是这样的，首先通过View也可以展现，比如说一个登录的按钮，这个时候他要发起一个登录事件的话，首先要结合第一步，message到JSBridge，JSBridge会通过Webview，然后再结合Native方法，把这个事件成列到Native里面，这上面的和下面的其实一样的，它的信息流通过Native再通过JSBCore传递到我们的JSBridge，然后再通过这个JSBridge传递给我们的service，这样我们的业务就会搜到消息，这样service接受了消息之后会进行一个处理，通知我们的View，这个时候它也是一样的，接受了消息处理完了之后会发出一个消息，给JSBridge，然后再通过我们的JSCore，到Native，就是微信小程序原生的东西。然后再通过native到View，然后把view展示的结果通过JSBridge去告诉到我们的view，然后View会做界面展示的更改。这个就是刚刚讲的视图，用户的一个点击操作，到了组件，里面指View，再到JSBridge到view和Native，然后再到service，然后在一步一步传到组件里面。

用户在调用小程序原生方法的时候，会是怎样的一个数据流呢？可以看到从我们的View，从界面的展示上，比如说用户点击了一个扫描二维码的操作，这个时候会发送一个消息到JSBridge，然后到view，然后再到Native，Native在收到消息之后，会把这些返回的结果再传递回给View，如果是我们在service中传递了这样的方法，它的信息留也是类似的。

有的时候小程序在进行一些特殊操作的时候会有一些消息通知到我们的服务，比如说微信被隐藏掉了，关闭了或者打开了，它会service发布一些ON事件，就是在这个地方分装了ON一系消息，它会从Native直接到view，然后再通过JSBridge通知到我们的View层，或者通知到我们的service。

小程序为什么比H5要呢？首先安装包的缓存，小程序和H5的最大的区别是所需要的资源都下载下来，但是这个不能超过2兆，这是微信的限制，这样它会稍微快一些。第二个它可以预加载多个WebView，这个时候就是说当我从A传到B点的时候，我并不是马上去重新申请一个view，而是把view展现出来，当然这里的数量是有限制的，所以业务的层级最好不要超过5个。第三个同时它还做了页面加载的优化，整体来看小程序会比H5更快一些。

再跟大家介绍一下小程序需要准备些什么东西。前面的展现只是很少的一部分，真正复杂的是我们后台的相关的服务，比如说我们要去买一个域名，还必须申请一个证书，因小程序只是在安全的请求，同时要弄一台自己的服务器，数据库，还要完成发布一些东西。存在的问题，就是部署耗时、后台代码部署不方便、开发调试不直观、花更多的时间在框架上而不是直接开发自己的业务逻辑。

针对这些问题，如何能让开发者更加快捷地开发小程序，我们和微信联合做了一个解决的方案。在右上角可以看到有一个腾讯的标识，在这里可以完成一些更加快捷方便的操作。一键自动配置可运行后台的环境。第二个是后台代码编写。第三是一键上传代码自动部署，第四远程调试。

首先一键部署后台环境，用户开通了一个腾讯帐号之后，会自动帮用户分配一个域名、证书，同时会分配临时使用的一台服务器给用户，还包括数据库，以及相关的Demo都在这里，用户可以点击上传这一系列的东西都是自动生成的。这里分配的东西其实包含很多，首先域名为了安全其实引入了云监控和8GP高防，在后台会帮用户申请域名，分配一个临时用的域名，通过负载均衡连接到后台的服务器，同时也会帮用户申请一个HTTPS的证书，把这些东西都部署好。当然在后台业务服务器的基础上还有更多的一些服务，比如说图像识别、CDN、声音识别，基于腾讯的Pass服务的能力都可以在这里使用。

客户端后台代码的编写，大家如果有小程序开发经验的人可以知道，原来在客户端只能编写前端的代码，但是在新工具改版了之后这里可以看到有两个底层的目录，一个是Client，一个是server。Client就是原来的小程序，就是说展现相关的东西，一些前台交互相关的东西。server就是后台代码的目录，目前我们支持两种语言，一种是note js，一种是kfp，在里可以直接进行代码的编写。编写之后在这里可以点击上传测试代码，就可以一键把自己编写的代码上传到服务器。

其实这里可以很快的设置一个部署的过程，可以很快的完成代码的部署，以及服务的重启，对应的小程序这里就可以体现到对应的功能了。另外一个问题就是调试，之前调试通常都是在后台的服务器上进行打LOG，通过看日志的方式，在微信这边对notejs做了一个优化，可以使用远程调试的功能，只要点击启动调试，在前端如果有后台过来，比如说这里点登录这里再调试的话就可以看到它断点到这里来了，在这里有过开发经验的人都可以知道，在这里可以进行变量察看以及断点的设置，以及环境变量的更改，可以方便地进行后台代码的调试。

同时一个基本的Demo，把后台基本的能力进行了分装，分到这里就形成了小程序的解决开发方案，包括一些基本的功能也包括一些高级的功能，其中最基本的包括登录、图片上传、数据库操作这些基本的，比较复杂的包括信道服务、图片识别，后面的话还有的音频识别、语音识别等等，所有的代码都可以在这上面，它是一个开源的项目。

在云上小程序还有哪些能力？这些是分装的比较高级的实用的接口，其中包括Websocket服务，图片鉴黄、语音识别，还有刚刚提到过的有视频还有直播相关的一些东西，其实在这里都可以找到解决方案的。首先讲一下Websocket，是一个外部端的长连接的服务，它主要用于一些实时的场景，比如说游戏，比如说实时的场景，还有一些其他的实时的服务，对时间要求比较高的。如果是自己搭建这个Websocket的话，就会存在一些问题及长时间占用服务器资源，各种异常情况需要考虑、断线重连、异常网络，缺乏统计数据，对连接的服务使用情况，调试不方便。针对这个我们推出了这样的一个Websocket服务的能力给到大家。

小程序如果是自己搭建的话它只存在小程序和用户服务器之间这样的一个双向的通道，但是用了我们的Pass服务能力的之后，它连接的链路就变了，就变成从小程序和服务器进行长连接的话，它首先要向业务服务器请求一个长连接的地址，提供了滞后小程序后面的连接就和信道服务建立了一个长期的连接，中间所有的数据交互和消息的发布都是通过信道服务和业务服务器之间进行中转，也就是业务服务器不需要和小程序直接连接，只需要处理从信道服务从这里发来的程序就可以了。

另外一些比较高级的应用，比如图像识别OCR，这是腾讯云提供的一个服务能力，也可以提升到SDK里面去了。目前的腾讯AI图像识别已经在很多的业务中使用到了，准确率达到99%点多。

讲师视频： 黄荣奎：如何快速、便捷开发小程序