陆金所小程序LUUI诞生之路陆金所小程序LUUI框架是一套专门为陆金所小程序应用开发的ui框架，视觉与陆金所app保持一

陆金所小程序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-btn  btn-primary-disable ">按钮 primary disable</button>
 <button class="luui-btn  btn-normal ">按钮normal</button>
 <button class="luui-btn  btn-normal-disable ">按钮 normal disable</button>
 <view class="button-sp-area">
 <button class="luui-btn  btn-plain-primary ">按钮</button>
 <button class="luui-btn  btn-plain-primary-hl ">按钮</button>
 <button class="luui-btn  btn-plain-primary-disable ">按钮</button>
 <button class="luui-btn  btn-plain-normal ">按钮</button>
 <button class="luui-btn  btn-plain-normal-hl ">按钮</button>
 <button class="luui-btn  btn-plain-normal-disable ">按钮</button>
 <button class="luui-btn  mini-btn btn-primary" size="mini">按钮</button>
 <button class="luui-btn  mini-btn btn-normal" size="mini">按钮</button>
 <button class="luui-btn  mini-btn    btn-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，李梦园同学给予的视觉支持。