先引用样式文件 请在github上下载对应的文件

下载地址为: 3次未审核, 搜索吧

下载之后的目录结构为:

dist : 编译之后的目录, 里面的文件可以直接使用

src : 源码目录

可以打开dist下example目录, 这个是官方的例子文件 里面比较全的基本使用方法

打开example目录下的indexhtml 就可以看到官方的例子了

这里需要说明一下, 这个官方使用的zeptojs框架 这个框架更加适用移动端

开始使用, 如果使用呢 第一步先把css文件引用到页面中

<link rel="stylesheet" type="text/css" href="路径地址" />

然后, 就可以使用官方的样式了 首先来说明一下button

使用方法:class="weui_btn weui_btn_primary"

其中属性有:

weui_btn weui_btn_primary

weui_btn weui_btn_warn

weui_btn weui_btn_default

三种, 如果你想扩展, 直接增加响应的样式就可以了

Tab使用:

tab包含两种: navbar 和 tabbar

使用方法

navbar :

<div class="weui_tab">

<div class="weui_navbar">

<div class="weui_navbar_item weui_bar_item_on"> 选项一</div>

<div class="weui_navbar_item"> 选项二 </div>

<div class="weui_navbar_item">选项三 </div>

</div>

<div class="weui_tab_bd"></div>

</div>

weui_bar_item_on 为选中项

tabbar:

<div class="weui_tabbar">

<a href="javascript:;" class="weui_tabbar_item weui_bar_item_on">

<div class="weui_tabbar_icon">

<img src="/images/icon_nav_buttonpng" alt="">

</div>

<p class="weui_tabbar_label">微信</p>

</a>

<a href="javascript:;" class="weui_tabbar_item">

<div class="weui_tabbar_icon">

<img src="/images/icon_nav_msgpng" alt="">

</div>

<p class="weui_tabbar_label">通讯录</p>

</a>

<a href="javascript:;" class="weui_tabbar_item">

<div class="weui_tabbar_icon">

<img src="/images/icon_nav_articlepng" alt="">

</div>

<p class="weui_tabbar_label">发现</p>

</a>

<a href="javascript:;" class="weui_tabbar_item">

<div class="weui_tabbar_icon">

<img src="/images/icon_nav_cellpng" alt="">

</div>

<p class="weui_tabbar_label">我</p>

</a>

</div>

来自官方例子中的素材

Toast

弹出层: 一个是弹出提示数据

<div id="toast">

<div class="weui_mask_transparent"></div>

<div class="weui_toast">

<i class="weui_icon_toast"></i>

<p class="weui_toast_content">已完成</p>

</div>

</div>

使用$('#toast')show();进行显示数据

searchBar搜索框

简单的搜索, 搜索世界的大不同, 不是所有的网站都可以

图标的使用

<i class="weui_icon_msg weui_icon_success"></i>

<i class="weui_icon_msg weui_icon_info"></i>

<i class="weui_icon_msg weui_icon_warn"></i>

<i class="weui_icon_msg weui_icon_waiting"></i>

<i class="weui_icon_safe weui_icon_safe_success"></i>

<i class="weui_icon_safe weui_icon_safe_warn"></i>

Panel的使用

<div class="weui_panel weui_panel_access">

<div class="weui_panel_hd">图文组合列表</div>

<div class="weui_panel_bd">

<a href="javascript:void(0);" class="weui_media_box weui_media_appmsg">

<div class="weui_media_hd">

<img class="weui_media_appmsg_thumb" src="" alt="">

</div>

<div class="weui_media_bd">

<h4 class="weui_media_title">标题一</h4>

<p class="weui_media_desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>

</div>

</a>

<a href="javascript:void(0);" class="weui_media_box weui_media_appmsg">

<div class="weui_media_hd">

<img class="weui_media_appmsg_thumb" src="" alt="">

</div>

<div class="weui_media_bd">

<h4 class="weui_media_title">标题二</h4>

<p class="weui_media_desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>

</div>

</a>

</div>

<a class="weui_panel_ft" href="javascript:void(0);">查看更多</a>

</div>

里面没有填写地址, 请您自己填写信息

weui样式在app里字体间距变大是版本更新导致的。微信升级了weui700的版本，除了新功能的增加，该版本对微信整个UI设计风格做了全新的改版，色彩更加鲜亮和年轻化，文字颜色加深加大，组件间距变大，让整个视觉风格更加清晰直观。

取消拍一拍的设置：

1点击我，进入微信,点击“我”。

2点击个人信息，进入“我”页面,点击上方个人信息页面。

3点击拍一拍，进入个人信息页面,点击进入拍一拍设置。

4取消拍一拍，进入拍一拍页面,删掉里面的内容,点击完成即可。

WeUI是由微信官方设计团队专为微信移动Web应用设计的UI库。WeUI是一套同微信原生视觉体验一致的基础样式库，为微信Web开发量身设计

可以通过设置mininumDate 和 maxinumDate 属性，来指定使用的日期范围。如果用户试图滚动到超出这一范围的日期，表盘会回滚到最近的有效日期。两个方法都需要NSDate 对象作参数：

NSDate minDate = [[NSDate alloc]initWithString:@"1900-01-01 00:00:00 -0500"];

NSDate maxDate = [[NSDate alloc]initWithString:@"2099-01-01 00:00:00 -0500"];

datePickerminimumDate = minDate;

datePickermaximumDate = maxDate;

如果两个日期范围属性中任何一个未被设置，则默认行为将会允许用户选择过去或未来的任意日期。这在某些情况下很有用处，比如，当选择生日时，可以是过去的任意日期，但终止与当前日期。如果你希望设置默认显示的日期，可以使用date属性：

datePickerdate = minDate;

此外，还可以用 setDate 方法。如果选择了使用动画，则表盘会滚动到你指定的日期：

[datePicker setDate:maxDate animated:YES];

首先配置appjson文件配置相应路径：编译后生成相应文件夹、及文件夹内的4个文件，一个文件夹即一个页面。；

所有的js方法都是用bindtap（点击事件）调用的。例：搜索（点击搜索调用a方法）Input文本框的属性：hidden="{{对应js里data中的内容}}。例：hidden="{{!inputShowed}}（ input中的内容不显示） hidden="{{inputShowed}}（显示input中的内容）示例1：先做一个最简单的文本框：在搜索框内输入想要搜索的内容，点击搜索就可以直接获取你想要的内容。

这是一个最简单的搜索框，点击搜索按钮调用接口完成搜索。基础代码如下：wxml

<view> <view> <view class="weui-search-bar"> <view class="weui-search-bar__form"> <!-- 搜索框 --> <view class="weui-search-bar__box"> <icon class="weui-icon-search_in-box" type="search" size="14"></icon> <input type="text" class="weui-search-bar__input" placeholder="请输入搜索内容"/> </view> </view> <!-- 搜索按钮,调用搜索查询方法 --> <view class="weui-search-bar__cancel-btn" bindtap='方法名a'>搜索</view>