Ray 开发框架——小程序跨端API集合

最新推荐文章于 2024-07-25 17:45:25 发布

IoT砖家涂拉拉

最新推荐文章于 2024-07-25 17:45:25 发布

阅读量304

点赞数 4

文章标签：小程序 App API SDK 物联网开发语言 ray

本文链接：https://blog.csdn.net/Ms_Smart/article/details/137790975

版权

本文介绍了跨端API在项目中的应用，包括usePageEvent和withPageLifecycle的生命周期管理，以及router和location对象的路由控制。推荐在项目中采用FunctionComponents和HooksAPI进行开发。

摘要由CSDN通过智能技术生成

跨端 API

跨端框架提供给项目统一的运行环境，实现多端能力的一致性，包含路由，生命周期。

使用方式：

import { router } from 'ray';

API 概览

import { usePageEvent, withPageLifecycle, router, location } from 'ray';

usePageEvent

页面生命周期 hook，可用于监听页面生命周期。

签名：usePageEvent(event: string, callback: Function);

event:

onShow 页面可见时
onHide 页面隐藏时
onPageScroll 页面滚动时
onPullDownRefresh 下拉刷新
onReachBottom 页面触底
onResize 页面尺寸发生改变
onLoad 页面加载时触发
onUnload 页面卸载时触发
onReady 页面初次渲染完成时触发
onShareAppMessage 页面分享（微信小程序独有）

针对 Class Components，在跨端运行模式下默认扩展以上生命周期。示例：

import React from 'react';
import { View } from '@ray-js/ray';
 
export default class Home extends React.Component {
  onShow() {
    // page show
  }
  render() {
    return <View>Home Page</View>;
  }
}

withPageLifecycle

扩展生命周期能力，可用于子组件（Class Components）中监听页面生命周期。示例：

import React from 'react';
import { View } from '@ray-js/ray';
import { withPageLifecycle } from 'ray';
 
class Child extends React.Component {
  onShow() {
    // 所在页面触发 page.onShow
  }
  render() {
    return <View>Child</View>;
  }
}
 
export default withPageLifecycle(Child);