12月16日，微信正式发布了WeUI.js动态视觉组件库。WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，可以让用户的使用感知更加统一。WeUI.js动态视觉组件库包含了button、cell、dialog、progress、toast、article、actionsheet、icon等各式元素。

一、weui.js是什么？

weui.js是WeUI的轻量级JS封装，不需要依赖其它库，GZIP后仅有9.0 KB。

二、weui.js包含哪些组件？

actionsheet

alert

confirm

dialog

form

gallery

loading

picker

searchbar

slider

tab

toast

toptips

uploader

三、使用方式：

Github：https://github.com/weui/weui.js

详细文档：http://dwz.cn/4QTFrm

四、微信团队为何在此时公布官方视觉组件库：

1、为了更像微信OS

微信团队和之前的轻应用平台相比，不是简单为了给开发者和用户之间提供一个平台连接、也不是只为了做一个流量入口平台那么简单，而是为了打造一个完美的微信OS生态。当年百度、UC等平台推出的轻应用，更多的只是起到了一个平台倒流和连接的作用，并没有对开发框架和设计规范进行过如此统一的规范和要求。现在看来，最好的生态，当然是类似苹果安卓OS那样，所有的应用具备统一的开发框架和接近OS生态的完美体验。

2、为了极致的用户体验

从小程序内测到公测已经过去了三个月，我们有理由相信微信团队已经接到了不少小程序开发者的审核需求，这其中最让微信团队头疼的应该就是开发设计规范不符合微信团队的要求，达不到微信团队想要的那种用户体验。微信官方进一步推出Weui就是为了让所有开发者提交的小程序都能够接近微信APP的体验效果，从而给微信用户带去最佳的用户体验，这也是未来小程序生态能否提高8亿用户使用热度和频率的一个重要指标。

3、倒逼第三方服务商转型

微信团队在早年推出公众号的时候曾经推出过“开发者模式”，当时，微信团队鼓励第三方公司利用微信公众号开放的接口进行各种微应用的开发，比如：微网站、微商城，微工具等各种应用。但是，微信团队早期并没有对这些接入应用的开发框架和设计规范进行统一的定义和严格要求，导致每一个服务接入商基本都是按照自己的开发框架和设计标准进行开发来设计，使得市面上看到的这些应用页面呈现五花八门，用户体验极其糟糕，这也就造成了早期的应用服务被用户的接受度过低，同时无法给企业带来实际价值的症结所在。随着微信小程序的出现，微信团队重塑统一的开发框架和设计规范，倒逼这些第三方服务机构重新定义自己的跟随策略，按照新的开发规范重新提供新的平台服务。或许，现有的微信第三方服务机构格局将被打破，第三方服务机构将面临新一轮的洗牌。

五、WeUI.js给小程序开发者带来了哪些好处？

1、使用Weui设计出来的小程序如同用户使用微信客户端一样的视觉效果，可以让小程序的体验感更强。

2、使用Weui设计小程序更够提高开发者的开发效率，降低开发者的开发成本，从而让开发者更快的开发出符合规范的小程序。

3、使用Weui设计小程序如同您雇佣一支国内顶尖的设计团队帮您打造一个接近完美的视觉框架。

六、微信小程序给前端设计领域带来了那些影响和推动：

1、全平台兼容

微信小程序重新定义了APP，使得一款应用能够在android、iphone以及windows

phone中都能运行，对于前端来说实现了“一次编译，到处运行”的理念。

2、前端开发思维的改变

设计理念需要从传统的PC思维需要转向到以移动为先的思维，这其中主要考虑的差异化在于屏幕尺寸、网络带宽、输入设备等几个方面的不同。同时很多之前可以用于iOS与Android的控件需要在小程序上重新调整和创新。

3、推动前端技术的发展

微信小程序以其简单的开发环境，使以Javascript和HTML5为主的前端技术成为真正的主流，越来越多的人开始接触前端开发，为前端技术的发展贡献力量。

4、前端投入成本的增加

原本一家传统企业的前端开发人员需要覆盖PC端、移动端、APP应用等各种平台，微信小程序的出现会导致未来的前端开发人员还需要涉及小程序的前端开发设计，这在一定程度增加了前端开发人员学习和工作成本，同时也会给企业带来更多的人才投入成本。

5、前端人才的竞争更加明显

微信小程序的诞生会吸引一大批后台开发、APP开发的程序猿们加入前端开发大军，进一步冲击现有的前端开发人员的的知识结构，加剧前端开发岗位的竞争格局，迫使一些低端且知识结构不全面的前端开发人员面临被淘汰或者失业的风险。

6、全栈工程师会越来越吃香

随着微信小程序的出现，既懂后台，又懂前端的人才会越来越受到企业的重视和拥抱，特别对于创业团队和互联网企业来说，一个拥有全局思维、熟悉各种技术的人才非常重要。身为技术人员，我们需要不断拥抱变化，不断get新技能，努力成为一个全栈工程师。

微信正式发布WeUI.js动态视觉组件库，这意味着，大家可以在小程序里面，直接使用在官方设计文档附录中的视觉组件（而不需要额外引入其他库）。微信团队真的是用心在打造小程序生态，笔者也是真的在用心给大家带来更多干货，这也是笔者第一时间给大家带来的解读。码字不易，如果本文对你和你身边的朋友有所启发，感谢转发，你的支持是我们码字员最大的动力。

cnpm install weui.js weui -S

具体调用的方法连接

测试环境，在vue方法中引入选择框组件

效果

完美兼容

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

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

下载之后的目录结构为:

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

src : 源码目录

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

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

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

开始使用, 如果使用呢? 第一步先把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_button.png" 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_msg.png" 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_article.png" 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_cell.png" 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>

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

---