跳至主要內容

uni-app的这个“地雷”坑，我踩了

guodongAndroid大约 4 分钟

距离上次的 uni-app-x 文章已有一月有余，在此期间笔者又“拥抱”了 uni-app，使用 uni-app 开发微信小程序。

与使用 uni-app-x 相比个人感觉 uni-app 在开发体验上更流畅，更舒服一些，这可能得益于 uni-app 相对成熟，且与标准的前端开发相差不大。至少在 IDE 的选择上比较自由，比如可以选择 VSCode 或者 WebStorm，笔者习惯了 Jetbrains 家的 IDE，自然选择了 WebStorm。

虽说 uni-app 相对成熟，但是笔者还是踩到了“地雷式”的巨坑，下面且听我娓娓道来。

附：配套代码open in new window。

什么样的坑

先描述下是什么样的坑。简单来说，我有一个动态的 style 样式，伪代码如下：

<view v-for="(c, ci) in 10" :key="ci" :style="{ height: `${50}px` }">
    {{ c }}
</view>

理论上编译到小程序应该如下：

<view style="height: 50px">1</view>

但是，实际上编译后却是：

<view style="height: [object Object]">1</view>

最后导致样式没有生效。

着手排查

先网上搜索一番，基本上千篇一律的都是 uni-app 编程成微信小程序时 style 不支持对象的形式，需要在对象外包一层数组，需要做如下修改：

<view :style="[{ height: `${50}px` }]"></view>

但是，这种方式对我无效。

然后开始了漫长的排查之旅，对比之前的项目是使用的对象形式对动态 style 进行的赋值也没有遇到这样问题，最后各种尝试至深夜一点多也没有解决，浪费我大好的“青春”。

没有解决问题实在是不甘心啊，于是第二天上午继续排查，观察 git 提交记录，没有发现什么异常的代码，然后开始拉新分支一个一个的 commit 回滚代码，然后再把回滚的代码手敲一遍再一点点的编译调试对比，这真的是浪费时间与精力的一件事，最终也是功夫不负有心人，终于锁定了一个 commit 提交，在这个 commit 后出现了上述问题。

为什么要回滚代码？因为在之前的代码中都是以对象形式为动态 style 赋值的。

现在可以着重的“攻击”这个 commit 上的代码了，仿佛沉溺在水中马上就要浮出水面可以呼一口气。这个 commit 上的代码不是很多，其中就包含上述的伪代码。最后，经过仔细的审查这个 commit 上的代码也没有发现什么异常的代码逻辑，好像突然没有了力气又慢慢沉入了水底。

反正是经过了各种尝试，其中历程真是一把鼻涕一把泪，不提也罢。

也不知是脑子不好使还是最后的倔强，突发奇想的修改了上述伪代码中 v-for 语句中的 c 变量命名：

<view v-for="(a, ci) in 10" :key="ci" :style="{ height: `${50}px` }">
    {{ a }}
</view>

妈耶，奇迹发生了，动态 style 编译后正常了，样式生效了。随后又测试了一些其他的命名，如：A,b,B,C,d,D,i,I，这些都编译后正常，唯独命名为小写的 c 后，编译后不正常还是 [object Object] 的形式。

如果，现在，你迫不及待的去新建个 uni-app 项目来验证笔者所言是否属实，那么不好意思，你大概率不会踩到这个坑。

但是，如果你在动态 style 中再多加一个 css 属性，代码如下：

<view
    v-for="(c, ci) in 5"
    :key="ci"
    :style="{
        height: `${50}px`,
        marginTop: `${10}px`,
    }"
>
    {{ c }}
</view>

那么你会发现第一个 height 属性生效了，然而新加的 marginTop 属性却是 [object Object]。

如果你再多加几个属性，你会发现它们都生效了，唯独第二个属性是失效的。

如果你在这个问题 view 代码前面使用过 v-for 且使用过动态 style 且动态 style 中有字符串模板，那么你会发现问题 view 变正常了。

总结

本文记录了笔者排查 uni-app 动态 style 失效的心路历程，虽然问题得到了解决，但是没有深入研究产生此问题的本质原因，总结起来就是菜，还得多练。

深夜对着星空感叹，这种坑也能被我踩到，真是时也命也。

guodongAndroid@2016-2024