专栏首页京东技术跨端移动应用开发解决方案 | ARES小程序转换工具1.0 正式发布

跨端移动应用开发解决方案 | ARES小程序转换工具1.0 正式发布

导 语

ARES是商城技术与数据中台推出的跨端移动应用开发解决方案,包括五大产品板块:ARES Engines、ARES Websits、ARES Studio、ARES Store、ARES Console。经过不断的技术完善,目前已经在手机京东客户端累计接入150+业务,稳定支撑千万级DAU,并对外支持20+个独立APP,拥有完善的API和功能强大的开发IDE工具。

ARES小程序转换工具用来打通ARESEngines和微信小程序生态,它包含两个部分,一部分是我们之前已经发布的小程序转JDReact工具,另一部分就是本次隆重推出的JDReact转微信小程序工具,通过这两部分我们就可以完全实现ARES引擎和微信小程序的互通。

样例展示

1、APIDemoes

2、实际业务

下面是前端组件部的通用交易组件项目,包含个人中心、订单、商详、购物车、结算,可快速组合接入不同的APP,项目同时具有原生、RN端、h5、小程序端,详情请查看链接(http://docs.api.jd.com/),其中小程序端就是由本引擎转化而来。

▲我的京东

▲订单业务

使用方式

1、命令行

可以通过安装@jdreact/to-mp-engine直接使用

npm install-g@jdreact/to-mp-engine

JDReactAPIDemos为例:

jdreact-rntomp -i jdreact-jsbundle-JDReactAPIDemos/jsbundles/JDReactAPIDemos -o JDReactAPIDemosWP

这样就会在当前目录生成一个JDReactAPIDemosWP目录,也就是小程序的源码目录。

jdreact-rntomp命令有三个参数:

  • -v 打印jdreact-rntomp 版本
  • -i React Native 源代码目录
  • -o 转化生成的小程序源代码目录

2、ARES IDE

ARES小程序转换工具将会集成在最新的ARES IDE中,大家就可以不用命令行, 而是以可视化的方式方便的使用转化引擎了。

原理简介

首先:微信小程序是什么?

关于这个问题,大家可以直接查看微信小程序官方文档:

https://developers.weixin.qq.com/miniprogram/dev/

这里简单总结一下:

  • 数据驱动UI = f(data)
  • 无法直接操作节点,模版结构必须预先在wxml文件定义好
  • 变量绑定不能是函数调用

小程序实现了一套框架,并给出了很多规则,限制开发者必须以一种“静态”的方式组织代码。

那么,React Native是怎样的呢?React Native使用的是JSX来组织UI,由于JSX本质上是JS,所以React很自由动态,它就是代码,最终运行时会给你结果。

从“静态”到“动态”相对简单,之前我们发布过一个工具:

http://npm.m.jd.com/package/@jdreact/to-jdreact-engine,就是把小程序的代码转化为React Native。

那么如何把“动态”的React Native代码转化为“静态”的小程序代码呢?

AST操纵代码

先解决一个前置问题:我们必须能够理解代码语义进而能够“操纵代码”。想想看,由于变量绑定方式的不同,至少我们需要把 React Native的 <Text>{txt}</Text>转化为小程序的<text>{{txt}}</text>。,因为小程序的变量绑定形式是双大括号。

AST(抽象语法树)是源代码的抽象语法结构的树状表现形式,我们通过修改AST结构使之符合我们预期,然后根据修改之后的AST结构重新生成代码。比如,我们需要把var a=1,这句代码修改为const x='你好'。首先我们先看下这句代码的AST结构:

修改这个AST结构,比如把上面的结构改为:

重新生成代码就变成了const x='你好'

总的来说,通过AST这个工具,我们可以理解源代码语义,并且具有了修改源代码生产新代码的能力。

那么当我们遇到这样的React Native代码时

可以通过AST修改代码,变成index.wxml

React运行时

回到我们一开始提出的“动态”与“静态”的问题。

比如这样的React Native代码:

这里的xthis.f()这个函数的返回值。但是这个函数具体返回什么呢?这个需要在运行时才能够确定下来。可能是JSX结构<Text>1</Text>也可能就是null。显然这里对这个x到底怎么处理,AST是没有办法的。AST本质也是“静态”分析代码,不是它不够强大,而是有些信息只有在代码运行时才能获取到。那么如何转化这种情况,让其在小程序上同样正常呢,也就是之前的问题:如何把相对“动态”的React Native代码转化为小程序代码呢?

只有一种方式就是让React代码跑在小程序环境,这样所有的运行时信息也就能够处理呢。而我们之前也提到了JSX本质上就是JS,而小程序就是运行在浏览器的, 需要再这个小程序环境上让React跑起来。所以,我们在小程序上实现了一套React 运行时,它是一个mini-react,总的思想设计思想基于React,又适配了小程序。

首先,我们知道JSX语法本身是不被浏览器识别的,直接在小程序里面写JSX语法那肯定就是语法错误了。所以第一步需要把所有的JSX会被转化JS(基于babel现有插件)。

然后就像React一样,这里有一个Render入口函数,负责去构造整个React环境, 包括实例对象,context,ref等等,还记得之前说“小程序的组件属性不能是方法”这个限制了吗?这里也是不存在的,因为所有的属性传递都在React这一层进行。同时需要在调用setState的时候,重新构建这样的环境,这里面会涉及到 state 合并,组件声明周期,实例复用,context计算等等。与React是一样的,通过这样的一个过程把小程序渲染需要的数据都准备好。

最后一步:把运行时结果更新到页面上,刚才我们说了React执行环境会准备好所有小程序渲染需要的数据。这些数据最终会交个对应的小程序组件实例,然后小程序调用自己的setData方法,把数据更新到页面上。

大家可以简单的理解为:React Native在小程序上运行,一切以React的方式进行,只是最后实际更新UI的时候,是交个了小程序实例来更新。

这里有一个Instance manager模块,这个模块是小程序实例和React实例交互的关键。小程序环境和React环境在构建的过程中都会和这个模块交互,每当有新的实例生成时,都会向这个模块注册。同时实例销毁的时候,也会通知这个模块移除这个实例。它打通了React环境和小程序环境,使之可以双向交互。

组件/API对齐

接着上面的过程,假设是这样的一个页面:

当我们React Native‘运行’结束,把数据交给小程序更新UI的时候,小程序这里也必须存在一个‘FlatList’实例去接受这份数据。所以在小程序上我们需要预先把FlatList,ScrollView等这些组件实现一下,实际上由于差异的存在,即使时View, Text,Button这些基本组件,在小程序上也有对应的组件存在。

另外,正如之前APIDemos演示的一样,常用的JDReact的组件也是有对应的小程序版本的。

最后,如果你有自己的组件库,我们会提供很方便的扩展机制,那么就不仅仅是JDReact应用可以转化为小程序了,你自己的React Native应用也是可以无损转化了。

第三方库集成

对于第三方库这里以redux和react-redux这两个库来说明。这两个库分别代表了两个类型的库,redux与React毫无关系,就是一个数据管理库。而react-redux其实是通过高阶组件的方式对React组件进行扩展,是和React紧密相关的。

对于redux这种于React运行无关的库,直接就可以集成到小程序。

对于react-redux我们需要解决的是怎么在我们的mini-react上创建高阶组件。前文已经说明在React运行时和小程序运行时之间有个 InstanceManager 管理实例之间的关系,高阶组件本身也会生成一个React实例,需要把高阶组件的这个实例通过InstanceManager管理起来,我们提供了一个很方便的HocComponent方便大家创建高阶组件。react-redux就是基于这个组件实现的。

经典的TodoList:

美好的世界,总有遗憾

话说回来,由于小程序和React Native两个平台还是有很多差异无法抹平,有些使用上的限制必须提前说明。

对于这些差异,你可以使用平台判断的方式针对不同平台做不同处理,当Platform.OS === 'wx'时表明是小程序平台,某些情况可以通过这个平台判断做相关处理。

1、路由

第一个差异点是路由系统。小程序的路由是内置的,而对React Native来说路由本身也就是一个组件,没有什么特殊的,而且Facebook官方也没有提供一个靠谱的实现。这里我们提供了一个路由组件@areslabs/wx-navigator来抹平差异。

在React Native端它基于社区的react-navigation,转化为小程序之后则直接使用小程序的内置路由。

这个路由组件简单易用,具备了大部分你需要的功能。

2、动画

第二个差异点时动画,相比与React Native来说,小程序的动画能力相对较弱,完全把RN的动画转化为小程序的是不可能的,这是平台限制。但是动画能力是一个app必不可少的能力,所以我们提供了一套RN的动画API@areslabs/wx-animated

这套API基本参考了小程序的动画API,可以直接查看小程序的动画文档:

https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/wx.createAnimation.html

3、转化其他限制

  • 转化之后的代码最终是跑在小程序引擎上,必须符合小程序的规范,比如最终压缩的代码小于2m,路由深度不大于5层等
  • 只支持ES6模块文件系统,也就是只支持import/export,不支持require。不过,require图片是可以的。
  • 一个文件最多只能有一个组件,不管是class组件还是函数式组件。原因是这样的:在小程序端一个组件对应4个文件,如果在React Native的一个文件中写了多个组件(n),那么小程序端将会出现4n个文件,对于这些文件如何命名才能让开发者方便的二次修改呢?而且函数式组件的识别就是一个问题。这里为了避免混乱,这里要求一个文件最多只能有一个组件,而且我们认为这是一个好习惯
  • 基本组件的属性展开不支持,比如<View {...x}/>这样是不支持的。但是自定义组件是OK的,比如A是一个自定义组件,那么可以<A {...x}/>
  • ref必须是方法,不支持字符串
  • 不支持onLayout方法,在浏览器环境好像没有支持的途径
  • 自定义组件属性类型是React Element或者方法返回React Element,属性名必须是 xxComponet。类似 FlatList 的ListHeaderComponent,ListFooterComponent等
  • 在React Native里面,使用map方法返回组件数组是很常见的操作,比如

在React Native中,如果Text没有指定key,将会报警告。但是转化引擎要求这里的key是必须传递的。 同样 FlatList,SectionList的key/keyExtractor 也是必须指定的,如果不指定,我们不会好心的用index代替,而是直接报错。

  • 怎么判断一个函数是不是组件声明呢?我们对定义方式有要求:函数式组件必须在定义的时候导出,例如:
  • 不支持外部JSX方法,可以用函数式组件,具体是指:

需要改写为:

最后

希望给大家提供一个方便好用的工具,也希望大家可以积极给我们反馈,工具的完善离不开大家的反馈。感谢前期试用的同学,给我们提了很多建议和BUG。

商务合作:liujiaxu@jd.com

本文分享自微信公众号 - 京东技术(jingdongjishu)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-12-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序开发效率提升神兽:京东Taro诞生记

    自 2017-1-9 微信小程序(以下简称小程序)诞生以来,就伴随着赞誉与争议不断。从发布上线时的不被大多数人看好,到如今的逐渐火热,甚至说是如日中天也不为过,...

    京东技术
  • 【详解】Android Jetpack 新组件之Navigation的用法和源码结构分析

    5年以上开发经验,对架构设计以及性能调优有着深刻认知,负责京东商城商品详情的开发,热衷于学习和创新。

    京东技术
  • 对话京东CTO:想吸引一流的人才,就要给他一流的挑战

    “人才在哪里,企业就去哪里”。作为尖端技术人才聚集地的硅谷,近年来吸引了中国多家互联网巨头前来设点“抢人”,京东便是其中之一。上周日在硅谷举行的PingWest...

    京东技术
  • React 16 Roadmap

    其中,Concurrent Mode(之前叫Async Rendering)无疑是最值得期待的东西,或将引领变革(合作式调度机制可能泛化成为浏览器能力)

    ayqy贾杰
  • Android WebView调用本地相册的方法

    本文实例为大家分享了Android WebView调用本地相册的具体实现方法,供大家参考,具体内容如下

    砸漏
  • NAS 太难了,搜索结果堪比随机采样!华为ICLR 2020论文给出 6 条建议

    论文链接:https://openreview.net/forum?id=HygrdpVKvr

    AI科技评论
  • Kaggle首战斩获第三,看深度学习菜鸟团队如何一鸣惊人

    Women in Data Science 与合作伙伴共同发起了 WiDS 数据马拉松竞赛(WiDS datathon)。赛题是创建一个能够预测卫星图像上油棕种...

    机器之心
  • 5种常用的交叉验证技术,保证评估模型的稳定性

    你有没有想过是什么原因导致了这些排名的高差异?换句话说,为什么一个模型在私有排行榜上评估时会失去稳定性?

    deephub
  • Flutter已经出世这么久了,原生开发者们是否应该有危机感?

    如果说,最早出现的会“威胁”到原生开发的跨平台方案,还不是Flutter。早在2015年Facebook推出React-Native框架时,就已经出现“reac...

    Android扫地僧
  • 斯诺登教授(Dave Snowden)帮助企业进行决策的“栖息地”(Cynefin)框架 v0.1

    译自斯诺登教授(Dave Snowden)2018年11月30日在领域驱动设计中国峰会2018的“栖息地”(Cynefin)框架培训材料。

    吾真本

扫码关注云+社区

领取腾讯云代金券