258资源分享网

严康

资深前端工程师，负责JDReact框架前端及小程序转换引擎开发

CMO体系-商城前台产品研发部-基础平台研发部-技术平台综合组-多端融合平台组

臧国东

前端工程师，负责JDReact框架前端及小程序转换引擎开发

CMO体系-商城前台产品研发部-基础平台研发部-技术平台综合组-多端融合平台组

JDReact是CMO体系商城前台产品研发部推出的多端融合开发框架。经过不断的技术完善，目前已经在手机京东客户端累计接入 100+ 业务，稳定支撑 千万 级DAU，并对外支持 15+ 个独立APP，拥有完善的 API 和功能强大的开发 IDE 工具。

本文重点介绍了JDReact提供的小程序双向转换工具的原理及用法，通过此工具可以把已经开发的微信小程序低成本转换成JDReact应用，也支持把现有JDReact业务低成本转换成微信小程序应用，完全实现了JDReact和微信小程序生态的打通。

背景

此项目的最初灵感来源于我们团队今年5月份参加第六届黑客马拉松大赛并获得冠军的项目“微信小程序一键转换工具” ?id=771 (京东内网)

因为我们在进行项目开发时，常常会遇到以下情况：

01

场景一：已经开发微信小程序，迁移到APP

项目之初，为了更好的利用微信的流量，更加方便的推广，我们会先直接发布一个小程序，等到后来我们的用户越来越多，应用也变得越来越复杂。这个时候想要把这个应用独立出来，把客户掌握在自己手里，进一步定制应用。此时，没有其他办法，我们只能叫上Android，IOS开发人员，叫上之前的产品经理，之前的测试把之前小程序的功能再重新在原生上实现一遍。

02

场景二：已经开发APP，迁移至小程序生态

也可能，我们现在已经有了独立App，现在由于种种原因（流量的需求，运营的需要），需要发布一个小程序的版本。怎么办呢？同样我们只能叫上小程序开发人员，之前的产品经理，之前的测试在复制一个小程序的版本。

03

场景三：新业务开发，技术选型中

或者，我们现在即将开始一个新的项目，这个项目既有独立App也有小程序版本（或者可见的未来会有两个版本）。 那么我们是不是需要保持原生团队， 小程序团队，从而进行两个版本的开发呢？

如果我们可以把JDReact的应用转化为小程序，把小程序转化为JDReact应用，那么我们就可以低成本的把原来的JDReact项目/小程序项目移植到另一端了。而且新开始的项目我们就可以根据人员配置只开发一个JDReact的版本或者小程序的版本，等未来需要的时候，直接转化为对应的另一端。

由于只需要维护一端的版本，就可以大大的降低软件工程师的工作，同时产品，测试的工作量也会相应的减轻很多。另外， 我们希望转化之后的代码具有良好的可读性， 方便再次开发与修改。

效果演示

我们先用一个实际的例子来展示下转化工具的效果， 我们利用JDReact转换工具将  “值得买京东优选”的微信小程序 转化为对应的 JDReact版本 并运行在 手机京东客户端中 ；

首先看一下微信小程序版“值得买京东优选”

转化引擎将会遍历寻找小程序源代码目录中的wxml，进行转化期间会合并其对应的wxss， json， js文件。

转化完成之后，启动生成的JDReact原代码目录，运行模拟器查看效果。

以下是运行中手机京东客户端中的JDReact版“值得买京东优选”

原理介绍

不管是React应用还是小程序应用都可以表达为：ui = f(data)。并且他们提供很相似的数据更新方式，小程序是 setData(newData, cb) ， React是  setState(newState,cb) ，这两个基本条件是我们转化引擎的前提，基于此前提，转化工作理论上是可行的。

f在React里面可以简单的理解为JSX，在小程序里面可以理解为wxml。wxml是小程序提供的“静态”的书写ui的方式灵活性比较低。JSX是react提供的方式，很灵活，里面可以嵌入任何表达式，本质上就是JS。如果我们可以把JSX代码翻译为等效的wxml代码，把wxml代码翻译为等效的JSX代码，那么我们就有能力实现两种应用的转化。