在开始多端开发之前，我们建议开发者循序渐进：

  • 先实现一端的业务
  • 在另一端新建一个 Remax 项目，而不是立即开启多端解决方案
  • 观察业务中的相似处和不同处，加深对产品的理解，构思可复用的逻辑，组件及架构。
  • 时机合适时融合 Remax 项目，整合出属于自己的跨多端解决方案。

你可以使用脚手架快速开始:

  1.   npx degit remaxjs/template-universe my-app
  2.   # typescript
  3.   npx degit remaxjs/template-universe-typescript my-app

现在让我们来看看如何利用 Remax 打造多端解决方案。（以微信和支付宝为例）

1. 修改配置

改造 app.config.js 以及页面的 config.js 配置文件：

  1. // app.config.js
  2. const title = '小程序标题';
  3. const bgColor = '#fff';
  4. const pages = ['pages/index/index'];
  6. // 微信
  7. exports.wechat = {
  8.   pages: ['pages/wechat/index', ...pages],
  9.   window: {
  10.     navigationBarTitleText: title,
  11.     navigationBarBackgroundColor: baColor,
  12.   },
  13. };
  15. // 支付宝
  16. exports.alipay = {
  17.   pages: ['pages/alipay/index', ...pages],
  18.   window: {
  19.     defaultTitle: 'Alipay Todo App',
  20.     titleBarColor: backgroundColor,
  21.   },
  22. };
  24. // 头条
  25. exports.toutiao = {
  26.   pages: ['pages/toutiao/index', ...pages],
  27.   window: {
  28.     defaultTitle: 'Toutiao Todo App',
  29.     titleBarColor: backgroundColor,
  30.   },
  31. };

如果没有默认导出，Remax 会去读取对应平台的配置信息，通过 config.js，开发者还可以复用多端共用的配置逻辑。

2. 封装组件

建立你自己的组件库

  1. // src/components.js
  2. // 为了方便示例，这里将逻辑都写在一起，实际中开发者可以根据自己的需要合理规划代码
  3. import * as React from 'react';
  4. import { View as WechatView, Text as WechatText } from 'remax/wechat';
  5. import { View as AlipayView, Text as AlipayText } from 'remax/alipay';
  6. import { View as ToutiaoView, Text as ToutiaoText } from 'remax/toutiao';
  7. import { Platform } from 'remax';
  9. export function View(props) {
  10.   switch (Platform.current) {
  11.     case 'wechat': {
  12.       // 封装微信端的 View 组件逻辑，处理微信端的样式
  13.       ...
  15.       return <WechatView {...props} />;
  16.     }
  18.     case 'alipay': {
  19.       // 封装支付宝端的 View 组件逻辑，处理支付宝端的样式
  20.       ...
  22.       return <AlipayView {...props} />;
  23.     }
  25.     case 'toutiao': {
  26.       // 封装头条端的 View 组件逻辑，处理头条端的样式
  27.       ...
  29.       return <ToutiaoView {...props} />;
  30.     }
  31.   }
  32. }
  34. export function Text(props) {
  35.   switch (Platform.current) {
  36.     case 'wechat': {
  37.       // 封装微信端的 Text 组件逻辑，处理微信端的样式
  38.       ...
  40.       return <WechatText {...props} />;
  41.     }
  43.     case 'alipay': {
  44.       // 封装支付宝端的 Text 组件逻辑， 处理支付宝端的样式
  45.       ...
  47.       return <AlipayText {...props} />;
  48.     }
  50.     case 'toutiao': {
  51.       // 封装头条端的 Text 组件逻辑， 处理支付宝端的样式
  52.       ...
  54.       return <ToutiaoText {...props} />;
  55.     }
  56.   }
  57. }

Remax 已经为开发者准备了每个平台的 React 支持，开发者拥有了“手”和“脚”，就可以根据自己的业务特点，打造属于自己的跨多端组件，保持最佳的灵活性和可维护性，一切对开发者都是透明的。 你可以以一端为标准，抹平多端差异，或者建立自己的组件接口，这一切都将有开发者灵活掌控

3. 封装小程序原生 API

和组件一样，开发者可以封装属于自己的 API 逻辑

  1. // src/api.js
  2. // 为了方便示例，这里将逻辑都写在一起，实际中开发者可以根据自己的需要合理规划代码
  3. import * as React from 'react';
  4. import { navigateTo as wechatNavigateTo } from 'remax/wechat';
  5. import { navigateTo as alipayNavigateTo } from 'remax/alipay';
  6. import { navigateTo as toutiaoNavigateTo } from 'remax/alipay';
  7. import { Platform } from 'remax';
  9. export function navigateTo(...params) {
  10.   switch (Platform.current) {
  11.     case 'wechat': {
  12.       // 封装微信端的 navigateTo 逻辑
  13.       ...
  15.       return wechatNavigateTo(...params);
  16.     }
  18.     case 'alipay': {
  19.       // 封装支付宝端的 navigateTo 逻辑
  20.       ...
  22.       return alipayNavigateTo(...params);
  23.     }
  25.     case 'alipay': {
  26.       // 封装头条端的 navigateTo 逻辑
  27.       ...
  29.       return toutiaoNavigateTo(...params);
  30.     }
  31.   }
  32. }
  34. export function getUserinfo(...params) {
  35.   switch (Platform.current) {
  36.     case 'wechat': {
  37.       ...
  38.       // 封装微信端的 getUserinfo 逻辑
  39.     }
  41.     case 'alipay': {
  42.       ...
  43.       // 封装支付宝端的 getUserinfo 逻辑
  44.     }
  46.     case 'toutiao': {
  47.       ...
  48.       // 封装头条端的 getUserinfo 逻辑
  49.     }
  50.   }
  51. }

和组件一样，API 也做同样的封装，这里以微信小程序为标准，统一封装了 getUserinfo API 行为

5 封装 React Hooks

同样是多态封装的思想，这里不再赘述。

4. 让页面逻辑更像是在写 React DSL

有了组件， API，Hooks 的多态支持，我们可以写跨多端的页面了。由于我们对基础支持做了很好的封装，页面可以专注于业务逻辑，就好比在写 React DSL 一般，这不仅有助于做跨多端开发，对整体项目的一致性，可维护性都有极大的帮助，甚至你都很简单地将 Remax 切换成其他框架！

  1. // page.js
  2. import * as React from 'react';
  3. // Remax 默认支持 '@/' 别名
  4. import { View, Text } from '@/components';
  5. import { getUserinfo } from '@/api';
  6. import { useMyHook } from '@/hooks';
  8. export default () => {
  9.   useMyHook();
  10.   React.useEffect(() => {
  11.     getUserinfo(...params);
  13.     // do sth...
  14.   });
  16.   return (
  17.     <View>
  18.       <Text>我是跨多端统一页面</Text>
  19.     </View>
  20.   );
  21. };

跨多端页面搭建成功！你可以看到这是一个非常专注于业务的页面，除了 React 和业务逻辑没有多余的概念，非常便于维护和升级

5. 修改 script

修改 package.json 中的命令

  1. {
  2.   "scripts": {
  3.     "dev": "remax build -w -t",
  4.     "build": "NODE_ENV=production remax build -t"
  5.   }
  6. }

现在可以编译到不同平台了

  1.   npm run build wechat
  2.   npm run build alipay
  3.   npm run build toutiao
  4.   ...

完成！

通过这篇指南，我们想告诉开发者，跨平台开发更考验的是对业务的理解和整合，这本质上是从编程思想去思考的事情，因此 Remax 专注于提供 React 支持，给开发者保留最大的灵活性