uni-app vue3 wxs无法正常运行

uni-app vue3 wxs无法正常运行

开发环境 版本号 项目创建方式
Windows win11 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.2.12

手机系统：Android

手机系统版本号：Android 11

手机厂商：realme

手机机型：gt neo

页面类型：vue

打包方式：云端

示例代码：

<view class="time_play_length">  
    <view>{{appconfig.handleViewNum(item)}}次播放</view>                     
</view>
```

操作步骤：
- 如上所属

预期结果：
- 如上所属

实际结果：
- 如上所属

bug描述：
- 项目代码之前是用vue2编译调试的，里面用到了wxs，编译到小程序和app均能正常运行，但是使用最新的vue3编译运行，wxs编译运行失败，无法解析和运行页面代码；

更多关于uni-app vue3 wxs无法正常运行的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

可以提交一个测试工程

更多关于uni-app vue3 wxs无法正常运行的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 的 Vue 3 版本中，WXS 确实存在兼容性问题。Vue 3 版本对 WXS 的支持与 Vue 2 不同，可能导致原有代码无法正常运行。目前，Vue 3 版本对 WXS 的支持尚不完善，尤其是在 App 端。

建议的解决方案：

  1. 将 WXS 中的逻辑迁移到 Vue 组件的 methods 或 computed 中，使用标准的 JavaScript/TypeScript 实现。
  2. 如果必须使用 WXS，可以考虑暂时回退到 Vue 2 版本进行开发，等待官方后续对 Vue 3 的 WXS 支持完善。

示例代码修改： 将 appconfig.handleViewNum(item) 改为在 Vue 组件中定义的方法，例如：

// 在 Vue 组件的 methods 中定义方法
methods: {
  handleViewNum(item) {
    // 实现原有的 WXS 逻辑
    return item.viewCount;
  }
}

然后在模板中直接调用：

<view class="time_play_length">  
    <view>{{ handleViewNum(item) }}次播放</view>                     
</view>
回到顶部