1. 程式人生 > >微信公眾號開發教程[016]-網頁開發-樣式庫

微信公眾號開發教程[016]-網頁開發-樣式庫

        我承接app微信公眾號開發,如果有誰需要的話,可以惠顧我,謝謝.

QQ: 40678884

微信: szuzsq

-------------------------------------------------------------------------------------------------------------------------------------

        這個比較簡單,就是微信自己弄的一套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.