陸金所小程式LUUI誕生之路
陸金所小程式LUUI框架是一套專門為陸金所小程式應用開發的ui框架，視覺與陸金所app保持一致，使得小程式實現風格的統一。包含button、dialog、 progress、 toast、article、icon、badge、picker等元件元素。
開發背景
隨著公司微信小程式大賽的開展，各個開發團隊在微信小程式生態圈上做了業務上的初探，各式各樣的小程式應運而生，視覺上風格迥異。也許未來小程式將會是另一個拓展方向，為了加快小程式應用的開發速度並在視覺上與陸金所app保持一致，陸金所小程式LUUI隨之誕生。
開發過程
LUUI框架主要基於微信小程式官方ui框架WeUI的基礎上進行開發，主要原因有兩點，一是WeUI目前包括的元件已經基本滿足我們的需求，二是這將加快我們的開發速度，事實上我們只需將WeUI的元件樣式修改為與陸金所app視覺一致即可。 我們針對每個元件都設計了新的視覺效果，並在整體上把風格的協調統一，然後根據視覺開發成目前的LUUI框架的元件風格。
如何使用
官方 DEMO
請大家微信搜尋：LuUI
LUUI 是一個樣式庫，核心檔案就是 weui.css，如果用於生產環境，建議使用官方提供的 CDN 或下載官方最新的 Releases 建議使用壓縮後的 weui.min.css 。 來個簡單的範例：
- 元件程式碼下載：（目前僅供陸金所使用，暫時不對外，但計劃開源，等開源了會公開給大家）
- 元件的wxml結構請看dist/example/下的元件
- 樣式檔案可直接引用dist/style/luui.wxss，或者單獨引用dist/style/widget下的元件的wxss
- luui.wxss放到小程式專案的根目錄下的style資料夾
樣式檔案app.wxss引入luui.wxss
@import 'style/luui.wxss';
元件
LUUI 的元件目前不是很多，但是也基本能滿足大部分需求了。 官方 Demo 裡面使用了前端路由，但這並不是 WeUI 的一部分，並且 Demo 內也寫了一些自定義的 CSS 樣式，也不是 WeUI 的一部分，所以我們使用的時候只有元件的樣式可以直接複製來，其他的比如路由、邏輯操作等都需要自己來搞定！ 下面來幾個元件的 Demo 方便需要的童鞋直接複製：
Button
按鈕可以使用a或者button標籤。wap上要觸發按鈕的active態，必須觸發ontouchstart事件，可以在body上加上ontouchstart=""全域性觸發。
按鈕常見的操作場景：確定、普通，分別對應class：btn_primary、btn-normal，每種場景都有自己的置灰態btn-primary-disable：
<view class="page"> <view class="page__hd"> <view class="page__title">Button</view> </view> <view class="page__bd page__bd_spacing"> <button class="luui-btn btn-primary ">按鈕primary</button> <button class="luui-btnbtn-primary-disable ">按鈕 primary disable</button> <button class="luui-btnbtn-normal ">按鈕normal</button> <button class="luui-btnbtn-normal-disable ">按鈕 normal disable</button> <view class="button-sp-area"> <button class="luui-btnbtn-plain-primary ">按鈕</button> <button class="luui-btnbtn-plain-primary-hl ">按鈕</button> <button class="luui-btnbtn-plain-primary-disable ">按鈕</button> <button class="luui-btnbtn-plain-normal ">按鈕</button> <button class="luui-btnbtn-plain-normal-hl ">按鈕</button> <button class="luui-btnbtn-plain-normal-disable ">按鈕</button> <button class="luui-btnmini-btn btn-primary" size="mini">按鈕</button> <button class="luui-btnmini-btn btn-normal" size="mini">按鈕</button> <button class="luui-btnmini-btnbtn-plain-primary-hl" size="mini">按鈕</button> </view> </view> </view>
九宮格
九宮格就是官方 Demo 首頁那個樣式，九宮格不一定非要是九個，幾個都可以的，看自己的需求了！
<view class="page">
<view class="page__hd">
<view class="page__title">Grid</view>
<view class="page__desc">九宮格</view>
</view>
<view class="page__bd">
<view class="luui-grids">
<block wx:for="{{grids}}" wx:key="*this">
<navigator url="" class="luui-grid" hover-class="luui-grid_active">
<image class="luui-grid__icon" src="../images/icon_tabbar.png" />
<view class="luui-grid__label">Grid</view>
</navigator>
</block>
</view>
</view>
</view>
luui_grids 是整個九宮格元件的樣式，luui_grid 是一個一個宮格，這裡只寫了兩個，你需要幾個就寫幾遍，luui_grid_icon 是一個宮格的圖示，luui_grid_label 就是圖示下面那個字咯！ 圖示最好使用向量圖，以保證在不同裝置上的清晰度，圖片的尺寸不需要自己寫上，LUUI 已經幫你搞定了
Toast
彈出層: 一個是彈出提示資料.
<view class="page"> <view class="page__hd"> <view class="page__title">Toast</view> <view class="page__desc">彈出式提示，採用小程式原生的toast</view> </view> <view class="page__bd"> <view class="luui-btn-area"> <button class="luui-btn btn-normal" bindtap="openToast">成功提示</button> <button class="luui-btn btn-normal" bindtap="openLoading">載入中提示</button> </view> </view> </view>
表單
這個就不寫程式碼了，去複製 Demo 裡面的程式碼就好了，不過有一點要注意：你會發現表單內可以輸入日期、時間和數字等，但這並不是 LUUI 的元件，而是使用 HTML 5 的 input 屬性，然後呼叫的瀏覽器自身的控制元件來輸入日期、時間等的。
日期：
<input type="date" class="luui_input">
時間：
<input type="datetime-local" class="luui_input">
數字：
<input type="number" class="luui_input">
未來規劃
目前的版本只是視覺效果上達到統一的初始版本，未來將會在元件的互動方面進行改進，逐步完善LUUI。
感謝
特別感謝陸金所網站產品部門的ued團隊的Megan，李夢園同學給予的視覺支援。