uni-app renderjs不支持鸿蒙next真机环境

uni-app renderjs不支持鸿蒙next真机环境

示例代码：

<template>  
     <view>  
             <button @click="canvasImage.generateImage">分享报告<button>  
             <view id="report"></view>  
     </view>  
</template>  
<script module="canvasImage" lang="renderjs">  
import html2canvas from "html2canvas";  

export default {  
    methods: {  
        generateImage() {  
            setTimeout(() => {  
                const dom = document.getElementById('report'); // 需要生成图片内容的 dom 节点  
                html2canvas(dom, {  
                   ....,  
                }).then((canvas) => {  
                    ......  
                }).catch(err=>{  
                    .......  
                });  
            }, 300);  
        },  
    }  
}  
</script>

操作步骤：

鸿蒙next真机无法调用renderjs中声明函数（无法触发函数执行，但是鸿蒙模拟器上可以执行，但是$ownerInstance.callMethod调用异常）

预期结果：

renderjs以及$ownerInstance.callMethod适配鸿蒙next

实际结果：

renderjs以及$ownerInstance.callMethod暂时不支持鸿蒙next

bug描述：

鸿蒙next真机无法调用renderjs中声明函数（无法触发函数执行，但是鸿蒙模拟器上可以执行，但是$ownerInstance.callMethod调用异常）


| 项目属性         | 值                                                         |
|------------------|------------------------------------------------------------|
| 产品分类         | uniapp/App                                                 |
| PC开发环境       | Windows                                                    |
| PC操作系统版本   | 版本Windows 10 专业版；版本号：21H2；操作系统内部版本：19044.3086 |
| 手机系统         | HarmonyOS NEXT                                             |
| 手机系统版本     | HarmonyOS NEXT Developer Beta2                             |
| 手机厂商         | 华为                                                       |
| 手机机型         | HUAWEI Mate 60（软件版本：NEXT.0.0.71(SP6C00E71R4P17patch02)） |
| 页面类型         | vue                                                        |
| Vue版本          | vue3                                                       |
| 打包方式         | 云端                                                       |
| 项目创建方式     | CLI                                                        |
| CLI版本号        | 4.29                                                       |

更多关于uni-app renderjs不支持鸿蒙next真机环境的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

4.31 支持

更多关于uni-app renderjs不支持鸿蒙next真机环境的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对您提到的uni-app中renderjs不支持鸿蒙next真机环境的问题，这确实是一个技术限制。由于uni-app框架和鸿蒙系统的兼容性问题，renderjs在鸿蒙next真机环境下的支持并不完善。不过，我们可以通过一些替代方案来实现类似的功能需求。以下是一个利用Vue.js和uni-app原生模块进行替代的示例代码，展示如何在不支持renderjs的环境下实现类似功能。

示例代码

假设我们需要在一个列表中渲染复杂的数据，并且希望在用户点击列表项时执行一些操作。由于renderjs不可用，我们将使用Vue.js的模板语法和事件绑定来实现。

<template>
  <view class="container">
    <view v-for="(item, index) in list" :key="index" class="list-item" @click="handleItemClick(index)">
      <text>{{ item.name }}</text>
      <text>{{ item.description }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: 'Item 1', description: 'Description for item 1' },
        { name: 'Item 2', description: 'Description for item 2' },
        // 更多项...
      ]
    };
  },
  methods: {
    handleItemClick(index) {
      const item = this.list[index];
      // 执行点击事件后的逻辑，比如导航到详情页
      uni.navigateTo({
        url: `/pages/detail/detail?id=${item.id}` // 假设每个item有一个唯一的id
      });
    }
  }
};
</script>

<style>
.container {
  padding: 20px;
}
.list-item {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
.list-item:last-child {
  border-bottom: none;
}
</style>

说明

  1. 模板语法：使用Vue.js的v-for指令来遍历列表数据，并使用v-bind和v-on（简写为:和@）来绑定属性和事件。
  2. 事件处理：在handleItemClick方法中处理点击事件，通过uni.navigateTo实现页面导航。
  3. 样式：简单的样式定义，确保列表项之间有适当的间距。

虽然这个示例没有直接使用renderjs，但它展示了如何在uni-app中使用Vue.js的模板语法和事件处理机制来实现类似的功能。对于鸿蒙next真机环境，这种方法是可行的替代方案。如果需要在鸿蒙系统上进行更复杂的渲染或交互，可能需要考虑使用原生开发或等待uni-app框架对鸿蒙系统的进一步支持。

回到顶部