ReactNative转微信小程序工具 Alita发布 V2.4

Alita是一款把ReactNative运行在小程序平台的转化工具，他的侵入性很低，所以选用与否并不会对你的原有ReactNative开发方式造成太大影响。配合上react-native-web可以把ReactNative应用运行在IOS， Android，H5，微信小程序4端。

针对小程序平台，Alita还提供了很多方便的功能。例如，方便分析小程序包大小的analyzer指令，一键自动小程序分包，完善小程序npm能力等等。

V2.4版本主要提供了对小程序内置组件，自定义组件的支持。小程序本身提供了丰富的组件video，map，picker等等，而且社区也有许多强大的小程序组件库。完全用ReactNative生态去对齐映射这些组件是不太现实的，所以V2.4版本提供了对这些组件的直接使用，这样开发者就可以借助平台判断，根据平台的不同渲染出不同平台的原生组件。

下面我们具体看一下

平台判断

首先，无论是对小程序内置组件还是对小程序自定义组件的使用，都是只会在小程序平台生效，所以需要平台判断，和ReactNative一样，一般有两种方式： 文件内判断和建立平台文件

• 文件内判断：

  if (Platoform.OS === 'wx') {
          return <view>Hello wx</view>  // <-- 直接使用小程序组件
  } else {
       return <View><Text>Hello ReactNative</Text></View>  // <-- 使用RN组件
  }
  

• 建立平台文件：建立单独的小程序.wx后缀文件，比如你有一个3端的地图组件，那么你可能会有3个文件： Map.ios.js Map.android.js Map.wx.js

使用JSX构建UI

下面我们来看下JSX构建UI和小程序wxml方式有什么不同。如果开发过React应用，将会对下面的使用方式非常熟悉。

属性绑定

JSX的绑定数据是通过JSX表达式来完成的，JSX表达式包含在{}内。

以小程序button为例

<button
    type="primary"
    size={this.state.size}
    bindtap={() => {
        console.log('我被点击了！')
    }}
>
    点击我
</button>

注意这里的size，bindtap的属性绑定。 size由组件的state控制，所以size={this.state.size}， 你可以通过this.setState({size: xx})， 来修改这里button组件的大小；而bindtap是组件点击的事件回调，所以需要传递一个方法。

条件/数组渲染

在小程序开发方式里面有 条件渲染wx:if，数组渲染wx:for的概念，这些在JSX里面都是朴素的JS语句。

比如条件渲染：

condition && <view/>;

condition ? <view>1</view> : <view>2</view>

比如数组渲染：

arr.map(item => <view>{item}</view>)

数组+条件渲染

arr.map(item => {
    return item ? <view>1</view> : <view>2</view>
})

模版

同样的，小程序的模版template在JSX的世界是不存在的，UI的组合也是以编程的方式进行。

class A extends React.Component {

    getIcons(txt) {
        return <view>{txt}<view>
    }

    render() {
        return (
            <view>
                {
                    this.state.condition && <view>Hello</view>
                }
                
                {
                    this.getView(this.state.txt)
                }
            </view>
        )
    }
}

总的来说，JSX本质上是JS，相对小程序wxml的方式更加灵活，JSX不存在类似wx:for， wx:if的指令，而是以编程的思维去构建UI，这是一种图灵完完备的方式。

样例 HelloWorldRN 效果

小程序自定义组件

Alita在编译打包的过程中，会把项目下的weixin目录copy到小程序目录，我们可以把小程序自定义组件放置这这个目录下，以微信官方组件库weui-miniprogram为例，目录结构如下：

另外，还需要在配置文件alita.config.js 配置自定义组件的路径：

alita.config.js

module.exports = {
     // 其他配置
     ...

        //小程序自定义组件    
    miniprogramComponents: {
        "badge": "/weixin/weui-miniprogram/badge/badge",
        "cell": "/weixin/weui-miniprogram/cell/cell",
        "cells": "/weixin/weui-miniprogram/cells/cells",

        // 防止和小程序内置icon重复
        "mp-icon": "/weixin/weui-miniprogram/icon/icon",
        ...
    }
}

这样配置了以后，就可以直接用React方式来使用这些组件了。

<mp-icon type="add" size="25"/>

weui-miniprogram效果：

最后

Alita的代码托管在github，欢迎使用和star。