像微信官方文档一样使用input时:https://developers.weixin.qq.com/miniprogram/dev/component/keyboard-accessory.html
编译后input标签中不会包含keyboard-accessory标签。

- 发布:2024-12-10 11:20
- 更新:2025-05-15 19:45
- 阅读:266
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: Windows 10 专业版
HBuilderX类型: 正式
HBuilderX版本号: 4.36
第三方开发者工具版本号: 1.06.2312061
基础库版本号: 3.3.3
项目创建方式: HBuilderX
操作步骤:
预期结果:
input标签内应该包含keyboard-accessory标签
input标签内应该包含keyboard-accessory标签
实际结果:
keyboard-accessory标签被编译在input标签外
keyboard-accessory标签被编译在input标签外
bug描述:
uniapp vue3 vite,微信小程序,input组件使用微信官方提供的keyboard-accessory时,编译成小程序时标签嵌套错误,见附件图片。



DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信
更新:
问题已经定位,默认的 input 在 vue 中视为不允许嵌套组件,会导致该问题
感谢反馈,问题已定位,修复进展会同步到这里。

临时解决方案
替换 /Applications/HBuilderX/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-mp-compiler/dist/parserOptions.js 为 下面的代码
注意不能这样 <input type="text"> 否则会编译失败
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.parserOptions = void 0;
const compiler_core_1 = require("@vue/compiler-core");
const shared_1 = require("@vue/shared");
exports.parserOptions = {
isVoidTag(tag) {
if (tag === 'input') {
return false
}
return (0, shared_1.isVoidTag)(tag);
},
isNativeTag: (tag) => (0, shared_1.isHTMLTag)(tag) || (0, shared_1.isSVGTag)(tag),
isPreTag: (tag) => tag === 'pre',
// https://html.spec.whatwg.org/multipage/parsing.html#tree-construction-dispatcher
getNamespace(tag, parent) {
let ns = parent ? parent.ns : 0 /* DOMNamespaces.HTML */;
if (parent && ns === 2 /* DOMNamespaces.MATH_ML */) {
if (parent.tag === 'annotation-xml') {
if (tag === 'svg') {
return 1 /* DOMNamespaces.SVG */;
}
if (parent.props.some((a) => a.type === compiler_core_1.NodeTypes.ATTRIBUTE &&
a.name === 'encoding' &&
a.value != null &&
(a.value.content === 'text/html' ||
a.value.content === 'application/xhtml+xml'))) {
ns = 0 /* DOMNamespaces.HTML */;
}
}
else if (/^m(?:[ions]|text)$/.test(parent.tag) &&
tag !== 'mglyph' &&
tag !== 'malignmark') {
ns = 0 /* DOMNamespaces.HTML */;
}
}
else if (parent && ns === 1 /* DOMNamespaces.SVG */) {
if (parent.tag === 'foreignObject' ||
parent.tag === 'desc' ||
parent.tag === 'title') {
ns = 0 /* DOMNamespaces.HTML */;
}
}
if (ns === 0 /* DOMNamespaces.HTML */) {
if (tag === 'svg') {
return 1 /* DOMNamespaces.SVG */;
}
if (tag === 'math') {
return 2 /* DOMNamespaces.MATH_ML */;
}
}
return ns;
},
parseMode: 'html',
};