木天雨
木天雨
  • 发布:2022-05-30 10:47
  • 更新:2022-06-03 17:34
  • 阅读:245

【报Bug】3.3.13以后的版本,编译视图层renderjs中的代码时,调用任意对象方法时都会报错(误报)

分类:HBuilderX

产品分类: HbuilderX

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: windows 11

HBuilderX版本号: 3.4.7

App下载地址或H5⽹址: https://ext.dcloud.net.cn/plugin?id=1207

示例代码:
<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)  
            },  
            onClick(event, ownerInstance) {  
                // 调用 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>  

操作步骤:
<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)  
            },  
            onClick(event, ownerInstance) {  
                // 调用 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>  

预期结果:

无错误

实际结果:

10:45:00.407 项目 'renderjs-echarts-demo' 开始编译...
10:45:03.321 请注意运行模式下,因日志输出、sourcemap以及未压缩源码等原因,性能和包体积,均不及发行模式。
10:45:03.633 正在编译中...
10:45:05.766 INFO Starting development server...
10:45:20.554 App running at:
10:45:20.554 - Local: http://localhost:8080/
10:45:20.557 - Network: http://192.168.1.7:8080/
10:45:20.558 项目 'renderjs-echarts-demo' 编译成功。前端运行日志,请另行在浏览器的控制台查看。
10:45:20.559 H5版常见问题参考: https://ask.dcloud.net.cn/article/35232
10:45:24.223 [HMR] Waiting for update signal from WDS...
10:45:24.450 App Launch at App.vue:4
10:45:24.452 App Show at App.vue:7
10:45:24.479 [Vue warn]: Error in callback for immediate watcher "option": "TypeError: Cannot read property 'setOption' of undefined"

found in

---> at pages/index/index.vue
10:45:24.485 [system]TypeError: Cannot read property 'setOption' of undefined
at VueComponent.updateEcharts (webpack-internal:///qZC/:23:15)
at VueComponent.vnode.$wxsWatches.(anonymous function).oldWxsWatches.(anonymous function).vnode.context.$watch.immediate (http://localhost:8080/static/js/chunk-vendors.js:8478:21)
at VueComponent.Vue.$watch (http://localhost:8080/static/js/chunk-vendors.js:6693:12)
at http://localhost:8080/static/js/chunk-vendors.js:8477:68
at Array.forEach (<anonymous>)
at Array.updateWxsProps (http://localhost:8080/static/js/chunk-vendors.js:8470:25)
at invokeCreateHooks (http://localhost:8080/static/js/chunk-vendors.js:7811:22)
at initComponent (http://localhost:8080/static/js/chunk-vendors.js:7744:7)
at createComponent (http://localhost:8080/static/js/chunk-vendors.js:7727:9)
at createElm (http://localhost:8080/static/js/chunk-vendors.js:7667:9)

bug描述:

3.3.13以后的版本,编译视图层renderjs中的代码时,调用任意对象方法时都会报错,而且编译后的APP和H5也无法正常运行。官方提供的renderjs-echarts-demo示例也会报错。

2022-05-30 10:47 负责人:无 分享
已邀请:
FullStack

FullStack - 【插件开发】【专治疑难杂症】【ios上架、马甲包、白包、过审、已成功上架过几百个】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=22130】【非诚勿扰】QQ:543610866

是vue3吗?

木天雨

木天雨 (作者)

不是BUG,我从VUE2过渡到VUE3,renderjs有点变化,每次刷新页面都会主动触发renderjs中的方法,所以会报错,只要给传参加个判断就好了。

该问题目前已经被锁定, 无法添加新回复