浅说wepy 原生微信小程序开发和uniapp微信小程序开发中的style和class的动态绑定问题

徐飞不会喝酒

已于 2022-09-09 11:20:54 修改

阅读量1.2k

点赞数

分类专栏：微信小程序文章标签：微信小程序前端 javascript

于 2022-06-29 17:49:36 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_61243175/article/details/125498265

版权

微信小程序专栏收录该内容

14 篇文章

订阅专栏

本文分享了在公司40W用户的小程序项目重构过程中，从wepy框架迁移到uniapp的两个主要问题：样式绑定写法的转换和repeat标签的替换。在uniapp中，样式绑定使用了更灵活的:style和:class语法，而v-for循环则需要调整为vue的语法，注意避免渲染undefined的问题。这个过程涉及到样式调整和代码优化，对于正在进行小程序迁移的开发者具有参考价值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近公司决定对公司最重要的小程序（约40W用户）进行项目重构，换掉原有的 wepy 框架改成uniapp 形式方便后续做抖音小程序之类的。以下是我遇到的部分小问题，希望可以帮助成长路上迷茫的你！

问题一：样式绑定写法

wepy 原生微信小程序：

<view class="top_title" style="padding-top: {{top}}px;">个人中心</view>

<view bindtap="tabClick({{idx}})" class="scroll-view-item {{idx== index ? 'active' : ''}} {{employeeday.busy ? 'busy' : ''}}" >

uniapp微信小程序：

<view class="top_title" :style="{'padding-top': top + 'px','padding-bottom':(showDiv ? '15px' : '')}" >个人中心</view>

<view bindtap="tabClick({{idx}})" :class="['scroll-view-item',idx==index ? 'active' : '' , employeeday.busy ? 'busy' : '']" >

问题二：repeat 标签的替换

wepy 原生微信小程序：

 <repeat for="{{employeedays[index].houres}}"  index="idxChild"  key="{{hour.id}}"  item="hour">
    <view class="time_one">
       <view wx:if="{{hour.disable== 1}}" class="time orange">{{hour.time}}</view>
       <view wx:if="{{hour.disable== 0}}" class="time disabled" >{{hour.time}</view>
       <view wx:if="{{hour.disable== 3}}" class="time active" @tap="checkDate({{idxChild}},{{index}})">{{hour.time}}</view>
       <view wx:if="{{hour.disable== 2}}" class="time" @tap="checkDate({{idxChild}},{{index}})">{{hour.time}}</view>
       <view wx:if="{{hour.disable== 1 }}" class="time_label">已约满</view>
       <view wx:if="{{hour.disable== 0 }}" class="time_label">不可约</view>
    </view>
</repeat>

因为 repeat 标签是 wepy 框架的，所以重构以后不得不更换。这会导致 v-for 循环的内容样式错位，所以写法会有一点改变，相应的样式也需要做一些调整，关于样式这里就不和大家过多说明了。

uniapp微信小程序：

<view v-for="(hour,idxChild) in employeedays[index].houres" :key="hour.id"  class="time_one">
	<view v-if="hour.disable== 0" class="time disabled" >{{hour.time}}</view>
	<view v-if="hour.disable== 3" class="time active" @tap="checkDate(idxChild,index)">{{hour.time}}</view>
	<view v-if="hour.disable== 2" class="time" @tap="checkDate(idxChild,index)">{{hour.time}}</view>
	<view v-if="hour.disable== 1" class="time orange">{{hour.time}}</view>
	<view v-if="hour.disable== 1" class="time_label">已约满</view>
	<view v-if="hour.disable== 0" class="time_label">不可约</view>
</view>

特别注意：换成 v-for 以后不要习惯性的直接 item in XXX，看看差值里面的东西再来决定item的名称。否则会渲染出很多 undefined !