小程序跨端框架实践之Remax篇( 二 ) _小程序

文章插图

文章插图

图2-2 携程船票列表页web和微信小程序运行结果

文章插图

文章插图

图2-3 携程船票详情页web和微信小程序运行结果
下面介绍一下Remax的基本用法。
三、基本用法3.1 创建/安装依赖/运行
使用create-remax-App创建的小程序

npxcreate-remax-app my-app? name my-app //填写你的appName? author test<test@test.c>? descriptionRemax Project//填写项目描述? platform ? 跨平台小程序微信小程序阿里（支付宝）小程序头条小程序百度小程序

因为我们介绍的是跨端小程序，这里选择跨平台小程序。
运行项目
cd my-app&& npm installnpm run dev web//web端预览npm run devwechat //微信小程序端小程序端运行后会在项目目录里生成 dist/wechat、dist/ali各个小程序的产物，用小程序的IDE导入对应的目录即可预览。
项目的目录结构大致如下：

文章插图

其中public目录在编译时会被复制到dist目录下，里面的原生页面pages目录也会和Remax的pages目录合并，这一部分后面会详细介绍。
3.2 Remax的跨平台机制
以下详细介绍Remax的跨平台机制

文章插图

以上就是一个页面的基本文件目录结构，但是我们翻一遍Remax的文档就会发现它提供的跨平台的接口是少之又少，只有9个组件以及5个路由相关的API 。所以Remax又提供了一种用文件名后缀来区分不同平台代码的方法：

文章插图

如上面的目录所示，在页面的目录里增加相应后缀的文件在build相应平台的时候就会优先使用对应后缀的文件。
Remax还提供了环境变量区分平台的机制，在代码中直接通过
process.env.REMAX_PLATFORM区分平台。例如：
if (process.env.REMAX_PLATFORM==='wechat') {}以上代码在编译后只会保留对应平台的部分，所以无需担心兼容多平台带来额外的代码size增加。
除了上面说到的9个跨平台的组件和5个跨平台的API外，Remax还可以直接使用各个平台的组件及API，无需使用useComponents声明。

import React from'react';import { View } from'remax/one';import NativeCard from'./native-card';//native-card 是一个原生自定义组件// 组件exportdefault () => (<View><NativeCard /></View>);// APIif (process.env.REMAX_PLATFORM==='ali') {systemInfo = my.getSysyemInfoSync();} elseif (process.env.REMAX_PLATFORM==='wechat') {systemInfo = my.getSysyemInfoSync();}

根据以上机制我们就可以自定义出任何我们需要的跨平台API及组件。
按照Remax的说法之所以不提供更多的跨平台组件和API是因为他们在设计之初没有标准去抹平各个平台的差异。这当然给使用框架的开发者带来了一些麻烦，许多的组件和API不能开箱即用，需要额外的去做一层封装。但这也是Remax这个框架的优势，只保留了核心的组件及API使得它本身不占太多的size，也使得要兼容一个新的平台变得非常容易。
四、实践干货4.1混合原生
之前我们说到了public目录里的原生代码会拷贝到dist目录并且pages目录会合并，我们可以利用这一机制最大程度的复用现有小程序的代码，这也是我们团队选择Remax这个框架的原因之一。
让我们来体验一下，先创建一个原生小程序，以微信小程序为例：
小程序的文件目录大致如下