阅读 157

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 高效的开发小程序,这种感觉真的很爽~


关注下面的标签,发现更多相似文章
评论