今天我們來個庖丁解牛。對於一個完整的組合組件，看看通過工具是如何輕松完成的。首先看看九宮格完整的樣子。 結構樹是這樣的。在結構樹中，我們可以看到WViewColumn下面有九個WViewRow。WViewColumn之上的我們可以不用管，這些是畫布上的內容，為了輔助設計用的。9個WViewRow ...

FlexBox布局中的變幻方式很多，我們繼續了解一個左-上下結構的布局分解 左邊結構樹中WViewRow下面有兩個WViewColumn。WViewRow是橫向排列，WViewColumn是縱向排列。第一個WViewColumn中放一個圖片，第二個放兩張圖片。如下圖展開的結構樹。 下面針對第二個 ...

FlexBox的align-content到底是什么鬼，我也搞了好半天才開發出來，目前工具中WViewRow組件使用了此屬性，WViewColumn中此屬性不起作用。下圖是justify-conten ...

工具截圖 此工具通過可視化操作進行布局，依據iphone6尺寸設置畫布，可以自動生成rpx和百分比的wxss。后續還會增加js代碼自動生成。工具中組件按照微信小程序開發規范進行了缺省設置，margin、padding、fontsize、fontfamily、color等屬性按照微信視覺一致規范定制 ...

小程序中一般很少大段落的文字，基本是4、5個字的主題、一行標題、一行摘要、兩行描述。顯示時超出部分用省略號代替。下面結合工具使用介紹一下文字排版的方法。先看效果圖。 工具中屬性設置如下圖：兩行文字屬性，限制行數=2，表示最多兩行，超出部分用省略號代替。 不限制行數屬性中限制行數=0，表示在小程序 ...

下圖是微信小程序官方要求字體規范 根據此要求小程序設計工具定制了符合規范的組件。如下圖 工具使用時，將左側組件拖拽到設計區域即可。字體大小和顏色都是按照規范設置的。在使用時根據微信要求在不同位置擺放即可。以下截圖是text組件使用范例 ...

在設計工具中，根據規范我們定義了大中小三種按鈕的尺寸大：720rpx *94rpx 圓角10px 字體18中：360rpx*70rpx 圓角8px 字體16 文字距離兩邊最小60小：120rpx*60rpx 圓角6px 字體13 文字距離兩邊最小30這些按鈕都放在工具的模板中，如下圖： 微信中 ...

工具中為小程序員們准備了符合微信開發規范的模板。之前帖子中介紹的規范都在模板中已經設計好了，可以直接復制粘貼使用。下圖中的樣式是從模板直接復制過來的。實際使用時只要更換為自己的圖片和文字即可。自動生成的wxml和wxss也可以直接使用。從而大大提高了開發效率。 下面是部分模板的展示： ...