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 高效的開發小程序，這種感受真的很爽~