专栏首页京东技术跨端移动应用开发解决方案 | 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 条评论
登录 后参与评论

推荐阅读

  • 如何将设计思维应用到精益初创公司的软件开发

    我们所说的设计思维,是指由 IDEO 公司的 Tim Brown 提出,并且正在改变全世界组织的设计思维,简称 DT。(译者注:IDDO,当代最具影响力的设计公司之一)

    Aceyclee
    Serverless无服务器云函数
  • InnoDB 事务加锁分析

    一般大家对数据库事务的了解可能停留在事务的ACID特性以及事务4种不同的隔离级别层面上,而对于事务 4 种不同隔离级别如何实现了解相对较少。

    2020labs小助手
    MySQLSQL数据库MVCMVCC
  • FutureTask 核心源码解析

    研究源码,一般我们都从整体以及实例先入手,再研究细节,不至于一开始就“深陷其中而"当局者迷".

    JavaEdge
    HTTPJava
  • 200行代码落地人脸识别开锁应用

    2019年国庆,帮朋友实现了一个人脸识别进行开锁的功能,用在他的真人实景游戏业务中。几个月来运行稳定,体验良好,借着这个春节宅家的时间,整理一下这个应用的实现过程。

    高树磊
    人脸识别图像处理
  • 滑动验证码攻防对抗

        在业务安全领域,滑动验证码已经是国内继,传统字符型验证码之后的标配。众所周知,打码平台和机器学习这两种绕过验证码的方式,已经是攻击者很主流的思路,不再阐述。冷渗透介绍的是一个冷门的绕过思路和防御方案。这些积累,均来自于实战之中,希望有用。

    周俊辉
    HTTP网络安全安全网站
  • 程序员进阶必读,万字总结Mysql优化精华篇

    price decimal(8,2)有2位小数的定点数,定点数支持很大的数(甚至是超过int,bigint存储范围的数)

    程序员内点事
    全文检索缓存SQL数据库Python
  • 运维转型 | 运维人不再只是“救火英雄”

    各行各业都开启了数字化转型的进程,运维团队在这种时代的浪潮中又该何去何从?我在帮助一些企业落地了运维技术平台之后,开始反思这个问题,并将所思所想整理成本篇文章。

    嘉为科技
    企业运维自动化云计算
  • WEB开发常见的安全漏洞和解决思路

    SQL注入时web开发中最常见也是危害性最大的安全漏洞,SQL注入攻击可能会导致 服务器故障,数据泄漏,数据被恶意删除等等严重后果。

    windwei
    SQLHTTPhttps安全漏洞PHP
  • 详解Winograd变换矩阵生成原理

    文本首发知乎:https://zhuanlan.zhihu.com/p/87516875

    Ldpe2G
    编程算法
  • Linux网络性能优化相关策略

    1. rx-checksumming:校验接收报文的checksum。

    glinuxer
    Linux

扫码关注云+社区

领取腾讯云代金券