微信小程式釋出，web端的外掛基本都用不了。接下來應該會有不少微信小程式外掛出現吧……

微信小程式其實是C/S思想，純web前端開發人員應該不大喜歡它的寫法。

前端開發最重要的就是佈局的編寫，C/S佈局最方便的應該就是“表格”佈局，參考.NET的WPF裡面Grid，我先簡單寫一個表格佈局的外掛。

wxgrid外掛含有wxgrid.js和wxgrid.wxss，兩個檔案。

主要函式

//初始化表格，設定幾行幾列
init(rowsCount,colsCount)
//設定行高（不設定的話，預設40高度）
//傳人height,index設定第index+1行的高度
//只傳人height設定所有行的高度
 

setRowsHeight(height,index)
//設定列寬（不設定的話，預設等寬）
//傳人width,index設定第index+1列的寬度“權重”
//只傳人height設定所有的的寬度“權重”
setColsWidth(width,index)
//將一維陣列轉換為二維陣列，儲存在data
wxgrid.data.add(key,arr);

使用示例：

簡單示例

index.js

var WXGrid = require('../../js/wxgrid.js')
var wxgrid = new WXGrid;
wxgrid.init(4,4);
wxgrid.setRowsHeight(100
 
,2);
wxgrid.setColsWidth(100,2);
var app = getApp()
Page({
  data: {
    wxgrid
  }
})

index.wxml

<view class="wxgrid">
    <view wx:for="{{wxgrid.rows}}" class="wxrow" style="height:{{item.height}}px;line-height:{{item.height}}px;">
        <view wx:for="{{wxgrid.cols}}" class="wxcol"
 
 style="width:{{item.width}}%">
            內容
        </view>
    </view>
</view>

index.wxss

@import "../../wxss/wxgrid.wxss";

效果如下：

資料呼叫

index.js

var WXGrid = require('../../js/wxgrid.js')
var wxgrid = new WXGrid;
wxgrid.init(2,3);
var classifies = [
  {name:"領聘1"},
  {name:"領聘2"},
  {name:"領聘3"},
  {name:"領聘4"},
  {name:"領聘5"},
  {name:"領聘6"}]
wxgrid.data.add("classifies",classifies);   //將一維陣列轉換為二維陣列
var app = getApp()
Page({
  data: {
    wxgrid
  }
})

index.wxml

<view class="wxgrid">
    <view wx:for="{{wxgrid.rows}}" wx:for-index="i" class="wxrow" style="height:{{item.height}}px;line-height:{{item.height}}px;">
        <view wx:for="{{wxgrid.cols}}" wx:for-index="j" class="wxcol" style="width:{{item.width}}%">
            {{wxgrid.data.classifies[i][j].name}}
        </view>
    </view>
</view>

index.wxss

@import "../../wxss/wxgrid.wxss";

效果如下：

（美團式）分類檢視

index.js

var WXGrid = require('../../js/wxgrid.js')
var wxgrid = new WXGrid;
wxgrid.init(2,4);
var img = "http://pic.qqtn.com/up/2016-9/20169281936395677.png";
var classifies = [
  {name:"領聘1",img},
  {name:"領聘2",img},
  {name:"領聘3",img},
  {name:"領聘4",img},
  {name:"領聘5",img},
  {name:"領聘6",img},
  {name:"領聘7",img},
  {name:"領聘8",img}]
wxgrid.data.add("classifies",classifies);
var app = getApp()
Page({
  data: {
    wxgrid
  }
})

index.wxml

<view class="wxgrid">
    <view wx:for="{{wxgrid.rows}}" wx:for-index="i" class="wxrow">
        <view wx:for="{{wxgrid.cols}}" wx:for-index="j" class="wxcol" style="width:{{item.width}}%;">
            <a class="wxclassify" href="#">
                <image class="wxclassify-img" mode="aspectFit" src="{{wxgrid.data.classifies[i][j].img}}"></image>
                {{wxgrid.data.classifies[i][j].name}}
            </a>
        </view>
    </view>
</view>

效果如下

外掛程式碼

https://git.coding.net/duangongbang/wxgrid.git