Rax 开发小程序初体验

Rax 简介

Rax 是由阿里巴巴淘系技术部提供的超轻量，高性能，易上手的前端解决方案。它的特点之一就是能够一次开发多端运行，这样一来可以解放重复工作，让开发者更注重产品逻辑，提升开发效率。

Rax 在设计上抽象出 Driver 的概念，用来支持在不同容器中渲染，比如目前所支持的：Web, Weex, Node.js 。基于 Driver 的概念，未来即使出现更多的容器（如 VR 等），Rax 也可以从容应对。此外，Rax 通过一套基于 AST 的解决方案支持构建小程序应用。Rax 在设计上尽量抹平各个端的差异性，这也使得开发者在差异性和兼容性方面再也不需要投入太多精力了。

前言

双十一要来了，老板给了小白一个任务——写一个卖书的电商应用，要求是能同时投放到 Web 和支付宝小程序，并且明天就要提测。小白接到任务瑟瑟发抖，在调研一番之后，他选择了 Rax。对 Rax 感兴趣的同学，可以通过下面这份小白的总结来了解一下，他是怎么一天完成这个艰巨的任务的。

初始化项目

小白看了看文档，发现根本无需本地全局安装脚手架就可以初始化项目：

npm init rax book-store

在不加思索的选择了创建多端工程之后，小白看到了下面的提示：

? Do you want to build to these targets? (Press <space> to select, <a> to toggle all, <i> to invert selectio
n)
❯◯ web
 ◯ weex
 ◯ miniapp

“简直太适合我了吧！！！”小白激动的叫出了声。

打开项目，运行代码

项目目录如下：

├── README.md
├── build.json
├── package.json
├── src
│   ├── app.js
│   ├── app.json
│   ├── components
│   │   └── Logo
│   │       ├── index.css
│   │       └── index.jsx
│   ├── document
│   │   └── index.jsx
│   └── pages
│       └── Home
│           ├── index.css
│           └── index.jsx
└── yarn.lock

小白试着在命令行输入了：

npm start

点开命令行提示的 ip，小白发现 Web 端正常的跑起来了。再看看 build 目录的文件结构：

└── miniapp
    ├── app.acss
    ├── app.js
    ├── app.json
    ├── components
    │   └── Logo
    │       ├── index.axml
    │       ├── index.css.js
    │       ├── index.js
    │       └── index.json
    └── pages
        └── Home
            ├── index.axml
            ├── index.css.js
            ├── index.js
            └── index.json

一目了然，miniapp 下面是标准的小程序代码结构，打开支付宝小程序开发者工具，把小程序目录指向 miniapp：

开动

首页

首页是一个滚动加载的书单列表，小白按照熟悉的 JSX 语法，马上就写出了基础布局，甚至还用上了 React 16.8 之后推出的 hooks 语法：

import { createElement, useState } from 'rax';
import ScrollView from 'rax-scrollview';
import BookItem from '../../components/BookItem';
import mockData from '../../mock';
import './index.css';

export default function Home() {
  const [bookList, setBookList] = useState(mockData);
  return (
    <ScrollView className="book-list">
      {bookList.map(item => {
        return <BookItem detail={item} />;
      })}
    </ScrollView>
  );
}

对熟悉 React 的小白来说，首页写起来简直不费吹灰之力，语法简单明了，结构非常清晰。

组件开发

在完成首页开发之后，小白开始动手开发 BookItem 组件，每一个 BookItem 组件用来展示不同书的信息，供消费者进行选择：

import { createElement } from 'rax';
import View from 'rax-view';
import Image from 'rax-image';
import Text from 'rax-text';
import './index.css';

export default function({ detail }) {
  return (
    <View className="book-container">
      <Image
        mode="aspectFit"
        className="book-img"
        source={{ uri: detail.imgUri }}
      />
      <View className="book-info">
        <Text className="title">{detail.title}</Text>
        <Text className="money">￥{detail.money}</Text>
      </View>
    </View>
  );
}

小白写完上面这些代码，看了看时间，才过了 5 分钟，他分别打开浏览器和开发者工具，看看效果如何：

浏览器：

小程序开发者工具：

页面基本已经完成，还剩下接入数据请求、下拉加载更多、跳转等功能。

实战初体验

整个项目做下来，小白发现一天的时间绰绰有余，更多的时间是花在调整样式和后端联调上，开发过程也非常舒适，可以使用熟悉的 React 语法同时开发多个端的项目，几乎不用再去学习小程序的语法。

Rax 开发小程序总结

Rax 为了能够满足开发者一次代码无感跑多端的诉求，提供了多端工程体系、Rax 基础组件、Universal-API 等等生态。开发者可以使用社区中最受欢迎的 React 语法，迅速通过 Rax 完成自己的项目。另外，更加吸引人的是，这些多端项目不仅仅只是完成而已，它们的性能、包体积表现都非常出色。

用 Rax 开发小程序是不是真的没有阻碍呢？答案是否定的，小白发现，由于 Rax 转译小程序是通过 AST 的方式编译实现的，所以依然有一些常用的语法无法满足，例如一个文件只能导出一个组件、无法把 JSX 赋值给变量，然后通过变量去渲染等等。但是好在，这些用法都能用简单的方法绕过。

Rax 开发小程序的未来

Rax 团队的愿景是——Write once, run everywhere。因为相信，所以看见。未来，Rax 会在更多端上进行探索比如 VR/AR、Iot。小程序链路是其中重要的一环，我们期待能够用 Rax 更加自如的完成小程序项目，并且支持更多类型的平台，比如微信、今日头条等等。

看了这篇简单实战之后，你也可以动手试试看。用 Rax 高效的开发小程序，这种感觉真的很爽~