在智能小程序开发中，如何用 RJS 来处理高频的绘图需求？

大家好，欢迎来到IT知识分享网。

Render Script (RJS)

介绍

• 我们都知道，在智能小程序中，RJS 用来处理高频的绘图需求。开发面板小程序的时，我们通常使用 Ray 框架进行开发。
• 智能小程序 RJS文章中介绍了 RJS的运行环境 API、实例方法和注意事项等。这些运行环境 API、实例方法和注意事项同样适用于在 Ray 框架中进行 RJS 开发。

示例代码

// page/index.tsx import React from 'react'; import Chart from '@/components/chart'; import * as ray from 'ray'; import { usePageInstance } from 'ray'; import Render from './index.rjs'; export default () => { const ctx = usePageInstance(); ray.usePageEvent('onShow', function () { / * 微信端使用 rjs 注意事项 * 一. 页面中使用 rjs * ray中使用的组件是 react 组件，即使是混合开发的原生组件，也被看成 react 组件， * 因微信小程序本身限制，页面无法直接获取到小程序原生组件的节点， * 所以页面中使用rjs，需要先获取原生组件的实例。 */ const compInst = ctx.selectComponent('#xx'); // 通过页面实例的 `selectComponent` 获取原生组件实例 const render = new Render(compInst); setTimeout(() => { render.getDOMByRJS().then(() => { render.getDocument(); }); }, 500); }); return <Chart title="rjs demo from rjs" id="xx" type="2d" />; };

// page/index.rjs // render js 只能获取 canvas 节点 const LOG_PREFIX = '页面中的rjs: '; export default Render({ // module.exports = Render({ document: null, x: 111, getDOMByRJS() { return getCanvasById('chart', this).then((chart) => { console.log(LOG_PREFIX, 'getDOMByRJS 1', chart); }); }, getDocument() { console.log(LOG_PREFIX, 'getDocument', this.document); }, });

• 以下是 chart 组件

// @/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); }, }, });

// @/components/chart/index.rjs export default Render({ // module.exports = Render({ getDOMByRJS() { getCanvasById('chart', this).then((res) => { console.log('组件中的rjs: getDOMByRJS', res); }); }, });

// @/components/chart/index.tyml <canvas canvas-id="chart" id="chart" type="2d" />

// @/components/chart/index.wxml <canvas canvas-id="chart" id="chart" type="2d" />

// @/components/chart/index.json { "component": true, } 

注意事项

• 以上写法可以同时运行在微信和智能小程序端，需要注意，如果运行在微信端，Ray 版本需要大于等于 0.7.12。
• 在微信运行 getCanvasById 时需要将组件或页面示例通过第二个参数传入。
• 因微信小程序本身限制，页面无法直接获取到小程序原生组件的节点，所以页面中使用 rjs，需要通过 usePageInstance 获取原生组件的实例。

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