render.js和逻辑层通信问题

前言：在初始化项目之初，在选择Vue2和Vue3之间，犹豫了一会，之后还是选择的Vue3，理由是之前没怎么用过composition api，只是从vue官网的文档中略了解。

用了Vue3之后，有两个需求的需要使用render.js的，一个是echarts的渲染，还有一个做一个左滑动手势的监听。echarts的渲染在官网就有demo我就不多介绍了，再就是监听页面的左滑手势。一开始用组合式api是这样写的

mounted () {
    const container = document.getElementById('container')
    container.addEventListener('touchstart', handleTouchStart, false);
    container.addEventListener('touchmove', handleTouchMove, false);
    var xDown = null;
    var yDown = null;
    
    function handleTouchStart(event) {
            xDown = event.touches[0].clientX;
            yDown = event.touches[0].clientY;
    }
    
    function handleTouchMove(event) {
            if (!xDown || !yDown) {
                    return;
            }
            var xUp = event.touches[0].clientX;
            var yUp = event.touches[0].clientY;
            var xDiff = xDown - xUp;
            var yDiff = yDown - yUp;
            if (Math.abs(xDiff) > Math.abs(yDiff)) {
                    if (xDiff > 0) {
                            // 左滑手势
                            console.log('左滑')
                    } else {
                            // 右滑手势
                            console.log('右滑')

                    }
            }

            xDown = null;
            yDown = null;
    }
}

本想在用这个来调起，逻辑层的函数'onMessage'

this.$ownerInstance.callMethod('onMessage',{data:'需要发送的数据'})

可是发现并不生效，后面经过测试回调函数无法访问到视图层的this，于是修改一下代码

    container.addEventListener('touchstart', handleTouchStart.bind(this), false);
    container.addEventListener('touchmove', handleTouchMove.bind(this), false);

经过修改能访问到this了，但是访问不到‘onMessage’，经过查阅在uniapp的组合式api中，无法使用this.$ownerInstance.callMethod这个属性（截止2023.10.19为解决，vue2却可以），最后的解决方法是做一个隐藏的按钮，通过获取到这个按钮进行代码点击

<template>
    <button @click="你想要运行的逻辑层函数" id="button">按钮<button/>
<template/>

// render.js
methods: {
    const button = document.getElementById('button')
    button.click()
}

如有错误，请评论指出。

记录接下uniapp遇到的逻辑层和render.js的问题（供自己查阅）

render.js和逻辑层通信问题