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

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

摘要：相信现在你们对微信小程序都不陌生，那么小程序实现的具体原则究竟是怎样的，开发一个简单的小程序，咱们须要作哪些东西，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%点多。

相关阅读

 

爸爸去哪儿玩转黑科技：快来测测本身和老爸有多像？

研究 AI 识别同性恋竟受到死亡威胁！论文做者回应以下

人脸对齐：ASM (主动形状模型)算法

 

此文已由做者受权腾讯云技术社区发布，转载请注明原文出处

原文连接：https://cloud.tencent.com/community/article/717276?fromSource=gwzcw.631414.631414.631414