问题描述
对组件属性传空字符串,微信小程序编译出来的结果不对
复现步骤
[复现问题的步骤]
以uni-card组件为例
<uni-card
title="Dcloud"
mode="title"
:is-shadow="true"
thumbnail="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg"
extra=""
note=""
>
那是一个秋意盎然、金风送爽的日子,我和父母一起来到了位于上师大旁的康健园.一踏进公园,一股浓郁的桂香扑鼻而来,泌人心脾,让我心旷神怡,只见一朵朵开得正烈的金色桂花,迎风而立,仿佛在向我招手.我们追着这桂香,走进了清幽的公园.
</uni-card>
extra和note传的是空字符串,然后微信小程序编译出来的结果是
<uni-card
vue-id="8dd740cc-1"
title="Dcloud"
mode="title"
is-shadow="{{true}}"
thumbnail="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg"
extra
note
bind:__l="__l" vue-slots="{{['default']}}">那是一个秋意盎然、金风送爽的日子,我和父母一起来到了位于上师大旁的康健园.一踏进公园,一股浓郁的桂香扑鼻而来,泌人心脾,让我心旷神怡,只见一朵朵开得正烈的金色桂花,迎风而立,仿佛在向我招手.我们追着这桂香,走进了清幽的公园.</uni-card>
这是错误的结果,最终在页面上extra和note会被显示为“true”字符串
正确的结果应该是
<uni-card
vue-id="8dd740cc-1"
title="Dcloud"
mode="title"
is-shadow="{{true}}"
thumbnail="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg"
extra="{{''}}"
note="{{''}}"
bind:__l="__l" vue-slots="{{['default']}}">那是一个秋意盎然、金风送爽的日子,我和父母一起来到了位于上师大旁的康健园.一踏进公园,一股浓郁的桂香扑鼻而来,泌人心脾,让我心旷神怡,只见一朵朵开得正烈的金色桂花,迎风而立,仿佛在向我招手.我们追着这桂香,走进了清幽的公园.</uni-card>
[或者可以直接贴源代码]
预期结果
[使用简洁清晰的语言描述你希望生效的预期结果]
实际结果
[这里请贴上你的报错截图或文字]
系统信息:
- 发行平台: 微信小程序
- uni-app版本
uni-app v2.9.8
uni-app cli v2.0.0-29820201110001
Environment Info:
System:
OS: macOS 10.14.5
CPU: (4) x64 Intel(R) Core(TM) i5-5287U CPU @ 2.90GHz
Binaries:
Node: 15.3.0 - /usr/local/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 7.0.14 - /usr/local/bin/npm
Browsers:
Chrome: 87.0.4280.67
Firefox: 83.0
Safari: 12.1.1
npmPackages:
@dcloudio/types: * => 2.0.18
@dcloudio/uni-app-plus: ^2.0.0-29820201110001 => 2.0.0-29820201110001
@dcloudio/uni-app-plus-nvue: 0.0.1
@dcloudio/uni-app-plus-nvue-v8: 0.0.1
@dcloudio/uni-automator: ^2.0.0-29820201110001 => 2.0.0-29820201110001
@dcloudio/uni-cli-shared: ^2.0.0-29820201110001 => 2.0.0-29820201110001
@dcloudio/uni-h5: ^2.0.0-29820201110001 => 2.0.0-29820201110001
@dcloudio/uni-helper-json: * => 1.0.9
@dcloudio/uni-migration: ^2.0.0-29820201110001 => 2.0.0-29820201110001
@dcloudio/uni-mp-360: ^2.0.0-29820201110001 => 2.0.0-29820201110001
@dcloudio/uni-mp-alipay: ^2.0.0-29820201110001 => 2.0.0-29820201110001
@dcloudio/uni-mp-baidu: ^2.0.0-29820201110001 => 2.0.0-29820201110001
@dcloudio/uni-mp-qq: ^2.0.0-29820201110001 => 2.0.0-29820201110001
@dcloudio/uni-mp-toutiao: ^2.0.0-29820201110001 => 2.0.0-29820201110001
@dcloudio/uni-mp-vue: ^2.0.0-29820201110001 => 2.0.0-alpha-29920201130006
@dcloudio/uni-mp-weixin: ^2.0.0-29820201110001 => 2.0.0-29820201110001
@dcloudio/uni-quickapp-native: ^2.0.0-29820201110001 => 2.0.0-alpha-29920201130006
@dcloudio/uni-quickapp-webview: ^2.0.0-29820201110001 => 2.0.0-29820201110001
@dcloudio/uni-stat: ^2.0.0-29820201110001 => 2.0.0-29820201110001
@dcloudio/uni-template-compiler: ^2.0.0-29820201110001 => 2.0.0-29820201110001
@dcloudio/uni-ui: ^1.2.8 => 1.2.8
@dcloudio/vue-cli-plugin-hbuilderx: ^2.0.0-29820201110001 => 2.0.0-29820201110001
@dcloudio/vue-cli-plugin-uni: ^2.0.0-29820201110001 => 2.0.0-29820201110001
@dcloudio/vue-cli-plugin-uni-optimize: ^2.0.0-29820201110001 => 2.0.0-29820201110001
@dcloudio/webpack-uni-mp-loader: ^2.0.0-29820201110001 => 2.0.0-29820201110001
@dcloudio/webpack-uni-nvue-loader: 0.0.1
@dcloudio/webpack-uni-pages-loader: ^2.0.0-29820201110001 => 2.0.0-29820201110001
@hap-toolkit/dsl-vue: 0.6.13
@vue/babel-helper-vue-jsx-merge-props: 1.2.1
@vue/babel-helper-vue-transform-on: 1.0.0-rc.2
@vue/babel-plugin-jsx: 1.0.0-rc.3
@vue/babel-plugin-transform-vue-jsx: 1.2.1
@vue/babel-preset-app: 4.5.9
@vue/babel-preset-jsx: 1.2.4
@vue/babel-sugar-composition-api-inject-h: 1.2.1
@vue/babel-sugar-composition-api-render-instance: 1.2.4
@vue/babel-sugar-functional-vue: 1.2.2
@vue/babel-sugar-inject-h: 1.2.2
@vue/babel-sugar-v-model: 1.2.3
@vue/babel-sugar-v-on: 1.2.3
@vue/cli-overlay: 4.5.9
@vue/cli-plugin-babel: ~4.5.0 => 4.5.9
@vue/cli-plugin-router: 4.5.9
@vue/cli-plugin-vuex: 4.5.9
@vue/cli-service: ~4.5.0 => 4.5.9
@vue/cli-shared-utils: 4.5.9
@vue/component-compiler-utils: 3.2.0 (3.2.0)
@vue/eslint-config-standard: ^5.1.2 => 5.1.2
@vue/preload-webpack-plugin: 1.1.2
@vue/shared: ^3.0.0 => 3.0.2
@vue/web-component-wrapper: 1.2.0
eslint-plugin-vue: ^7.1.0 => 7.1.0
mpvue-page-factory: 1.0.1
mpvue-template-compiler: 1.0.13
uni-h5-vue: 2.6.10
uni-mp-vue: 2.6.10
vue: ^2.6.11 => 2.6.12
vue-eslint-parser: 7.1.1
vue-hot-reload-api: 2.3.4
vue-loader: 15.9.5 (16.1.0, 15.9.5)
vue-router: 3.0.1
vue-style-loader: 4.1.2
vue-template-compiler: ^2.6.11 => 2.6.12 (2.6.12)
vue-template-es2015-compiler: 1.9.1
vuex: ^3.2.0 => 3.6.0
npmGlobalPackages:
@vue/cli: 4.5.9
补充信息
[可选]
[根据你的分析,出现这个问题的原因可能在哪里?]
3条答案
按热度按时间ki1q1bka1#
在微信小程序上,如果一个组件属性是boolean类型,当它等于一个空字符串时,会被认为是false,这个行为与标准的h5是相反的,
为了校正微信小程序上的这个行为,编译器会把disabled=""这样的写法,编译为disabled(目前编译器无法区分该属性是boolean类型,还是字符串类型),这样就引发了上述问题,后续会寻找更好的解决方案。
举例:
weylhg0b2#
@fxy060608 原来如此,感谢解答
我想编译器能不能不做这些额外处理呀,完全交由开发者控制处理
xlpyo6sf3#
@fxy060608 原来如此,感谢解答
我想编译器能不能不做这些额外处理呀,完全交由开发者控制处理
稍后会优化下该处理逻辑,如果直接移除该逻辑的话,可能会影响已有的开发者工程。