微信公众号开发教程[016]-网页开发-样式库

        这个比较简单,就是微信自己弄的一套css,风格和微信自己的相似.使用很简单.

1).从https://nodejs.org/en/上下载node-v4.4.7-x86.msi,安装然后,打开"Node.js command prompt",在它的命令行下输入:npm install --save weui

2).然后会下载weui,只需要在页面中引入 dist/style/weui.css或者dist/style/weui.min.css其中之一即可.例如:

 

<link rel="stylesheet" href="weui/dist/style/weui.min.css"/>   

3).然后就可以使用它的class制作各种按钮啊,进度条啊什么的啊.例如,官方的例子:

 

 

<a href="#" class="weui_btn weui_btn_primary">按钮</a>
<a href="#" class="weui_btn weui_btn_disabled weui_btn_primary">按钮</a>
<a href="#" class="weui_btn weui_btn_warn">确认</a>
<a href="#" class="weui_btn weui_btn_disabled weui_btn_warn">确认</a>
<a href="#" class="weui_btn weui_btn_default">按钮</a>
<a href="#" class="weui_btn weui_btn_disabled weui_btn_default">按钮</a>
<div class="button_sp_area">
	<a href="#" class="weui_btn weui_btn_plain_default">按钮</a>
	<a href="#" class="weui_btn weui_btn_plain_primary">按钮</a>
	<a href="#" class="weui_btn weui_btn_mini weui_btn_primary">按钮</a>
	<a href="#" class="weui_btn weui_btn_mini weui_btn_default">按钮</a>
</div>

效果如下:

 

 

其他的,可以参见官方文档.并且从npm下载下来的,还有比较全的demo.