search

dcloudio / uni-app

A cross-platform framework using Vue.js
https://uniapp.dcloud.io
Apache License 2.0
40.15k stars 3.64k forks source link

对组件属性传空字符串，微信小程序编译出来的结果不对 #2321

Open mkanako opened 3 years ago

mkanako commented 3 years ago

问题描述 对组件属性传空字符串，微信小程序编译出来的结果不对

复现步骤 [复现问题的步骤] 以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>

[或者可以直接贴源代码]

预期结果 [使用简洁清晰的语言描述你希望生效的预期结果]

实际结果 [这里请贴上你的报错截图或文字]

系统信息:

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



**补充信息**
[可选]
[根据你的分析，出现这个问题的原因可能在哪里？]
fxy060608 commented 3 years ago

在微信小程序上，如果一个组件属性是boolean类型，当它等于一个空字符串时，会被认为是false，这个行为与标准的h5是相反的， 为了校正微信小程序上的这个行为，编译器会把disabled=""这样的写法，编译为disabled（目前编译器无法区分该属性是boolean类型，还是字符串类型），这样就引发了上述问题，后续会寻找更好的解决方案。 举例：

<button disabled>小程序，HTML5均被禁用</button>
<button disabled="">小程序上未被禁用，HTML5被禁用</button>
mkanako commented 3 years ago

@fxy060608 原来如此，感谢解答

我想编译器能不能不做这些额外处理呀，完全交由开发者控制处理

fxy060608 commented 3 years ago

@fxy060608 原来如此，感谢解答

我想编译器能不能不做这些额外处理呀，完全交由开发者控制处理

稍后会优化下该处理逻辑，如果直接移除该逻辑的话，可能会影响已有的开发者工程。