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

ykforerlang

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

one.jpg

针对小程序平台,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>

注意这里的sizebindtap的属性绑定。 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:forwx:if的指令,而是以编程的思维去构建UI,这是一种图灵完完备的方式。

样例 HelloWorldRN 效果

wxbasecomp.jpg

小程序自定义组件

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

weui.jpg

另外,还需要在配置文件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效果:

custom.jpg

最后

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

阅读 1.6k

不积跬步 无以至千里

377 声望
45 粉丝
0 条评论
你知道吗?

不积跬步 无以至千里

377 声望
45 粉丝
宣传栏