uni-app vue3 使用 wxs 编译为小程序报错

uni-app vue3 使用 wxs 编译为小程序报错

项目信息 详情
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 w10
HBuilderX类型 Alpha
HBuilderX版本号 3.3.2
第三方开发者工具版本号 1.0.5
基础库版本号 2.19.2
项目创建方式 HBuilderX

示例代码：

<script src="./wxs/wxs.wxs" module="wxsBiz" lang="wxs"></script>

操作步骤：

用示例方式引入wxs编译为微信小程序报Illegal tag name. Use '&lt;' to print '<'.

预期结果：

正常编译。

实际结果：

如果修改为&lt 微信小程序不报错，但是H5编译报错

bug描述：

用script引入wxs编译到微信小程序，控制台报错。Illegal tag name. Use '&lt;' to print '<'.


更多关于uni-app vue3 使用 wxs 编译为小程序报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

可以先不用src引用，采用内联的方式写wxs代码

更多关于uni-app vue3 使用 wxs 编译为小程序报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好的，我试下

可以更新到正式版，HBuilderX 3.3.3

更新到3.3.5又不好用了

回复 大水哥: 发新帖，提交测试工程

在 uni-app Vue3 项目中，<script module="wxsBiz" lang="wxs"> 这种写法在编译到微信小程序时确实会报 Illegal tag name 错误。这是因为 Vue3 的模板编译器会将 <script> 标签解析为 Vue 组件的一部分，而微信小程序的 WXS 模块引入语法与 Vue 的 <script> 标签冲突。

解决方案：

  1. 使用 wxs 标签替代 script 标签
    微信小程序原生支持 <wxs> 标签引入 WXS 模块，在 uni-app 中可以直接使用：

    <wxs src="./wxs/wxs.wxs" module="wxsBiz"></wxs>

    这种方式在编译到微信小程序时能正确识别，同时 uni-app 编译器也会处理其他平台的兼容性。

  2. 条件编译处理多端差异
    如果仍需兼容 H5 或其他平台，可以使用条件编译：

    <!-- #ifdef MP-WEIXIN -->
<wxs src="./wxs/wxs.wxs" module="wxsBiz"></wxs>
<!-- #endif -->
<!-- #ifdef H5 -->
<script module="wxsBiz" lang="wxs" src="./wxs/wxs.wxs"></script>
<!-- #endif -->
回到顶部