使用rax编写的组件拖拽出一个页面后如何在微信小程序中渲染

[Pzy1990]

如图，，，在web端使用render渲染出组件后，挂载到id为‘hello’的元素上，driver使用UniversalDriver，在web端可以正常渲染。问题在于，在微信小程序端如何渲染呢？ 将driver换成driver-wxex后，如何渲染到小程序页面上呢？

[LeoYuan]

不太清楚 rax 底层是如何支持小程序运行时的技术细节，建议去 rax 的公开资料找一下。

听说有编译时和运行时两种方案：编译时类似 taro 等转译，运行时类似 remaxjs / kbone。

[bolyage]

如图，，，在web端使用render渲染出组件后，挂载到id为‘hello’的元素上，driver使用UniversalDriver，在web端可以正常渲染。问题在于，在微信小程序端如何渲染呢？ 将driver换成driver-wxex后，如何渲染到小程序页面上呢？

import {createElement, useEffect, useState} from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import TextInput from "rax-textinput";
import Image from 'rax-image';
import Video from 'rax-video';

import Logo from '../../components/Logo';
import request from '@uni/request';
import { loading } from '@uni/apis';
import RaxRenderer from "@alilc/lowcode-rax-renderer";
import { Section, Block, Row, Cell, P } from '@alifd/mobile-layout';
import { ActionSheet,Avatar,Badge,BreadCrumb,Button,Calendar,Card,CascaderSelect,Checkbox,ConfigProvider,DatePicker,Dialog,Drawer,Field,Form,Icon,Input,List,Menu,Message,Modal,Nav,NumberPicker,Pagination,Picker,Progress,Radio,Range,Rating,RichText,Search,Select,SideBar,SlideView,Slider,Step,Switch,Tab,Tag,TimePicker,Transfer,Upload } from '@alifd/meet';

interface RenderPageProps {
    pageId: string;
  }

export default function RenderPage(props: RenderPageProps) {
    const { pageId } = props;
    const [data, setData] = useState({});

    const { schemaInfo } = data as any;

    useEffect(() => {
        fetchData();
    }, []);

    const fetchData = () => {
        request({
            url: 'schema后端存储',
            method: 'GET',
            dataType: 'json',
            success: (res) => {
                setData(res.data.data); // 更新组件中的数据
            }
        });
    };

    const components = {
        //rax 
        View,Text,TextInput,Image,Video,
        //mobile-layout
        Section, Block, Row, Cell, P,
        // Page,Section, Block, Row, Cell, P,
        //alifd/meet
        ActionSheet,Avatar,Badge,BreadCrumb,Button,Calendar,Card,CascaderSelect,Checkbox,ConfigProvider,DatePicker,Dialog,Drawer,Field,Form,Icon,Input,List,Menu,Message,Modal,Nav,NumberPicker,Pagination,Picker,Progress,Radio,Range,Rating,RichText,Search,Select,SideBar,SlideView,Slider,Step,Switch,Tab,Tag,TimePicker,Transfer,Upload,
        Logo,
    };

    console.log(schemaInfo)

    if (!schemaInfo || !components) {
        loading.showLoading({
            content: '加载中',
          });
        return <Text></Text>;
    }
    loading.hideLoading();

    return (
        <RaxRenderer
            schema={JSON.parse(schemaInfo)}
            components={components}
        />
    );
}