uni-app renderjs函数动态创建

### 如何在 uni-app 中通过 RenderJS 动态创建组件或元素 #### 渲染逻辑概述 `renderjs` 是 `uni-app` 提供的一种机制，用于执行原生 JavaScript 或 Webview 上下文中无法直接访问的功能。它允许开发者编写独立于 Vue 生命周期的脚本模块，并通过特定方法与 Vue 组件交互[^1]。 以下是基于 `renderjs` 实现动态创建 DOM 元素的一个完整示例： --- #### 示例代码：使用 renderjs 动态创建 DOM 元素 ```html <template> <view class="container"> <!-- 定义一个容器 --> <view id="dynamic-container"></view> <!-- 使用 renderjs 模块 --> <script type="text/rexx" :vsrc="renderScriptSrc" :change="handleDynamicCreation"></script> <!-- 控制按钮 --> <button @click="createElement">动态创建元素</button> </view> </template> <script> export default { data() { return { renderScriptSrc: 'renderscript', // 对应 renderjs 模块名 elementCount: 0, // 记录已创建的元素数量 }; }, methods: { createElement() { this.elementCount++; const newElementData = { text: `新元素 ${this.elementCount}` }; // 更新 vsrc 数据以触发动态创建逻辑 this.$emit('update:vsrc', JSON.stringify(newElementData)); } }, }; </script> <!-- 定义 renderjs 模块 --> <script type="application/javascript" src="renderscript"> class RenderJsModule { constructor() {} handleDynamicCreation(data) { const container = document.getElementById('dynamic-container'); if (container) { const div = document.createElement('div'); div.textContent = data.text; div.style.color = 'blue'; container.appendChild(div); } } sendDataToVue() { this.$ownerInstance.callMethod('someMethodInVue', { message: '来自 renderjs 的消息' }); } } module.exports = new RenderJsModule(); </script> ``` --- #### 关键点解析 1. **绑定事件触发器** 在模板中，`:change="handleDynamicCreation"` 将 Vue 组件的数据变化映射到 `renderjs` 方法上。每当 `vsrc` 发生改变时，都会调用指定的方法。 2. **动态创建 DOM 元素** 利用 `document.createElement()` 和其他标准 DOM API，在目标容器内动态生成新的子节点。此过程完全由 `renderjs` 执行，不会干扰 Vue 主线程。 3. **跨上下文通信** 当需要将数据从 `renderjs` 返回给 Vue 组件时，可以借助 `$ownerInstance.callMethod()` 来完成回调操作。 4. **性能优化建议** 如果涉及大量复杂计算或者频繁更新场景，则推荐将这些任务移至 `renderjs` 处理，从而减轻主线程压力。 --- #### 注意事项 尽管 `renderjs` 提供了强大的功能扩展能力，但在实际开发过程中仍需注意以下几点： - 确保项目结构清晰合理，遵循默认目录布局指导[^2]。 - 若计划集成第三方库（如 ECharts），可考虑将其封装为自定义组件以便复用和维护[^3]。 --- ###