Rax v0.3 跨端生态建设

优质

小牛编辑

132浏览

2023-12-01

2017年5月底 Rax 发布 0.3 版本。伴着初夏，我们看看都有哪些新东西。

一些数据

经过近一个多月的稳步发展，Rax 体系上积累了一些新的尝试。

1377 commits

199 pull requests

70 issues

2910 stars

framework

新增支持 API，进一步向 W3C 标准同步

location

assign

replace

reload

navigator.userAgent

WebSocket

重复检测

检测项目里的 Rax 重复打包情况

组件生态

基础组件体系的扩充

rax-canvas

Weex 下基于 gcanvas

Web 下基于 canvas

目标：兼容 w3c 下所有的 api

rax-charts

基于 rax-canvas 和 g2-mobile

简单的图表需求

手淘版本：安卓 6.7.4+ 和 ios 6.6.0+

rax-qrcode & rax-barcode

基于 rax-canvas

通过文本生成条形码以及二维码

支持常见条码格式 ( CODE39 CODE128 等 )

支持部分样式自定义

import {createElement, Component, render} from 'rax';
import {View} from 'rax-components';

import QRCode from 'rax-qrcode';
import BarCode from 'rax-barcode'

class Demo extends Component {
  constructor() {
    super();
    this.state = {
      data: 'Example 1234'
    };
  }

  render() {
    return (
      <View style={{flex: 1}}>
        <QRCode
          data={'1234567890'}
          options={{
            typeNumber: -1,
            errorCorrectLevel: QRCode.ErrorCorrectLevel.H
          }}
        />
        <BarCode
          data={'123456789'}
          options={{
            fillColor: 'red'
          }}
        />
      </View>
    );
  }
}

render(<Demo />);

rax-picker & rax-datepicker & rax-timepicker

唤起客户端原生的时间选择与日期选择，Web 上使用原生 select 或 input 实现。

rax-checkbox & rax-counter

电商类 UI 区块抽象

常用业务 UI 区块的沉淀

webgl driver

Rax Driver

抽象 View 层的实现

提供跨容器支持能力

标准的统一的 API ( createElement replaceChild setAttribute …)

WebGL Driver

与 Rax 结合的 driver 层

基于 three.js

提高 3D 开发的效率和体验

var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

  var renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  var geometry = new THREE.BoxGeometry( 1, 1, 1 );
  var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
  var cube = new THREE.Mesh( geometry, material );
  scene.add( cube );
  camera.position.z = 5;

  var render = function () {
    requestAnimationFrame( render );
    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;
    renderer.render(scene, camera);
  };
  render();

<scene
    width={this.width}
    height={this.height}
    onAfterRender={this.onAfterRender}
  >
    <perspective-camera
      fov={75}
      aspect={this.width / this.height}
      near={0.1}
      far={1000}
      position={this.cameraPosition}
    />
    <mesh
      rotation={this.state.cubeRotation}
    >
      <box-geometry
        width={1}
        height={1}
        depth={1}
      />
      <mesh-basic-material
        color={0x00ff00}
      />
    </mesh>
  </scene>

rax 工具包

rax-cli & rax-scripts

rax init 初始化项目

rax-scripts start 启动调试

rax-scripts build 构建项目

特性

Hot reload 热加载功能

兼容旧项目，无缝迁移

Rax 0.4，欲知后事如何，尽情期待