#Ray 框架开发常见问题

#如何打开外部浏览器？

• 你可以使用openURL打开外部浏览器。

#Ray 开发没有报错，页面显示不符合预期怎么办？

• Ray 开发，相关代码不符合预期，如 TabBar 配置不起作用等，编译日志没有报错，请尝试升级 Ray 版本、IDE 版本。

#为什么预览版或者体验版，图片就显示不出了？

• 请确认你配置的资源地址均为https。
• 为促进小程序的安全合规，涂鸦对域名及请求路径提供安全校验。静态资源地址，request， uploadFile， downloadFile 均需要在小程序开发者平台中做相应配置。详情查看

#为什么在Ray框架引用部分三方库会导致报错？

原因：

• 版本兼容的原因:

  • 确保您引入的第三方库与 Ray 和其他相关库的版本兼容。不同的库版本之间可能存在不同的 API 或依赖关系，导致冲突。

• 运行环境的原因：

  • 小程序的运行环境有一些限制。某些浏览器 API 或全局对象在小程序中可能不可用，这可能会导致报错。比如直接在 Ray 框架中使用 antd 或 echarts 等。
  • 对于不对浏览器对象进行操作的库，如 Lodash、Redux 等，是可以直接使用的。

• 错误信息排查：

  • 查看报错信息的具体内容，可能会给您一些线索。报错信息通常会指明出错的文件、行数和错误类型。

• 社区支持：

  • 如果遇到问题，可以查看社区或第三方库的 GitHub 页面，看是否有其他用户遇到类似的问题，并查看是否有解决方案或更新。

#我可以使用 React Hooks / Redux / Dva / 其他 React 特性 吗？

可以。

#我可以使用 Ant Design / Ant Design Mobile / 其他 React DOM 依赖类库吗？

不可以。

小程序中没有 DOM，无法使用基于 React DOM 的 UI 库。

#既然 web 的现成方案不能直接使用，我应该怎么快速开发 UI 组件？

Ray 支持直接使用原生组件库。具体请参考 混合开发。

#使用高阶组件导致页面的生命周期未调用

如果使用了 Redux 的 connect，请将 connect 的 options.forwardRef 设置为 true。文档 其它第三方库的高阶组件处理方式也类似。原因如下。

对于使用 class 组件的页面，Ray 会通过 ref 获取页面生命周期。当页面组件被高阶组件（有时被称为 HOC）包裹时，通过 ref 取得的是 HOC 最外层的容器组件，而不是被包裹的组件。我们需要 React.forwardRef 将 ref 转发到内部组件。

import React, { forwardRef } from 'react';
import { View } from '@ray-js/ray';

class IndexPage extends React.Component {
  onReady() {
    console.log('onReady被调用');
  }

  render() {
    return <View>这是一个例子</View>;
  }
}

// HOC 的容器是一个函数式组件
const HOC = (Component) => {
  const Wrapped = (props, ref) => {
    return <Component {...props} ref={ref} />;
  };
  return forwardRef(Wrapped);
};

// 另一种情况，HOC 容器是一个 class component
const ClazzHOC = (Component) => {
  class Wrapped extends React.Component {
    render() {
      const { forwardRef, ...rest } = this.props;
      return <Component {...rest} ref={forwardRef} />;
    }
  }

  // 比起第一种情况，这里的处理要稍微麻烦一些
  return forwardRef((props, ref) => <Wrapped {...props} forwardRef={ref} />);
};

// 下面这三种方式导出的页面都可以按预期调用 `onReady`
export default ClazzHOC(IndexPage);
// export default HOC(IndexPage);
// export default IndexPage;

#编译后小程序提示找不到 xxx 文件路径

尝试删除打包目录，重新 build

#与 Taro 的区别？

Taro 3.0 版本的实现原理与 Ray 大同小异，没有太大的区别。主要区别在于以下两个方面：

• 跨平台设计，我们深知要打造一个面面俱到的多平台框架会有非常多的坑，与其挖一个大坑填不上，我们选择把有限的精力放在框架的核心功能上，并提供跨平台同构机制以及一个精简的跨平台实现（@ray-js/ray），让开发者可以根据自己的业务需求去做跨平台实现。
• 专注 React，因为 React 是我们自己大量使用和熟悉的前端框架，Ray 会持续专注在 React 技术栈。