On this page
OverviewExampleThings to note

Rendering Script

Overview

  • A rendering script (RJS) is designed to process high-frequency drawing tasks in Smart MiniApp. To develop a Panel MiniApp, the Ray framework is recommended.
  • The operating environment, instance methods, and things to note for the RJS are described in Rendering Script for Smart MiniApp. This topic also applies to RJS development on top of the Ray framework.

Example

// page/index.tsx
import React from 'react';
import Chart from '@/components/chart';
import { usePageInstance, usePageEvent } from '@ray-js/ray';

import Render from './index.rjs';

export default () => {
  const ctx = usePageInstance();
  usePageEvent('onShow', function () {
    /**
     * Things to note about using .rjs on WeChat
     * 1. Use .rjs on pages
     * The React component is used in Ray. Even the native component in hybrid development is still regarded as the React component.
     * Due to the restrictions of WeChat miniApps, the nodes of native components for miniApps cannot be directly obtained to render pages.
     * To use .rjs on pages, you must first get the instances of native components.
     */
    const compInst = ctx.selectComponent('#xx'); // Use `selectComponent` of the page instance to get the native component instance.
    const render = new Render(compInst);
    setTimeout(() => {
      render.getDOMByRJS().then(() => {
        render.getDocument();
      });
    }, 500);
  });

  return <Chart title="rjs demo from rjs" id="xx" type="2d" />;
};
  • The following code block shows the chart component.
// @/components/chart/index.js
import Render from './index.rjs';
Component({
  lifetimes: {
    attached() {
      this.rjs = new Render(this);
    },
    ready: function () {
      this.rjs.getDOMByRJS();
    },
  },
  methods: {
    myFn: function (args) {
      console.log('this my function', args);
    },
  },
});

Things to note

  • The preceding examples apply to both WeChat and Smart MiniApp. To run them on WeChat, the Ray version must be v0.7.12 or later.
  • When you run getCanvasById on WeChat, set its second parameter to pass in an instance of components or pages.
  • Due to the restrictions of WeChat miniApps, the nodes of native components for miniApps cannot be directly obtained to render pages. To use .rjs on pages, you must first call usePageInstance to get the page instance, then use selectComponent to get the native component instance.