uni-app 对组件属性传空字符串,微信小程序编译出来的结果不对

mw3dktmi  于 5个月前  发布在  uni-app
关注(0)|答案(3)|浏览(58)

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

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

补充信息
[可选]
[根据你的分析,出现这个问题的原因可能在哪里?]

ki1q1bka

ki1q1bka1#

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

<button disabled>小程序,HTML5均被禁用</button>
<button disabled="">小程序上未被禁用,HTML5被禁用</button>
weylhg0b

weylhg0b2#

@fxy060608 原来如此,感谢解答

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

xlpyo6sf

xlpyo6sf3#

@fxy060608 原来如此,感谢解答

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

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

相关问题