HarmonyOS 页面如何根据后台配置动态加载模块

参考示例如下：

// DataModel.ets   定义一个class
// 定义一个空的builder
@Builder
function defaultBuilder(): void {
}

// 定义一个class，有对应的WrappedBuilder
export class DataModel {
  id: string = ''
  value: string = ''
  otherProp: string = ''
  builderWrap: WrappedBuilder<[string]> = wrapBuilder(defaultBuilder)
  
  constructor(id: string, value: string, builderWrap: WrappedBuilder<[string]>) {
    this.id = id
    this.value = value
    this.builderWrap = builderWrap
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

// 创建返回的业务对象
// 创建builder组件
@Builder
function CustomBuilder(param: string) {
  Column() {
    Text(param)
      .fontSize(50)
      .fontWeight(FontWeight.Bold)
  }.height(50)
}

let customPageWrappedBuilder: WrappedBuilder<[string]> = wrapBuilder(CustomBuilder);

export function getData(): Promise<DataModel[]> {
  let arr: DataModel[] =
    [new DataModel('1', 'test1', customPageWrappedBuilder), new DataModel('2', 'test2', customPageWrappedBuilder)]
  return new Promise((resolve) => {
    resolve(arr)
  })
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

// 页面使用
import { DataModel, getData } from './DataModel'

@Entry
@Component
struct TestPage {
  testData: DataModel[] = []

  async aboutToAppear() {
    this.testData = await getData()
  }

  build() {
    Row() {
      Column() {
        ForEach(this.testData, (item: DataModel) => {
          item.builderWrap.builder(item.value)
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.