使用Coolsite360進行微信小程序UI的設計開發，需要完成如下準備工作：

下載安裝微信小程序開發工具

下載地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

安裝完成打開后，是如下圖所示，需要在自己的公眾號中綁定開發者信息，才可以掃描打開進入

了解微信小程序組件及樣式規范

微信小程序采用 進行樣式設計，微信官方對此說明如下：

WXSS(WeiXin Style Sheets)是一套樣式語言，用于描述 WXML 的組件樣式。

WXSS 用來決定 WXML 的組件應該怎么顯示。

為了適應廣大的前端開發者，我們的 WXSS 具有 CSS 大部分特性。 同時為了更適合開發微信小程序，我們對 CSS 進行了擴充以及修改。

與 CSS 相比我們擴展的特性有：

• 尺寸單位

• 樣式導入

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxss.html?t=20161102

熟練掌握CSS樣式布局基本概念

• HTML / CSS 基礎教程，學習掌握最基本的網頁知識
  http://www.w3school.com.cn/html/index.asp

• CSS布局基礎教程，沒有布局、就沒有設計
  http://zh.learnlayout.com/toc.html

• 網易云課堂HTML/CSS視頻教程
  http://study.163.com/category/html-and-css

• CSS 中 Flex布局介紹
  http://www.w3cplus.com/css3/css3-flexbox-layout.html