专栏首页彭湖湾的编程世界React-Native转小程序调研报告:Taro & Alita

React-Native转小程序调研报告:Taro & Alita

一. 我们的要求

期望的要求

  1. 基于React语法,将RN项目转化为小程序项目
  2. 该小程序能同时在 微信小程序 和 支付宝小程序这两个平台运行

底线要求

底线是能转成微信小程序,因为目前来说,因为微信先发制人,再加上微信本身的用户黏性,导致在小程序这一块大多数其他平台都难以迎头赶上,包括支付宝小程序,百度小程序,头条小程序等等。

二. 目前可供选择的生态,以及各自存在的问题

  1. 能将已有RN项目转化为微信小程序的工具, 比如 Alita ,但它不能转成支付宝或其他小程序
  2. 从零开发的多端框架,比如Taro(京东),chameleon(滴滴), uni-app等等,问题在于:很多框架,比如uni-app,chameleon是基于Vue语法的,无法适用我们React项目的情况
  3. 专门设计的微信小程序框架(mpvue,webpy) ,问题也是和上面类似,Vue的语法,而且只是针对微信小程序的

三. 最终的工具选择:Alita && Taro

综合我们对React语法的要求,以及对平台转化的需求,最终觉得比较合适的有两个工具/框架,分别是Alita 和 Taro

Alita介绍

  • Alita介绍:它是京东的ARES多端技术团队,开发的React Native一键转化为微信小程序的工具。不过只能转成微信小程序,不能专成支付宝小程序
  • Alita的特性: Alita不是新的框架,也没有提出新的语法规则,她只做一件事,就是把你的React Native代码运行在微信小程序端。所以Alita的侵入性很低,选用与否,并不会对你的原有React Native开发方式造成太大影响。

Taro 介绍

  • Taro介绍:它是由京东凹凸实验室开发的多端框架
  • Taro的定位:它和Alita不同,不是既有项目的转化工具,而是从零开始开发的多端框架。
  • Taro特性:使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信/百度/支付宝/字节跳动/QQ小程序、快应用、H5、React-Native 等)运行的代码。

四. Alita && Taro 的调研总结

改造成本的对比

我们上面说了,Alita是将既有的React-Native项目转化为微信小程序框架的工具,那么它是不是轻轻松松就能实现一键转化呢? 其实不是的,Alita也要求你要完全遵循它的语法规则才能转化成功,否则那个文件将不会转化,这就需要对原有项目进行改造了

Taro自然也是这样了,因为它本身就是一套多端框架,也需要修改成它的代码规范才能运行

综合对比

五. 采用 Alita 方案的改造思路

Alita可以通过运行下面命令的方式基于已有的RN项目生成一个新的小程序项目

alita -i rnProject -o wxProject

不过问题在于,必须要修改代码以符合Alita的转化条件(一开始想着能一键转化,空手套小程序的我还是太单纯了。。)

问题复现: 如果不对原有代码改造就转化会怎样?

1.根据官方案例提供的example,原本目录c下有一个文件:index.js,正确打包后如下图所示

2.我这里写入一个Alita禁止的写法: 使用as关键字

// 修改前的 good style 
import React, {Component } from 'react';
// 修改后的 bad style
import React, {Component as BadComponent} from 'react';
export default class C extends BadComponent { 

}

原本打包后c目录下原本有文件的,现在啥都没有了

3.也就是说项目中一定不能有上面所讲的Alita禁止的写法,必须要进行转化

借助eslint排查和修改不符合alita风格的代码

首先我们要把Alita提供的eslint插件导入项目,把不符合Alita要求的代码风格改掉,我们来看下eslint有哪些规则

Alita转化前代码风格修改流程

注意一个问题:并不是所有有问题的代码风格alita的eslint插件都会做提示,实际上,它只会对80%的有问题的代码报出警告,所以有部分代码风格我们是要手动发现和修改的。所以我把问题分成了三类,分别按三种方式处理

A类问题

这些不符合eslint的代码是会有警告的

解决办法:逐个文件过一遍,把警告消除就好

  • 高阶组件限制,也就是路由深度不大于5层
  • 动画组件要使用alita的
  • 静态限制
  • global变量不允许使用
  • 一个文件最多只能定义一个组件
  • React Native基本组件不支持属性展开
  • this.props.xxComponent 要写完全
  • 使用高阶组件

B类问题

这些问题,eslint插件没有提示,同时根据我们的使用习惯,有可能会这样用的代码风格

解决办法:下面的大多数问题,都可以通过搜索的方式,找出问题并解决

备注:下面的“(数字)”在 参考资料中找到对应的条目,查看细节解释

  • 路由组件需要用@areslabs/router
  • ref 必须是方法,不支持字符串
  • 不支持 onLayout 方法
  • 代码体积限制:压缩的代码小于 4M,分包 8M,大于的话就不行
  • 函数组件在定义时候没有同时导出

C类问题

这些约束,eslint插件没有提示,但是我们一般都不会这么写,除非作死

解决办法: 发现有问题再来排查

备注:下面的“(数字)”在 参考资料中找到对应的条目,查看细节解释

  • for循环中返回组件,key不指定
  • 作为props的组件进行多层级传递
  • 从外部引用JSX片段

alita自身也在不断改进它的转化限制

六. 采用 Taro 方案的改造思路

问题列表(Problem)

Taro其实也有一个叫eslint-config-taro 的eslint插件帮助检查各种不符合Taro要求的代码风格,总结如下

改造难度从上往下递减,上面难,下面简单

  • P1. Animation, 原生平台组件和第三方组件Taro是不支持的,需要寻找方法规避转化问题
  • P2. 设计稿的单位,尺寸匹配问题等问题需要修改解决的思路
  • P3. RN用的样式编码方式和引用方式需要修改
  • P4. 路由系统要修改为Taro自带的路由系统 和 API
  • P5. 网络请求要修改,fetch/Ajax 等原生的要改成Taro的Taro.request这一API
  • P6. 引用图片、音频、字体等文件的方式要改
  • P7. 部分RN样式属性值Taro是没有的,而且部分样式属性的默认值RN和Taro不一致
  • P8.因为小程序的特殊需求,导致部分代码不符合Taro的编码规范,总结如下
  • P9. aync/await的使用要通过导入taro的包来开启
  • P10.redux的使用改为 @tarojs/redux

解决思路

P1. Animation, 原生平台组件和涉及前两者的第三方组件,这三者Taro是不支持的,需要寻找方法规避转化问题

解决思路

  • 如果是小范围的改动,可以通过平台变量process.env.TARO_ENV去规避(值有 weapp/alipay/h5/rn)
  • 如果是大范围的改动,可以通过脚本后缀名差异的方式区分小程序和RN平台(xxx.weapp.js和xxx.js)

P2. 设计稿的单位,尺寸匹配问题等问题需要修改解决的思路

  • 设计稿的单位要修改, Taro似乎不支持纯数字的长度,所以要改成rem或者Px
  • 设计稿尺寸匹配问题,Taro默认是根据750的设计稿匹配的,可以在配置文件的designWidth属性中进行修改
  • 如果是行内长度样式,那么要做手动转换:Taro.pxTransform(10)

P3. RN用的样式编码方式和引用方式需要修改

  • RN是通过向style中导入对象的方式引入样式,而Taro是通过className结合import样式文件的方式引入样式
  • RN的属性命名方法是驼峰,而Taro是短横线

react-native的样式编码方式

class App extends React.Component {
  render () {
    return ()
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
    opacity: 0.6
  }
})

Taro的样式编码方式(类似传统的CSS编码方式)

// index.js
import "index.css"
class App extends React.Component {
  render () {
    return ()
  }
}
// index.css
.bar {
  height: 10Px;
  background-color:'10px'
}

P4.路由系统要修改为Taro自带的路由系统 和 API

比我们可能会选择react-navigation模块作为我们的导航工具,而我们需要改造成Taro自带的

import Taro from '@tarojs/taro'
Taro.navigateTo(params).then(...)

P5. 网络请求要修改,fetch/Ajax 等原生的要改成Taro的Taro.request这一API

import Taro from '@tarojs/taro'
 
Taro.request({
 url: 'http://localhost:8080/test',
 data: {  foo: 'foo' },
 header: { 'content-type': 'application/json' }
}).then(
 res => console.log(res.data)
)

P6. 引用图片、音频、字体等文件的方式要改

  • RN用的是<Image source={...} />和<ImageBackground source />
  • Taro用的是<Image src={...} />
// 引用文件
import namedPng from '../../images/path/named.png'
// 使用
<View>
 <Image src={namedPng} />
</View>

P7. 部分RN样式属性值Taro是没有的,而且部分样式属性的默认值RN和Taro不一致

  • 部分属性值存在差异,例如marginVertical,paddingVertical等等,RN有,但是Taro没有
  • 部分属性的默认值存在区别,在RN中,flexDirection默认是column,而在其他的平台中,flexDirection默认是row

P8.因为小程序的特殊需求,导致部分代码不符合Taro的编码规范,总结如下

因为这些坑很少会主动踩到,除非作死

(1)事件参数(props)都要以on开头

// 错误
const element = <View bindtap={this.onTag} />
// 正确
const element = <View onClick={this.onTag} />

(2)不能对this.props.children做任何操作

// 错误的两种写法
this.props.children && this.props.children
this.props.children[0]

(3)不能使用 Array#map 之外的方法操作 JSX 数组

// 错误,JSX数组不能用非Map方法,普通数组才可以
const components = [<Component />...];
components.find(component => {
  return component === <View />
})

P9. aync/await的使用要通过导入taro的包来开启

很简单,不用考虑工作量

import '@tarojs/async-await' 
// 下面就可以正常使用async/await了

P10.redux的使用改为 @tarojs/redux

API似乎没有变?应该是无需担心了

参考资料

Alita官网 https://github.com/areslabs/alita 
Taro官网 https://taro.aotu.io/ 

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • nodejs+express应用

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    sofu456
  • 最新前沿:2019 年大前端技术趋势分析

    一晃眼 2019 年已过大半,年初信誓旦旦要学习新技能的小伙伴们立的 flag 都完成的怎样了?2019 年对于大前端技术领域而言变化不算太大,目前三大技术框架...

    用户4962466
  • 聊聊nacos client的PushReceiver

    nacos-1.1.3/client/src/main/java/com/alibaba/nacos/client/naming/core/PushReceiv...

    codecraft
  • 什么是响应式流?

    本文来源:https://blog.csdn.net/get_set/article/details/79466402

    Java3y
  • 50个好用的前端框架,建议收藏!

    来源 | https://www.jianshu.com/p/182b69e54fe8

    ConardLi
  • node调试react

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    sofu456
  • React入门学习

    React 是一个起源于 Facebook 的内部项目,因为当时 Facebook 对于市场上所有的 JavaScript MVC 框架都不太满意,所以索性就自...

    我没有三颗心脏
  • 2018年度 35 个最好用 Vue 开源库

     在本文中,我们将推荐一些非常好用的 Vue 相关的开源项目。无论是开发新手还是经验丰富的老手,我们都喜欢开源软件包。对于开发者来说,如果没有这些开源软件包,很...

    用户4962466
  • React Hooks 源码解析(1):类组件、函数组件、纯组件

    React 源码版本: v16.9.0 源码注释笔记:airingursb/react 1 Class Component VS. Functional Co...

    QQ音乐前端团队
  • asp.net

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    sofu456

扫码关注云+社区

领取腾讯云代金券