Rax跨端应用demo以及Rax和Muise的区别

---

淘系实习生的必经之路！

一、初始化一个rax项目

npm init rax 项目名

会出现选项：

App (Build universal application)：用于构建通用应用程序，包括 Web 应用程序和小程序应用程序等。
Component (Build universal component)：用于构建通用组件，可以在多个应用程序中复用。
API (Build universal API library)：用于构建通用的 API 库，为其他应用程序和组件提供统一的接口。
Plugin (Build plugin for miniapp)：用于构建小程序插件，可以在多个小程序中复用。

接下来会让你选择应用场景，这也是Rax和Muise的不同之处之一：

接下来会选择用js还是ts。

最后初始化完成，安装依赖并启动项目：

npm install
npm start

期间报错：

error in ./.rax/core/runApp.ts
[tsl] ERROR
TS5101: Option ‘suppressImplicitAnyIndexErrors’ is deprecated and will stop functioning in TypeScript 5.5. Specify compilerOption ‘“ignoreDeprecations”: “5.0”’ to silence this error.

这个错误是与 TypeScript 中使用了被弃用的选项 ‘suppressImplicitAnyIndexErrors’ 相关的。为了解决这个错误，你需要指定编译器选项 “ignoreDeprecations”: “5.0”。
你可以修改你的项目中的 tsconfig.json 文件，删去compilerOptions中的"suppressImplicitAnyIndexErrors": true

可以看到页面了：

Rax 应用的目录结构如下所示（引用自Rax官方文档）：
.
├── .rax/ # 运行时生成的临时目录
├── build/ # 构建产物目录
├── public # 本地静态资源
│ └── favicon.png
├── src
│ ├── app.json # 路由及页面配置
│ ├── app.ts # [小程序|SPA]应用入口
│ ├── miniapp-native/ # [小程序]小程序原生代码
│ ├── components/ # 自定义业务组件
│ ├── pages/ # 页面
│ ├── models/ # 应用级数据状态
├── build.json # 工程配置
├── package.json
└── tsconfig.json

rpx是跨端应用中的一个计量单位，它代表“responsive pixel”，即响应式像素。与其他 CSS 单位（如 px、em 或 rem）不同的是，rpx 是一个相对单位，它可以根据屏幕宽度自动适应大小。
微信小程序的设计分辨率是 750px * 1334px，因此 1rpx 等于屏幕宽度的 1/750。例如，如果你的屏幕宽度是 375px，则 1rpx 将等于 0.5px。
使用 rpx 可以帮助开发者编写更加响应式的小程序页面，因为它可以根据不同的设备自动适配大小。使用 rpx 编写样式时，你可以在 CSS 中直接使用 rpx，而无需手动计算像素值。

rax也在uni-tool库中提供了一些px2rpx和rpx2px的方法。

接着删除logo组件，删除该组件的相关引用：

…
今天先写这么多，还没搞完

---

二、Rax和Muise的区别

Rax 和 Muise 都是基于 React 的轻量级跨端框架。它们的实现方式有以下几个区别：

1 语法：Rax 采用的是类 React 的语法，而 Muise 采用的是类 Vue 的语法。Rax 的组件是基于类的，而 Muise 的组件是基于对象的。这意味着在使用这两个框架时，需要采用不同的语法去定义组件和处理事件等。

在 React 中，组件是通过定义类来实现的，可以通过继承 React.Component 或 React.PureComponent 来定义一个组件类。在组件类中，需要实现 render 方法来返回组件的 JSX 表示。

而在 Muise 中，组件是通过一个普通的 JavaScript 对象来定义的，这个对象包含了组件的属性和方法。组件对象中必须包含一个 render 方法，用来返回组件的 JSX 表示。
这种基于对象的组件定义方式，可以方便地进行组件的组合和复用，也可以在 Muise 中实现更加灵活的组件逻辑。相对于基于类的组件定义方式，基于对象的组件定义方式更加简单，不需要进行类的继承和实例化等操作，可以更加轻松地创建和使用组件。
需要注意的是，虽然 Rax 和 Muise 的组件定义方式不同，但它们的渲染方式都是通过类似的 Virtual DOM 技术实现的。因此，在使用这两个框架时，可以按照相应的语法和方式来定义组件，不影响它们的渲染效果和性能表现。

2 渲染方式：Rax 通过自定义渲染器来支持不同的平台，例如 Web、Weex、Miniapp 等。而 Muise 通过编译器来将页面渲染到不同的平台上。这意味着在使用 Rax 时，需要对不同平台进行定制化，而在使用 Muise 时，只需要编写一套代码就可以跨多个平台使用。

3 生态系统：Rax 的生态系统更加成熟，拥有大量的社区支持和插件。而 Muise 的生态系统相对较小，但也在不断发展壮大。这意味着在使用这两个框架时，需要考虑到相应的生态系统和第三方插件的支持情况。

4 性能：Rax 在性能方面表现非常优秀，它具有高效的渲染引擎和精简的代码结构。而 Muise 相对于 Rax 在性能方面表现稍弱一些。这意味着在使用这两个框架时，需要根据实际需求和场景来选择合适的框架。
总的来说，Rax 和 Muise 都是优秀的跨端框架，它们的实现方式有一些区别，开发者可以根据自己的实际需求和场景来选择合适的框架。

5 使用场景：Rax 和 Muise 都是基于 React 的轻量级跨端框架，适用于快速构建跨平台应用。在选择使用哪个框架时，需要根据实际需求、技术栈、开发团队等因素进行综合考虑。

使用 Rax 的情况：
需要支持多个平台，例如 Web、Weex、Miniapp 等。
需要高性能和可靠性的渲染引擎，例如在需要处理大量数据和高并发等场景时。
希望使用成熟的生态系统和第三方插件，例如在需要使用大量开源组件和库时。
开发团队已经熟悉 React 和基于 React 的开发方式，希望在跨平台开发中能够继续使用相同的技术栈。

使用 Muise 的情况：
需要快速构建跨平台应用，且开发人员对 Vue 比较熟悉。
希望通过编写简单的 JavaScript 对象来定义组件，降低学习成本和提高开发效率。
需要支持多个平台，同时又不需要进行过多的平台差异性处理，例如在需要快速开发小型项目和原型时。