微信号:frontshow

介绍:关注前端发展,分享一线技术.不断学习,不断进步,登上前端之巅!

王跃:关于微信小程序的技术,也许你想错了

2017-10-13 16:44 徐川

2017 年 1 月 9 日,微信小程序正式发布。在近一年里,不管外界评价如何,小程序一直在坚定的向前走。同时它的理念和模式受到广泛认可,也被其它公司所模仿。

在微信小程序尚在内测之时,外界对它所采用的技术就有很多猜测,正式发布的小程序解答了人们的一些疑惑,但有些问题官方并未正式对外公开说过。在即将于 10 月 17 日举办的 QCon 上海 2017 大会上, 微信小程序相关项目负责人王跃将向大家分享小程序的核心架构及实战案例,我们也对他进行了采访,提前了解了一些我们关心的问题。

受访嘉宾介绍

王跃(微信号:springwang),微信小程序相关项目负责人,拥有 10+ 年前端开发经验,曾就职于搜狐和新浪,2013 年加入腾讯,负责互娱游戏营销系统,道聚城等多个项目前端架构和开发。对小程序底层架构原理有深入的研究和理解,并且有腾讯多款小程序开发实战经验。

Q:王老师好,您在负责小程序前端之前,做过哪些事情?

王跃:在微信小程序项目之前,我负责过腾讯互娱游戏高级营销系统的前端架构和开发,它承载腾讯几百款游戏业务的日常营销活动,另外还有腾讯道聚城前端架构和开发,覆盖像王者荣耀,LOL,CF 游戏道具的交易,在腾讯之前我还负责过搜狐白社会 SNS 的前端核心框架和模块开发,新浪微博的前端开发工作。

Q:当时小程序还没发布时,坊间传说小程序使用了类似 RN 的技术,发布后人们发现它还是运行在 WebView 里的,不知道实际情况如何?

王跃:从技术实现的层面来说,不管是小程序,还是 RN,或者 Weex,都有共同点,比如 JS 和 Native 的通讯机制,比如 JS 直接调用原生组件的渲染,如在 iOS 平台,小程序和 RN 都采用 JavaScriptCore 来执行 JS。但是小程序和 RN 设计初衷和应对的场景不一样,我们知道小程序的场景主要是在当前实际物理场景用户可以即扫即用,用完即走,整个交互都是非常轻量级的,不涉及特别复杂的交互逻辑,所以在设计上考虑尽量简单,首先是系统底层框架简单,其次开发者开发简单,再次用户使用简单,所以小程序大部分的 UI 组件还是 H5 的渲染方式,而不是像 RN 设计成 Native 的 UI 组件。

当然小程序本身为了解决部分组件性能的问题也采用了 Native 的方式,所以方案上的选项主要是基于实际场景考虑,不是纯技术上的考量。

另外准确的说小程序不仅仅运行在 Webview 里,需要区分不同的部分,这个在我的分享里会有详细的解释。

Q:在 Android 上小程序是运行在 X5 引擎上的,X5 团队有为小程序做一些特别的优化,或者添加特性吗?

王跃:微信Android版的浏览服务用的确实是我们腾讯浏览器团队提供的X5引擎,在性能方面小程序和X5团队之间一直有保持沟通和协调,双方都尽可能设法优化并持续提升用户体验。

Q:刚发布时有人发现小程序的一些代码和 Vue 的有点像,而单向数据流又让人联想到 React,在当初开发小程序核心框架的时候有哪些思考?

王跃:这个跟问题 2 类似,首先小程序和 Vue,React 本质上还是不一样的,小程序是需要特定的 Native 层支持,同时底层功能也更强大,而 Vue 和 React 运行在通用的 WebView 之上,不需要特定 Native 支持,但大家为什么觉得会有些类似呢,主要是指在数据绑定,事件绑定等部分的实现上会有一些类似,当然这几种技术没有好坏,主要还是看我们是解决什么场景下的什么问题。

Q:iOS 和 Android 平台的小程序有一些区别,比如 Android 上可以把小程序图标放到主屏,还有人发现微信小程序在 Android 下有单独的进程,小程序是不是对 Android 进行过更多 Native 化的探索?

王跃:Android 可以放到主屏幕而 iOS 不行这个主要是 OS 层面的限制,至于 Android 下的运行方式,主要是通过单独的 Activity 来承载视图,设置为单独的进程主要是为了保证小程序的运行内存,跟 Native 化没有直接的联系。

前面问题也提到了,小程序本身已经有好几个组件是使用 Native 方式实现的,主要目的还是为了保证小程序的执行效率,达到更好的用户体验,Native 的组件也不是针对 Android 一个平台,Android 和 iOS 都有做,后续是否会有更多的 Native 化的实现,还是看实际组件在采用 Web 实现时是否符合我们对用户体验的标准。

Q:前段时间有人发现小程序出了自己的脚本格式 WXS,它是小程序新的 DSL 吗?

王跃:目前,WXS对于小程序开发不是必须的,它的主要目的是为了增强WXML的数据处理能力而新引入一种技术实现,其实际解析的语言规范还是JS,并没有引入新的语法,仅仅对JS做了上层的封装和限制,所以学习上基本没什么成本,大致了解下开发文档马上就能上手,这里WXS跟DSL也没太大关系,没有可对比性。

Q:小程序和 PWA 可以说代表着移动 Web 的两条不同的发展路线,从旁人的眼光来看,小程序更加务实,但人们也期待小程序更加开放一些。在这方面您是怎么看的?

王跃:这里我说下个人的想法,不代表官方意见,任何一种模式都是为了在特定环境下解决特定问题而设计的,所以 PWA 有它的应用场景,而小程序有小程序的应用场景,两种模式都有其优势和限制,这两种模式的差异其实跟我们现在的 Web 和 Native 很像,Web 提供相对常用和通用的功能(大部分功能和基本使用体验),而个性定制(更流程复杂的功能和交互体验)可以充分发挥当前平台的能力,我个人觉得这两种模式都会一直存在,关键是看能否为用户提供价值,不过,未来这两种模式一定会有越来越多的融合,就像 web 和 Native 的融合产生了 Hybird 模式一样,想象一下,未来一定会有一种新的模式,可以像 PWA 一样具有更通用的运行场景(提供核心功能),同时又可以根据当前的运行环境接入定制化的高级能力,实现 Write Once,Run Anywhere 的美好愿景。


前端之巅

「前端之巅」是 InfoQ 旗下关注前端技术的垂直社群,加入前端之巅学习群请关注「前端之巅」公众号后回复“加群”。投稿请发邮件到 editors@cn.infoq.com,注明“前端之巅投稿”。

活动推荐:

Google 如何用 AI 造聊天机器人?Pinterest 如何用机器学习获得两亿活跃用户?10 月 QCon 上海站,还有来自 Uber、Paypal、LinkedIn、Airbnb 等顶尖技术专家前来分享前沿实践经验。

QCon 报名即将结束,识别下方二维码或点击【阅读原文】与 100+ 国内外技术大咖零距离,如有问题欢迎联系票务经理 Hanna ,电话:15110019061,微信:qcon-0410。

 
前端之巅 更多文章 访谈:Bustle的GraphQL实践 QQ空间在生产环境使用QUIC协议的经验 前端每周清单加量版:Vue 3.0展望、React代码迁移 Facebook发布了React 16 前端每周清单:React开源协议更新、JS完整编年史
猜您喜欢 云聚创新共铸未来——IBM大中华区云计算合作伙伴峰会 【▣】疯狂GIF:这才是催眠大师! 如何线程安全的使用 HashMap 流量加密奈我何? 关注抑郁症,QQ上线“诱导自杀自残”举报功能