[已解决]微信小程序页面布局代码如何改进为循环渲染

@xmz

<view class="content">
    <view class="screen">
        {{screenData}}
    </view>
  <view  class="btnGroup">
    <view class="item orange" bindtap="clickButton" id="{{id1}}">退格</view>
    <view class="item orange" bindtap="clickButton"  id="{{id2}}">清屏</view>
    <view class="item orange" bindtap="clickButton"  id="{{id3}}">+/-</view>
    <view class="item orange" bindtap="clickButton"  id="{{id4}}">+</view>
  </view>

  <view  class="btnGroup">
    <view class="item blue" bindtap="clickButton"  id="{{id5}}">9</view>
    <view class="item blue" bindtap="clickButton"  id="{{id6}}">8</view>
    <view class="item blue" bindtap="clickButton"  id="{{id7}}">7</view>
    <view class="item orange" bindtap="clickButton"  id="{{id8}}">-</view>
  </view>

  <view  class="btnGroup">
    <view class="item blue" bindtap="clickButton"  id="{{id9}}">6</view>
    <view class="item blue" bindtap="clickButton"  id="{{id10}}">5</view>
    <view class="item blue" bindtap="clickButton"  id="{{id11}}">4</view>
    <view class="item orange" bindtap="clickButton"  id="{{id12}}">×</view>
  </view>
  
  <view  class="btnGroup">
    <view class="item blue" bindtap="clickButton"  id="{{id13}}">3</view>
    <view class="item blue" bindtap="clickButton"  id="{{id14}}">2</view>
    <view class="item blue" bindtap="clickButton"  id="{{id15}}">1</view>
    <view class="item orange" bindtap="clickButton"  id="{{id16}}">÷</view>
  </view>
  
  <view  class="btnGroup">
    <view class="item blue" bindtap="clickButton"  id="{{id17}}">0</view>
    <view class="item blue" bindtap="clickButton"  id="{{id18}}">.</view>
    <view class="item blue" bindtap="history"  id="{{id19}}">历史</view>
    <view class="item orange" bindtap="clickButton"  id="{{id20}}">=</view>
  </view>
</view>

最佳答案

月排行榜 / 总排行榜

不二如是

2023-6-30 16:20:17

可以这样对该代码进行优化:

1. 抽离计算器按钮的数据到一个数组中:

const buttons = [
  { id: id1, text: '退格' },
  { id: id2, text: '清屏' },
  // ...
]

2. 在data中定义这个数组:

data: {
  buttons: buttons 
}

3. 使用循环渲染按钮:

<view class="btnGroup">
  <view 
    class="item orange" 
    bindtap="clickButton" 
    id="{{item.id}}"
    wx:for="{{buttons}}" 
    wx:for-item="item"
  >
    {{item.text}}
  </view>
</view> 

4. 为了区分不同行的按钮,可以在buttons数组中增加一个type字段,表示颜色,然后在wx:for循环中通过这个字段设置class:

const buttons = [
  { id: id1, text: '退格', type: 'orange' },
  { id: id2, text: '清屏', type: 'orange' },
  // ...
] 

<view 
  class="item {{item.type}}" 
  bindtap="clickButton" 
  id="{{item.id}}"
  wx:for="{{buttons}}" 
  wx:for-item="item"
>
  {{item.text}}
</view>

5. 可以把屏幕数据screenData也抽离到data中,通过变量渲染:

<view class="screen">
  {{screen}} 
</view>

data: {
  screen: ""
}

这样,通过循环渲染和变量,可以使这个计算器代码更加结构清晰,维护更容易。
这是使用微信小程序进行优化和重构的一个很好的示例。可以运用的技巧有:

1. 数据抽离到数组
2. 循环渲染
3. 通过变量渲染
4. 添加分类字段,并在循环渲染中使用

跳转到最佳答案楼层

@xmz

这是计算器的微信小程序，想知道如何对其代码优化，实现循环渲染

不二如是

可以这样对该代码进行优化:

1. 抽离计算器按钮的数据到一个数组中:

const buttons = [
  { id: id1, text: '退格' },
  { id: id2, text: '清屏' },
  // ...
]

2. 在data中定义这个数组:

data: {
  buttons: buttons 
}

3. 使用循环渲染按钮:

<view class="btnGroup">
  <view 
    class="item orange" 
    bindtap="clickButton" 
    id="{{item.id}}"
    wx:for="{{buttons}}" 
    wx:for-item="item"
  >
    {{item.text}}
  </view>
</view> 

4. 为了区分不同行的按钮,可以在buttons数组中增加一个type字段,表示颜色,然后在wx:for循环中通过这个字段设置class:

const buttons = [
  { id: id1, text: '退格', type: 'orange' },
  { id: id2, text: '清屏', type: 'orange' },
  // ...
] 

<view 
  class="item {{item.type}}" 
  bindtap="clickButton" 
  id="{{item.id}}"
  wx:for="{{buttons}}" 
  wx:for-item="item"
>
  {{item.text}}
</view>

5. 可以把屏幕数据screenData也抽离到data中,通过变量渲染:

<view class="screen">
  {{screen}} 
</view>

data: {
  screen: ""
}

这样,通过循环渲染和变量,可以使这个计算器代码更加结构清晰,维护更容易。
这是使用微信小程序进行优化和重构的一个很好的示例。可以运用的技巧有:

1. 数据抽离到数组
2. 循环渲染
3. 通过变量渲染
4. 添加分类字段,并在循环渲染中使用