Remax One - 从新设计小程序的跨平台开发

跨平台开发的挑战

小程序做为一项非标准的技术，各个小程序平台之间虽然大致上类似，但依然有很是多的差别。“一次开发多端运行”固然是很是美好的愿望，但咱们在设计 Remax 之初就意识到各个小程序平台之间的差别是没法被抹平的，每家小程序平台有太多的私货，更没有一个标准来指导咱们该如何抹平这些差别。

因此咱们在最开始，为每一个小程序平台提供了独立的基础组件。开发者若是要作跨平台开发，须要本身去封装基础组件。但很快，咱们也意识到这对开发者来讲是一件很麻烦的事情，特别是后面咱们要支持更多平台的话。

Remax One

受 CSS 属性名前缀的启发，咱们从新设计了 Remax 的跨平台方案。咱们很是克制地选取了 9 个基础组件，统一了他们之间非平台私有的属性，而且以属性名前缀的方式来支持各个平台私有的特性。咱们但愿开发者在作跨平台开发时能清楚地意识到你写下的这行代码只会在特定的平台上生效。

Remax One 就是咱们提供的跨平台解决方案。经过remax/one提供跨平台的组件。

import * as React from 'react';
import { View, Button } from 'remax/one';

export default () => {
  const [count, setCount] = React.useState(0);

  return (
    <View alipay-onAppear={() => console.log('Aha!')}>
      <View>{count}</View>
      <Button onTap={() => setCount(count + 1)}>+1</Button>
    </View>
  );
};

能够看到，对于onTap这样通用的属性咱们进行了统一，而支付宝独有的onAppear属性，则须要加上alipay-的前缀。

完整的示例项目

使用

从模板建立项目：

$ npx degit remaxjs/template-one my-app
$ cd my-app

或者在已有的项目中引入：

// remax.config.js
module.export = {
  // 经过设置 one: true 来开启 Remax One。
  one: true,
  // 经过环境变量区分不一样平台的输出目录
  output: 'dist/' + process.env.REMAX_PLATFORM,
};

小程序配置

app.config.js以及页面的config.js配置文件支持多端配置方式：

// app.config.js
const title = '小程序标题';
const bgColor = '#fff';
const pages = ['pages/index/index'];

// 支付宝
exports.alipay = {
  pages,
  window: {
    defaultTitle: title,
    titleBarColor: backgroundColor,
  },
};

// 微信
exports.wechat = {
  pages,
  window: {
    navigationBarTitleText: title,
    navigationBarBackgroundColor: backgroundColor,
  },
};

使用文件名后缀区分不一样平台代码

经过建立不一样平台的同名文件来封装跨平台组件和 API。例如：

// src/api/showToast/index.js
import { showToast } from 'remax/alipay';

export default showToast;
// src/api/showToast/index.wechat.js
import { showToast } from 'remax/wechat';

export default options => {
  showToast({
    ...options,
    title: options.content,
  });
};
// src/pages/index.js
import { View } from 'remax-one';
import showToast from '@/api/showToast';

export default () => {
  return (
    <View
      onClick={() => {
        showToast({ content: 'Hello World!' });
      }}
    >
      CLICK ME!
    </View>
  );
};

remax-cli会优先读取[target].js文件，这个规则针对 CSS 等其余文件一样有效。

组件

如上面所说，咱们很是克制谨慎地对remax/one中提供的组件作了筛选和从新设计，只保留了咱们能保证在各个平台之间行为一致的组件和属性。

若是须要使用某个平台特有的组件，能够直接从对应平台导入。如：

import * as React from 'react';
import { View, Text } from 'remax/one';
import { ScrollView } from 'remax/wechat';

export default () => {
  return (
    <ScrollView>
      <View>view</View>
      <Text>text</Text>
    </ScrollView>
  );
};

若是须要使用某个平台特有的属性，能够经过{平台前缀}-{平台原生属性名称}来设置，例如：

import * as React from 'react';
import { View, TapEvent } from 'remax-one';

export default () => {
  return (
    <View
      id="id"
      className="class"
      alipay-onAppear={() => {}}
      wechat-bindanimationend={() => {}}
      wechat-disable-scroll={true}
      onTap={(event: TapEvent) => {
        console.log(event);
      }}
    >
      view
    </View>
  );
};

经过 Remax One 开发者能够很是方便地构建跨小程序平台的应用。

另外社区同窗开发的跨平台组件也正在路上：https://github.com/AnnaSearl/...