uni-app 鸿蒙系统 视图层元素click无法触发renderjs中定义的methods

发布于 1周前 作者 htzhanglong 来自 Uni-App

uni-app 鸿蒙系统 视图层元素click无法触发renderjs中定义的methods

开发环境 版本号 项目创建方式
Mac 12.5 (21G72) CLI

产品分类：uniapp/App

PC开发环境操作系统：Mac

手机系统：HarmonyOS NEXT

手机系统版本号：HarmonyOS NEXT Developer Preview

手机厂商：华为

手机机型：真机

页面类型：vue

vue版本：vue3

打包方式：离线

CLI版本号：1.92.2 (Universal)

示例代码：

<template>
  <view class="content">  
    <!-- #ifdef APP-PLUS || H5 -->  
    <view  
      @click="echarts.onClick"  
      :prop="option"  
      :change:prop="echarts.updateEcharts"  
      id="echarts"  
      class="echarts"  
    ></view>  
    <button @click="changeOption">更新数据</button>  
    <!-- #endif -->  
    <!-- #ifndef APP-PLUS || H5 -->  
    <view>非 APP、H5 环境不支持</view>  
    <!-- #endif -->  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      option: {  
        title: {  
          text: "ECharts 入门示例",  
        },  
        tooltip: {},  
        legend: {  
          data: ["销量"],  
        },  
        xAxis: {  
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],  
        },  
        yAxis: {},  
        series: [  
          {  
            name: "销量",  
            type: "bar",  
            data: [5, 20, 36, 10, 10, 20],  
          },  
        ],  
      },  
    };  
  },  
  onLoad() {},  
  methods: {  
    changeOption() {  
      const data = this.option.series[0].data;  
      // 随机更新示例数据  
      data.forEach((item, index) => {  
        data.splice(index, 1, Math.random() * 40);  
      });  
    },  
    onViewClick(options) {  
      console.log(options);  
    },  
  },  
};  
</script>  

<script module="echarts" lang="renderjs">  
let myChart  
export default {  
    mounted() {  
        // if (typeof window.echarts === 'function') {  
        //  this.initEcharts()  
        // } else {  
        //  // 动态引入较大类库避免影响页面展示  
        //  const script = document.createElement('script')  
        //  // view 层的页面运行在 www 根目录，其相对路径相对于 www 计算  
        //  script.src = 'static/echarts.js'  
        //  script.onload = this.initEcharts.bind(this)  
        //  document.head.appendChild(script)  
        // }  
    },  
    methods: {  
        // initEcharts() {  
        //  myChart = echarts.init(document.getElementById('echarts'))  
        //  // 观测更新的数据在 view 层可以直接访问到  
        //  myChart.setOption(this.option)  
        // },  
        updateEcharts(newValue, oldValue, ownerInstance, instance) {  
            // 监听 service 层数据变更  
            // myChart.setOption(newValue)  
      console.log('updateEcharts');  
        },  
        onClick(event, ownerInstance) {  
      console.log('onClick')  
            // 调用 service 层的方法  
            // ownerInstance.callMethod('onViewClick', {  
            //  test: 'test'  
            // })  
        }  
    }  
}  
</script>  

<style>  
.content {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
}  

.echarts {  
  margin-top: 100px;  
  width: 100%;  
  height: 300px;  
}  
</style>

更多关于uni-app 鸿蒙系统 视图层元素click无法触发renderjs中定义的methods的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
1 回复

更多关于uni-app 鸿蒙系统 视图层元素click无法触发renderjs中定义的methods的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中开发鸿蒙系统应用时，如果视图层元素（如按钮）的click事件无法触发renderjs中定义的methods，这通常是因为事件绑定和renderjs的执行环境之间存在一些问题。以下是一个示例，展示了如何在uni-app中正确地在renderjs中定义方法并绑定点击事件。

首先，确保你的uni-app项目已经配置好支持鸿蒙系统。然后，你可以按照以下步骤操作：

  1. 在页面的<script>标签中定义renderjs代码：
<script>
export default {
  data() {
    return {
      // 页面数据
    };
  },
  methods: {
    // Vue方法，通常不与renderjs直接交互
  },
  renderjs: [
    `
      function handleClick(event) {
        console.log('Button clicked!');
        // 在这里执行你的逻辑
      }

      function bindEvents() {
        const button = document.getElementById('myButton');
        if (button) {
          button.addEventListener('click', handleClick);
        }
      }

      // 页面加载完成后绑定事件
      window.onload = bindEvents;
    `
  ]
};
</script>
  1. 在页面的<template>中定义按钮元素：
<template>
  <view>
    <button id="myButton" type="primary">Click Me</button>
  </view>
</template>
  1. 在页面的<style>中（如果需要）定义样式：
<style>
/* 样式定义 */
</style>

在这个示例中，renderjs代码块中定义了handleClick函数，该函数将在按钮被点击时执行。bindEvents函数用于在页面加载完成后，为按钮添加click事件监听器。

注意：

  • renderjs代码在运行时与Vue实例是隔离的，因此不能直接访问Vue实例的data和methods。如果需要与Vue实例通信，可以使用postMessage和onMessage进行跨环境通信。
  • 鸿蒙系统对JavaScript的执行环境可能有特定的限制，确保你的代码符合鸿蒙系统的安全规范。
  • 在实际开发中，考虑到性能和安全，应谨慎使用renderjs，尤其是在需要频繁更新DOM或处理大量数据时。

通过上述步骤，你应该能够在uni-app的鸿蒙系统应用中正确绑定并触发renderjs中定义的方法。

回到顶部