[RFC] 小程序应用及页面事件如何编写？

[ChrisCindy]

Rax 的做法

应用事件

在 src/app.tsx 中 runApp 接受一个 app 对象，用户可在其上配置小程序原生的 onLaunch/onShow/onShareAppMessage 等事件：

import { runApp } from 'rax-app';

const appConfig = {
  app: {
    onLaunch() {},
    onShow() {},
    onHide() {},
    onError() {},
    onShareAppMessage() {}
  },
};

runApp(appConfig);

页面事件

通过 registerNativeEventListeners、 addNativeEventListener、 removeNativeEventListener 三个 API 方法支持，详见：
https://rax.js.org/docs/guide/page-lifecycle-and-event-handler

Taro 的做法

应用事件

在 src/app.js 的入口入口组件中支持

• Class Component：

class App extends Component {
  // 可以使用所有的 React 生命周期方法
  componentDidMount () {}

  // 对应 onLaunch
  onLaunch () {}

  // 对应 onShow
  componentDidShow () {}

  // 对应 onHide
  componentDidHide () {}

  render () {
    return <>{props.children}</>
    )
  }
}

• Functional Component

// Taro 额外添加的 hooks 要从 '@tarojs/taro' 中引入
import { useDidShow, useDidHide } from '@tarojs/taro'

function App (props) {
  // 可以使用所有的 React Hooks
  useEffect(() => {})

  // 对应 onShow
  useDidShow(() => {})

  // 对应 onHide
  useDidHide(() => {})

  return <>{props.children}</>
}

页面事件

同上

ICE 怎么做？

应用事件

在 src/app.ts 的 defineAppConfig 中配置：

import { defineAppConfig } from 'ice';

export default defineAppConfig({
  onLaunch: () => {},
  onShow: () => {},
  onShareAppMessage: () => {}
});

页面事件

// TODO
// 1. 贴合 W3C 标准
// 2. 支持一套代码输出至 Web + 小程序端，对于 Web 不支持的小程序原生事件不执行，但不报错

[ChrisCindy]

// app
export default defineMiniappConfig({
onLaunch: () => {},
onShow: () => {},
onShareAppMessage: () => {}
});

// register
export function getConfig() {
return {
// with sideEffect
share: false
}
}

// addEventListener