o***@gmail.com
o***@gmail.com
  • 发布:2024-12-12 16:11
  • 更新:2025-03-19 11:48
  • 阅读:91

【报Bug】鸿蒙系统 视图层元素click无法触发renderjs中定义的methods

分类:鸿蒙Next

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 12.5 (21G72)

手机系统: HarmonyOS NEXT

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

手机厂商: 华为

手机机型: 真机

页面类型: vue

vue版本: vue3

打包方式: 离线

项目创建方式: CLI

CLI版本号: 1.92.2 (Universal)

示例代码:

用文档中的示例也可以复现https://uniapp.dcloud.net.cn/tutorial/renderjs.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9
以下是基于这示例,改的更简易的版本

  <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>

操作步骤:

使用示例代码,跑鸿蒙真机 Harmony版本 OpenHarmony-5.0.0

预期结果:

视图层元素click可以像在H5平台一样,能够触发renderjs中定义的methods

实际结果:

视图层元素click无法触发renderjs中定义的methods,方法没有被触发onClick,控制台没有打印onClick

bug描述:

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

2024-12-12 16:11 负责人:无 分享
已邀请:
d***@yiring.com

d***@yiring.com

发现确实不支持,而且点击之后会直接卡死,其他路由跳转都会卡住

要回复问题请先登录注册