去哪儿网跨端小程序开发实践谈

在 ArchSummit 深圳 2019 大会上，钟钦成（司徒正美）讲师做了《去哪儿网跨端小程序开发实践谈》主题演讲，主要内容如下。

演讲简介：

两年前，微信小程序横空出世，及小米直达号联合其他手机商摇身一变，推出快应用，在这个互联网寒冬中，去哪儿网敏锐抓住机会，迅速推出去哪儿微信小程序与快应用，以一套代码加语法宏的方式进行开发， 取得不俗的收益，日收入百万级别。

一年前，其他小程序也冒出来了，显然这意味新的商业机会，但旧的开发方式已经无法进行下去 (宏里面太多分支)，因此去哪儿网开发了自己的转译框架 nanachi，实现一套代码运行于 N 个平台（微信，QQ 轻应用，头条，抖音，钉钉 E 应用，支付宝，百度，快应用，H5）。

本次分享介绍研发心得，大家耳熟能详的转译部分（babel 的 API 的调用）会略过，但会展示更加有用的信息，及在框架无法 hold 住的情况下处理措施。

演讲提纲：

1、框架的研发细节

• React 代码如何转换成小程序的代码
• React 组件实例如何匹配相同页面上相同位置的小程序实例，实现数据的同步与视图的刷新
• API 的兼容与 Promise 化
• 针对个别平台的标签差异开发出补丁组件，在编译阶段无感支持这种标签
• 样式单位的转译
• 对事件进行统一委托，解决传参与 bind(this) 与数据上传

2、框架外的技术文案（需要开发人员手动添加额外代码，或进行某方面的约束）

• 针对平台的限制或体积的限制，需要将某个页面或频道放到 webview 中，开发出智能 webview 方案
• iconfont 的跨平台处理
• 根据不同平台打包业务代码
• 拆库开发，方便多条业务线同时开发
• 通过与各大公司的技术人员洽谈，协商加入某些 API，减轻兼容难度
• 如何设计跨端的目录结构
• 快应用的兼容问题

听众受益：

1、对项目负责人来说，了解一下各种小程序的收益情况（微信 > 快应用 > 支付宝 > 百度），了解兼容难度，市面上有各种号称非常不错的转译框架，其实只能解决 60% 的问题，于是才有了各种补丁方案，如何在框架无能为力的情况进行自救。从项目实施来讲，我的建议有三点：

• 必须有 backup 方案
• 如果决定上线，必须提前研发，不一定等到推广费到位，因为坑多
• 加强与大公司技术人员的沟通

2、对开发者，可以了解到众多平台的差异与相应的解决方案。

讲师介绍：

钟钦成（司徒正美）

去哪儿 架构师

网名司徒正美，拥有 11 年纯前端经验，涉猎多种语言与设计模式，精通 DOM 与 JS 各种黑魔法，精通选择器引擎、模块加载器、MVVM。著有《JavaScript 框架设计》一书，去哪儿网平台事业部前端架构师，人民出版社 Web+DB Press 中文版编委会编委！

开发过选择器引擎，前端模板，富文本选择器，甘特图 H5，多套 UI 库。主要开源项目有：mass、avalon、anujs、jsx-parser、fetch-polyfill、nanachi 多端小程序转译框架。

完整演讲 PPT 下载链接：

https://archsummit.infoq.cn/2019/shenzhen/schedule