uni-app renderjs和wxs运行报错

测试过的手机

iphone13
小米11

示例代码：

<template>  
    <view>  
        <view class="area">  
            <view @touchstart="test.touchstart" @touchmove="test.touchmove" class="movable">{{test.msg}}</view>  
        </view>  
    </view>  
</template>  
<script module="test" lang="wxs">  
    var startX = 0  
    var startY = 0  
    var lastLeft = 50; var lastTop = 50  
    function touchstart(event, ins) {  
        console.log("touchstart")  
      var touch = event.touches[0] || event.changedTouches[0]  
      startX = touch.pageX  
      startY = touch.pageY  
    }  
    function touchmove(event, ins) {  
      var touch = event.touches[0] || event.changedTouches[0]  
      var pageX = touch.pageX  
      var pageY = touch.pageY  
      var left = pageX - startX + lastLeft  
      var top = pageY - startY + lastTop  
      startX = pageX  
      startY = pageY  
      lastLeft = left  
      lastTop = top  
      ins.selectComponent('.movable').setStyle({  
        left: left + 'px',  
        top: top + 'px'  
      })  
        return false  
    }  
    module.exports = {  
        msg: 'Hello',  
      touchstart: touchstart,  
      touchmove: touchmove  
    }  
</script>  

<script>  
    export default {  
        data() {  
            return {  
            }  
        },  
        methods: {  
        }  
    }  
</script>  

<style>  
.area{  
    position: absolute;  
    width: 100%;  
    height: 100%;  
}  
.movable{  
    position: absolute;  
    width: 100px;  
    height: 100px;  
    left: 50px;  
    top: 50px;  
    color: white;  
    text-align: center;  
    line-height: 100px;  
    background-color: red;  
}  
</style>

操作步骤：

运行到手机滑动报错

预期结果：

不报错

实际结果：

TypeError: Cannot read properties of undefined (reading ‘setStyle’) at view.umd.min.js:1

bug描述：

使用wxs报错，返回信息undefined
TypeError: Cannot read properties of undefined (reading ‘setStyle’) at view.umd.min.js:1
使用代码为官方提供的案例

phonegap100 1楼•9 天前

问题确认，已加分，即将修复
临时处理方案：
npx patch-hbuilderx-plugins %HBuilderX Path%

zlyuanteng 2楼•9 天前

在使用 uni-app 开发时，renderjs 和 wxs 是两种不同的技术，分别用于不同的场景。如果你在运行过程中遇到报错，可能是由于以下原因导致的。以下是一些常见的错误及其解决方法：

1. RenderJS 报错

RenderJS 是 uni-app 中用于在 WebView 中执行 JavaScript 代码的技术。如果你在使用 RenderJS 时遇到报错，可能是以下原因：

1.1 未正确引入 RenderJS

确保你在 pages.json 中正确配置了 renderjs 的路径。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "renderjs": "renderjs.js"
      }
    }
  ]
}

1.2 RenderJS 代码错误

检查你的 renderjs.js 文件中的代码是否有语法错误或逻辑错误。RenderJS 中的代码是运行在 WebView 中的，因此它不能直接访问 uni-app 的 API。

1.3 RenderJS 与页面通信问题

RenderJS 和页面之间的通信是通过 postMessage 和 onMessage 进行的。确保你正确使用了这些方法。

// 在 RenderJS 中
window.postMessage({ type: 'event', data: 'Hello from RenderJS' });

// 在页面中
window.addEventListener('message', function(event) {
  if (event.data.type === 'event') {
    console.log(event.data.data);
  }
});

2. WXS 报错

WXS 是微信小程序中的一种脚本语言，用于在 WXML 中执行一些简单的逻辑。如果你在使用 WXS 时遇到报错，可能是以下原因：

2.1 WXS 语法错误

WXS 的语法与 JavaScript 类似，但有一些限制。确保你的 WXS 代码符合 WXS 的语法规范。

<wxs module="m1">
  var msg = "Hello WXS";
  module.exports = {
    msg: msg
  };
</wxs>
<view>{{m1.msg}}</view>

2.2 WXS 模块未正确导出

确保你在 WXS 模块中正确使用了 module.exports 来导出数据或方法。

2.3 WXS 与页面数据绑定问题

WXS 模块中的数据需要通过 module.exports 导出，并在 WXML 中通过 {{}} 绑定。确保你正确绑定了数据。

<wxs module="m1">
  var msg = "Hello WXS";
  module.exports = {
    msg: msg
  };
</wxml>
<view>{{m1.msg}}</view>