中用到的 weui 是从别的项目抠出来的,要正式开始用先下载一下官方的库和 Demo.
GitHub 地址
weui GitHub 主页上有相关使用说明,这里就不再赘述,稍微搬过来一点儿,先大体了解一下~
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.包含 button,cell,dialog, progress, toast,article,actionsheet,icon 等各式元素.
weui 小程序 Demo
weui 部分常用组件
各种样式的按钮:
button.png
常用表单输入:
input.png
各种列表样式:
List.png
最简单的开发方式 - copy
打开下载的 weui 的 Demo,找到自己需要的样式,将代码 copy 出来,粘贴到自己需要的地方就可以了~
抠代码. png
weui 使用实战
确认开发需求,下图是一个简单的设置页面的 UI.
下一步就是要实现这个效果,先从 weuiDemo 中找到相应的效果.
copy 对应的 wxml 代码
将这段代码粘贴到自己的设置页面中,修改一下文字
<view class="weui-cells weui-cells_after-title">
<navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
<view class="weui-cell__bd">cell standard</view>
<view class="weui-cell__ft weui-cell__ft_in-access"></view>
</navigator>
<navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
<view class="weui-cell__bd">cell standard</view>
<view class="weui-cell__ft weui-cell__ft_in-access"></view>
</navigator>
</view>
<view class="weui-cell__bd">问题反馈</view>
<view class="weui-cells weui-cells_after-title">
<navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
<view class="weui-cell__bd">关于我们</view>
<view class="weui-cell__ft weui-cell__ft_in-access"></view>
</navigator>
<navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
编译一下,就这么简单一句样式都没写,一个页面就写完了~
<view class="weui-cell__ft weui-cell__ft_in-access"></view>
</navigator>
</view>
与设计图还稍微有些不同,这就需要稍微修改一下 CSS 样式了.微信开发者工具提供了调试功能,对于新手来说,该样式比自己生写简单多了 -_-
来源: http://www.jianshu.com/p/ada94d3a3e86