底线是能转成微信小程序,因为目前来说,因为微信先发制人,再加上微信本身的用户黏性,导致在小程序这一块大多数其他平台都难以迎头赶上,包括支付宝小程序,百度小程序,头条小程序等等。
综合我们对React语法的要求,以及对平台转化的需求,最终觉得比较合适的有两个工具/框架,分别是Alita 和 Taro
我们上面说了,Alita是将既有的React-Native项目转化为微信小程序框架的工具,那么它是不是轻轻松松就能实现一键转化呢? 其实不是的,Alita也要求你要完全遵循它的语法规则才能转化成功,否则那个文件将不会转化,这就需要对原有项目进行改造了
Taro自然也是这样了,因为它本身就是一套多端框架,也需要修改成它的代码规范才能运行
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禁止的写法,必须要进行转化
首先我们要把Alita提供的eslint插件导入项目,把不符合Alita要求的代码风格改掉,我们来看下eslint有哪些规则
注意一个问题:并不是所有有问题的代码风格alita的eslint插件都会做提示,实际上,它只会对80%的有问题的代码报出警告,所以有部分代码风格我们是要手动发现和修改的。所以我把问题分成了三类,分别按三种方式处理
A类问题
这些不符合eslint的代码是会有警告的
解决办法:逐个文件过一遍,把警告消除就好
B类问题
这些问题,eslint插件没有提示,同时根据我们的使用习惯,有可能会这样用的代码风格
解决办法:下面的大多数问题,都可以通过搜索的方式,找出问题并解决
备注:下面的“(数字)”在 参考资料中找到对应的条目,查看细节解释
C类问题
这些约束,eslint插件没有提示,但是我们一般都不会这么写,除非作死
解决办法: 发现有问题再来排查
备注:下面的“(数字)”在 参考资料中找到对应的条目,查看细节解释
Taro其实也有一个叫eslint-config-taro 的eslint插件帮助检查各种不符合Taro要求的代码风格,总结如下
改造难度从上往下递减,上面难,下面简单
P1. Animation, 原生平台组件和涉及前两者的第三方组件,这三者Taro是不支持的,需要寻找方法规避转化问题
解决思路
P2. 设计稿的单位,尺寸匹配问题等问题需要修改解决的思路
P3. RN用的样式编码方式和引用方式需要修改
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. 引用图片、音频、字体等文件的方式要改
// 引用文件
import namedPng from '../../images/path/named.png'
// 使用
<View>
<Image src={namedPng} />
</View>
P7. 部分RN样式属性值Taro是没有的,而且部分样式属性的默认值RN和Taro不一致
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/