写点什么

腾讯云是如何解决小程序开发难题的?

2019 年 10 月 27 日

腾讯云是如何解决小程序开发难题的?

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


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


QA

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 的话应该有蛮多方法的,如果不开放的话,你可以通过开放接口。


本文转载自公众号云加社区(ID:QcloudCommunity)。


原文链接:


https://mp.weixin.qq.com/s/vbkKhtpAsW7V9LsKHbC5XQ


2019 年 10 月 27 日 23:52436

评论

发布
暂无评论
发现更多内容

发布两小时,霸榜Github,这套笔记可以解决90%以上的Java面试

神奇小汤圆

Java 程序员 架构 面试

Nginx调试必备的几种技能

运维研习社

nginx 运维 实用技巧 5月日更

虚惊一场

IT蜗壳-Tango

5月日更

腾讯云实名认证流程

三掌柜

5月日更

从寻人到航天,科技与公益的下一个交汇点正在“星辰”中诞生

脑极体

【Flutter 专题】120 Flutter & 腾讯移动通讯 TPNS~

阿策小和尚

5月日更 Flutter 小菜 0 基础学习 Flutter Android 小菜鸟

选择排序&插入排序 - DAY 15

Qien Z.

排序算法 插入排序 5月日更

掌握学习方法,成为技术大牛

实力程序员

ThreadLocal内存溢出代码演示和原因分析!

王磊

Java 多线程

320万开发者在用的飞桨,全新发布推理部署导航图:打通AI应用最后一公里

百度大脑

人工智能 飞桨

网络攻防学习笔记 Day25

穿过生命散发芬芳

5月日更 网络攻防

微服务注册中心:Consul——概念与基础操作

程序员架构进阶

微服务 Consul 注册中心 28天写作 5月日更

“丝绸之舟”创新区块链帮扶模式

CECBC区块链专委会

区块链 丝路

5分钟速读之Rust权威指南(九)

码生笔谈

rust

聊聊数据分析

数据社

数据分析 5月日更

k8s 集群下微服务 pod 的各种指标信息监控

Damon

微服务 5月日更

签了!百度智能云携手浙江广播电视集团共推媒体数智化转型

百度大脑

媒体 百度智能云

Bzz算力挖矿系统开发节点部署

薇電13242772558

数字货币 算力

python 常用模块详解

若尘

模块 Python编程 5月日更

Go 并发编程 — 深度剖析 sync.Pool 源码级原理

奇伢云存储

并发编程 云存储 Go 语言

架构学习笔记:微服务架构与SOA架构

风翱

微服务 SOA 5月日更

Java设置Filter过滤了CSS等静态文件的问题

空城机

Java 5月日更

Dubbo 路由规则之标签路由

青年IT男

dubbo

访问控制

escray

极客时间 安全 学习笔记 5月日更 安全攻防技能30讲

华为推送踩坑记录

mengxn

把数字人民币打造成全球最佳的央行数字货币

CECBC区块链专委会

金融

Feed流系统重构-架构篇

makemyownlife

架构 RocketMQ 分库分表 ShardingJDBC redisson

redis在微服务领域的贡献

捉虫大师

redis dubbo RPC 协议 注册中心

通用连接池帮你解决资源管理难题

万俊峰Kevin

go MySQL redis mongodb pool

零信任网络架构建设及部分细节讨论(企业高管必看!)

Machine Gun

架构 网络安全 信息安全 渗透测试

密码学系列之:memory-hard函数

程序那些事

加密解密 密码学 程序那些事

腾讯云是如何解决小程序开发难题的?-InfoQ