4***@qq.com
4***@qq.com
  • 发布:2024-12-10 11:20
  • 更新:2025-05-15 19:45
  • 阅读:266

【报Bug】微信小程序使用input组件的<keyboard-accessory>编译出错

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 10 专业版

HBuilderX类型: 正式

HBuilderX版本号: 4.36

第三方开发者工具版本号: 1.06.2312061

基础库版本号: 3.3.3

项目创建方式: HBuilderX

操作步骤:

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

预期结果:

input标签内应该包含keyboard-accessory标签

实际结果:

keyboard-accessory标签被编译在input标签外

bug描述:

uniapp vue3 vite,微信小程序,input组件使用微信官方提供的keyboard-accessory时,编译成小程序时标签嵌套错误,见附件图片。

2024-12-10 11:20 负责人:DCloud_UNI_FengXY 分享
已邀请:
DCloud_UNI_OttoJi

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信

更新:
问题已经定位,默认的 input 在 vue 中视为不允许嵌套组件,会导致该问题

感谢反馈,问题已定位,修复进展会同步到这里。

DCloud_UNI_JBB

DCloud_UNI_JBB

临时解决方案

替换 /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',  
};

要回复问题请先登录注册