uni-app 使用 vite+vue3 开发时 微信小程序运行不支持 v-bind 和 v-html 问题严重

uni-app 使用 vite+vue3 开发时 微信小程序运行不支持 v-bind 和 v-html 问题严重

项目 内容
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 3.3.5
第三方开发者工具版本号 1.05.2112301
基础库版本号 2.21.3
项目创建方式 HBuilderX

示例代码：

[plugin:vite:vue] unknown directive{"type":7,"name":"html","exp":{"type":4,"loc":{"source":"","start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":1,"offset":0}},"content":"e","isStatic":false,"constType":0},"modifiers":[],"loc":{"start":{"column":11,"line":9,"offset":428},"end":{"column":34,"line":9,"offset":451},"source":"v-html=\"state.thisHtml\""}}

操作步骤：

<view class="introduce" id="introduce-main" :style="{minHeight: deviceHeight + 'px'}">  
    <view v-html="state.thisHtml" class="intruction-content" v-show="state.selected === 'intruction'"></view>  
    <view v-html="state.thisParam" class="param-content" v-show="state.selected === 'param'"></view>  
</view>

更多关于uni-app 使用 vite+vue3 开发时 微信小程序运行不支持 v-bind 和 v-html 问题严重的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

目前使用rich-view可以解决v-html的问题，希望官方早点支持

更多关于uni-app 使用 vite+vue3 开发时 微信小程序运行不支持 v-bind 和 v-html 问题严重的实战教程也可以访问 https://www.itying.com/category-93-b0.html


稍后v-html会自动编译为rich-text节点

HBuilderX alpha 3.4.0+ 已修复

啥时候上稳定版？

v-bind=“xxx” 这写法支持？

HBuilder X 3.4.3-alpha 自定义组件支持 v-bind="" 语法

我HBuilder X都更新到3.7.3.20230223了，还是不支持。我专门新建了demo项目来测试，微信小程序还是不支持v-bind=”xxx“语法，依然提示：[plugin:vite:vue] v-bind="" is not supported，你有什么头绪吗

您好，这个问题的根源在于微信小程序本身不支持 v-html 指令。小程序没有 DOM 和 innerHTML 的概念，无法直接通过指令渲染 HTML 字符串，uni-app 在小程序端编译时也不会自动将 v-html 转换为小程序支持的组件（如 rich-text）。

当前报错 unknown directive { "name":"html" } 是 Vite 的 Vue 编译器在编译阶段直接报错，说明 @dcloudio/uni-app 的 Vue3 插件尚未处理这个指令的降级转换。而 v-bind（即 :style、:class 等）在小程序中本身是支持的（实际上转换为小程序的 data 绑定），所以问题核心集中在 v-html 的使用上。

解决方案：

  • 将 v-html 替换为 rich-text 组件，将 HTML 字符串绑定到 nodes 属性上。
  • 例如：
    <rich-text :nodes="state.thisHtml"></rich-text>
回到顶部