weui

WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、icon等各式元素。

严格的讲它是一个css库。算一个精简的库

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  6.         <title>WeUI</title>
  7.         <link rel="stylesheet" href="path/to/weui/dist/style/weui.min.css"/>
  8.     </head>
  9.     <body>
  11.     </body>
  12. </html>

但它的demo里提供了不少好东西

打开weui/examples/index.html就可以演示效果

WeUI - 图1

  • 模板是加载，替换了常规的ajax（页面少的时候是个好办法）
  • 实现了container里的显示隐藏效果
  • pushstate改变url

结构

  • container
    • page1
    • page2

看一下代码结构

WeUI - 图2

helloworld

copy 

  1. <div class="container js_container">
  2.   ...
  3. </div>

预览一下效果，看到图片都未展示，于是把example里的images放到public/images下

此时预览，发现图片特别大，这肯定是css没有加载，于是把example.css放到public/demo下
改名为myweui.css

在html里引入即可

  1. <link rel="stylesheet" href="./myweui.css" />

此时预览就可以了。此例用于测试样式是足够的，是为helloworld1

可是我如何点击，进入下一页呢

多页操作

把之前例子的

  1.     <script type="text/html" id="tpl_button">
  2.         <div class="page">
  3.             <div class="hd">
  4.                 <h1 class="page_title">Button</h1>
  5.             </div>
  6.             <div class="bd spacing">
  7.                 <a href="javascript:;" class="weui_btn weui_btn_primary">按钮</a>
  8.                 <a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_primary">按钮</a>
  9.                 <a href="javascript:;" class="weui_btn weui_btn_warn">确认</a>
  10.                 <a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_warn">确认</a>
  11.                 <a href="javascript:;" class="weui_btn weui_btn_default">按钮</a>
  12.                 <a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_default">按钮</a>
  13.                 <div class="button_sp_area">
  14.                     <a href="javascript:;" class="weui_btn weui_btn_plain_default">按钮</a>
  15.                     <a href="javascript:;" class="weui_btn weui_btn_plain_primary">按钮</a>
  17.                     <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_primary">按钮</a>
  18.                     <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_default">按钮</a>
  19.                 </div>
  20.             </div>
  21.         </div>
  22.     </script>

放到.container下面，这样就定义了模板

此时点击button按钮是不会有显示的。

那么我再找找例子里，是不是少什么东西?

把example.js放到public/demo下，改名为myweui.js

引入

  1.     <script src="./myweui.js"></script>

此时刷新就好了。

也就是说所有的东西都在这个js里，我们之前说的pushstate、各种效果等都在这里

看一下按钮是如何定义和响应的

  1. <a class="weui_cell js_cell" href="javascript:;" data-id="button">
  2.     <span class="weui_cell_hd">
  3.       <img src="/images/icon_nav_button.png" class="icon_nav" alt=""></span>
  4.     <div class="weui_cell_bd weui_cell_primary">
  5.         <p>Button</p>
  6.     </div>
  7.     <div class="weui_cell_ft">
  8.     </div>
  9. </a>
  • class=”weui_cell js_cell”
  • data-id=”button”

这样就行了？

我们看一下myweui.js

  1. $(function () {

这很明显是zeptojs写法

  1. // page stack
  2. var stack = [];
  3. var $container = $('.js_container');
  4. $container.on('click', '.js_cell[data-id]', function () {
  5.     var id = $(this).data('id');
  6.     go(id);
  7. });

头几行，定义了一个stack，我们想一下那个推进来的效果，

  • 默认显示，为栈的第一个元素
  • 如果push进来就，stack里push一个，设置为当前显示的
  • 如果点击返回呢，stack里pop出去最后一个，设置上一个为显示的
  • 如果返回了栈顶，点返回就没效果了

这里的click事件，它的事件是.js_cell[data-id]

也就是class=js_cell，并且有data-id属性。

对比一下button的按钮

  1. <a class="weui_cell js_cell" href="javascript:;" data-id="button">

如此，大概你就该明白了。

那么事件里面是

  1. var id = $(this).data('id');
  2. go(id);

就用button这个例子讲，这个id应该是data-id=”button”里的button，对吧？

然后go就跳转了，也就是push的效果应该是它弄的

  1. function go(id){
  2.     var $tpl = $($('#tpl_' + id).html()).addClass('slideIn').addClass(id);
  3.     $container.append($tpl);
  4.     stack.push($tpl);
  5.     // why not use `history.pushState`, https://github.com/weui/weui/issues/26
  6.     //history.pushState({id: id}, '', '#' + id);
  7.     location.hash = '#' + id;
  9.     $($tpl).on('webkitAnimationEnd', function (){
  10.         $(this).removeClass('slideIn');
  11.     }).on('animationend', function (){
  12.         $(this).removeClass('slideIn');
  13.     });
  14.     // tooltips
  15.     if (id == 'cell') {
  16.         $('.js_tooltips').show();
  17.         setTimeout(function (){
  18.             $('.js_tooltips').hide();
  19.         }, 3000);
  20.     }
  21. }

看一下源码

  • $container.append($tpl);是dom元素插入
  • stack.push($tpl); 视图栈压入最新的
  • location.hash = ‘#’ + id;是pushstate更改url地址
  • 其他就是动画或者根据id干点坏事了

稍微注意一下：我们push的页面从哪里来的？

  1. var $tpl = $($('#tpl_' + id).html()).addClass('slideIn').addClass(id);
  2. $container.append($tpl);

我们知道id是data-id=”button”里的button，也就是说我们要根据id=“tpl_button”来找模板里的html。

想想我们之前是不是拷贝了一个这样的模板？

ok，只要是class=js_cell，并且有data-id属性的就会触发点击时间，根据tpl_button里的内容显示（push）。

这是push，那么返回pop呢？

  1. // location.hash = '#hash1' 和点击后退都会触发`hashchange`，这个demo页面只关心后退
  2. $(window).on('hashchange', function (e) {
  3.     if (/#.+/gi.test(e.newURL)) {
  4.         return;
  5.     }
  6.     var $top = stack.pop();
  7.     if (!$top) {
  8.         return;
  9.     }
  10.     $top.addClass('slideOut').on('animationend', function () {
  11.         $top.remove();
  12.     }).on('webkitAnimationEnd', function () {
  13.         $top.remove();
  14.     });
  15. });

location.hash变了

  • var $top = stack.pop();很明显出栈了
  • if (!$top) {return;} 是如果栈顶，不做操作
  • 然后处理$top，然后出栈的视图移除掉

最外面的视图移除了，很明显就是上一个视图显示了。

so，原理就是这么简单

时间有限，视图和其他点击事件控件的演示就不讲了

weui的缺点

weui的优点

  • 它很好的解决推入和返回的问题
  • 它有微信一样的ui界面
  • 它还提供了基本的ui组件（弹出框，actionsheet等）

那么它的缺点呢？页面内容过长的时候，滑动不流畅，以为它就没解决这个问题呢

这不正是iscroll解决的问题么？

如果weui加上iscroll的特性，是不是就很棒了？