• 1. 修改配置
  • 2. 封装组件
  • 3. 封装小程序原生 API
  • 5 封装 React Hooks
  • 4. 让页面逻辑更像是在写 React DSL
  • 5. 修改 script

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

    • 先实现一端的业务
    • 在另一端新建一个 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 支持，给开发者保留最大的灵活性