Ray 开发框架—— App 开发

App

Ray 应用的默认入口文件为 src/app.js。不同于原生小程序中的 app.js，Ray 中的 app.js 是一个 React 组件。

// src/app.js
export default class App extends React.Component {
  render() {
    return this.props.children;
  }
}

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。

应用配置

Ray 应用配置通过 src/global.config.js 实现，对应原生小程序中的 app.json。

import { GlobalConfig } from '@ray-js/types';
 
export const wechat = {
  window: {
    backgroundColor: '#f2f4f6',
    navigationBarTitleText: '微信小程序示例',
    navigationBarBackgroundColor: '#f2f4f6',
    navigationBarTextStyle: 'black',
  },
};
 
export const tuya = {
  window: {
    backgroundColor: '#f2f4f6',
    navigationBarTitleText: '智能小程序示例',
    navigationBarBackgroundColor: '#f2f4f6',
    navigationBarTextStyle: 'black',
  },
};
 
export const web = {
  window: {
    backgroundColor: '#f2f4f6',
    navigationBarTitleText: 'Ray Web App',
  },
};
 
const globalConfig: GlobalConfig = {
  basename: '',
};
 
export default globalConfig;

Ray 构建时会根据构建的目标平台自动选择配置，如没有其他端的适配需求，可只保留 export const tuya = {} 即可。

生命周期

应用的生命周期可以直接写在 App 组件上。

export default class App extends React.Component {
  // did mount 的触发时机是在 onLaunch 的时候
  componentDidMount() {
    console.log('App launch');
  }
  onShow(options) {
    console.log('onShow', options);
  }
  render() {
    return this.props.children;
  }
}

对于函数组件的 App, 可以通过 useAppEvent hook 来监听生命周期

import { useAppEvent } from 'ray';
 
export default function App(props) {
  useAppEvent('onShow', () => {
    console.log('这个 hook 等同于 onShow');
  });
  useAppEvent('onThemeChange', () => {
    console.log('这个 hook 等同于 onThemeChange');
  });
  return props.children;
}

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。