我使用wxfor 优化了项目首页，项目首页使用的九宫格布局，格子使用navigator，一共9个格子，原有代码布局如下：

 <view class="page__bd">
    <view class="weui-cell">功能列表</view>
    <view class="weui-grids">
      <!--9个项目-->
      <navigator class="weui-grid" aria-role="button" url="item1/index">
        <view class="weui-grid__icon">
          <image src="../images/fire.png" alt></image>
        </view>
        <view class="weui-grid__label">项目1</view>
      </navigator>
      <navigator class="weui-grid" aria-role="button" url="item2/index">
        <view class="weui-grid__icon">
          <image src="../images/fire.png" alt></image>
        </view>
        <view class="weui-grid__label">项目2</view>
      </navigator>
      ...
    </view>
  </view>

现在使用wxfor优化后，代码布局如下：

<view class="page__bd">
    <view class="weui-cell">功能列表</view>
    <view class="weui-grids"> 
        <block wx:for="{{homeItemList}}" wx:key="url">
                <navigator class="weui-grid" aria-role="button" url="{{item.url}}">
                  <view class="weui-grid__icon">
                    <image src="{{item.imgSrc}}" alt></image>
                  </view>
                  <view class="weui-grid__label">{{item.title}}</view>
                </navigator>
          </block>
         </view>
        </view>

需要在js文件中添加数据源，

homeItemList:[{
      url:'item1/index',
      imgSrc:'../images/fire.png',
      title:'项目1',
    },{
      url:'item2/index',
      imgSrc:'../images/fire.png',
      title:'项目2',
    },...]

这样做的好处：1，优化之后，index.html一下子清爽了。2，可以将这个homeItemList从后台拉取，做成动态，这样更新顺序，名称啊，就不需要小程序重新发版了。