Weui 微信網站開發樣式插件使用教程

微信的網頁樣式正式發布了，搜了一下，正式引入了樂學一百微信端的項目中。

 

<div class="weui_grids">
  <a href="javascript:;" class="weui_grid js_grid" data-id="button">
    <div class="weui_grid_icon">
      <img src="./images/icon_nav_button.png" alt="">
    </div>
    <p class="weui_grid_label">
      Button
    </p>
  </a>
  <a href="javascript:;" class="weui_grid js_grid" data-id="cell">
    <div class="weui_grid_icon">
      <img src="./images/icon_nav_cell.png" alt="">
    </div>
    <p class="weui_grid_label">
      Cell
    </p>
  </a>
  <a href="javascript:;" class="weui_grid js_grid" data-id="toast">
    <div class="weui_grid_icon">
      <img src="./images/icon_nav_toast.png" alt="">
    </div>
    <p class="weui_grid_label">
      Toast
    </p>
  </a>
  ...
</div>

 

 

調用方法

 

<!-- 微信樣式引入開始 -->
<link rel="stylesheet" href="public/js/weui/dist/lib/weui.css">
<link rel="stylesheet" href="public/js/weui/dist/css/jquery-weui.css">
<script src="public/js/weui/dist/lib/jquery-2.1.4.js"></script>
<script src="public/js/weui/dist/js/jquery-weui.js"></script> 
<!-- 微信樣式引入結束 -->
在附件中下載，放入自己的項目中就可以使用了。
具體的樣式書寫格式
地址：

http://lihongxun945.github.io/jquery-weui/components

壓縮包下載：

http://tieba.baidu.com/p/4314274996