[学习交流] 探索淘宝移动端高效开发框架SUI

探索淘宝移动端高效开发框架SUI
【前言】
SUI Mobile 是一套基于 Framework7 开发的UI库。它非常轻量、精美，只需要引入我们的CDN文件就可以使用，并且能兼容到 iOS 6.0+ 和 Android 4.0+，非常适合开发跨平台Web App。
对于只有 HTML&CSS 的组件，我们只需要复制HTML代码既可以使用。它的大部分JS组件都是独立的 Zepto 插件，并且提供了 Zepto/jQuery 风格的API，都是我们非常熟悉开发方式。
SUI框架拥有轻量的iOS风格UI库，并且有很多功能强大的组件，我们接下来一探究竟。
SUI官网：http://m.sui.taobao.org/
SUI github地址：https://github.com/sdc-alibaba/SUI-Mobile
【SUI骨架模版】
SUI提供了CDN地址可以直接使用，CDN有加速功能，所以我们不用下载到本地，直接用下面官方提供的模板即可创建页面。
<!DOCTYPE html>
<html>
  <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>我的生活</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">

  </head>
  <body>
<div class="page-group">
      <div class="page page-current">
      
      </div>
</div>

<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>

  </body>
</html>
【CSS样式】
其实SUI框架的官方文档比较详细，而且遵循一定的规范，所以使用和学习的时候会发现和Bootstrap框架非常类似，接下来罗列一些常用CSS组件。
《头部标题栏》
标题栏默认会放在页面顶部。
<header class="bar bar-nav">
  <h1 class="title">标题</h1>
</header>
《底部工具栏》
底部工具栏默认会放在页面底部。
<nav class="bar bar-tab">
  <a class="tab-item external active" href="#">
<span class="icon icon-home"></span>
<span class="tab-label">文案</span>
  </a>
  <a class="tab-item external" href="#">
<span class="icon icon-me"></span>
<span class="tab-label">文案</span>
<span class="badge">2</span>
  </a>
  <a class="tab-item external" href="#">
<span class="icon icon-star"></span>
<span class="tab-label">文案</span>
  </a>
  <a class="tab-item external" href="#">
<span class="icon icon-cart"></span>
<span class="tab-label">文案</span>
  </a>
  <a class="tab-item external" href="#">
<span class="icon icon-settings"></span>
<span class="tab-label">文案</span>
  </a>
</nav>
《内容主体》
对于SUI的内容主体区域，同时出现头部标题，底部工具栏和内容主体3个模块的时候，需要注意HTML结构的先后顺序。
头部标题 > 底部工具栏 > 内容主体
顺序不对会导致内容区域会被底部工具栏盖住，部分内容无法浏览到，这一点很多初学者容易犯错误，SUI官网文档也没详细说明，所以大家一定要注意。
正确书写顺序：

<header class="bar bar-nav">
...
</header>

<nav class="bar bar-tab">
...
</nav>

<div class="content">
...
</div>
《栅格化系统》
SUI提供了化系统，便于我们做页面的布局，但是由于SUI针对的是移动端，所以栅格化系统与Bootstrap是不一样的，学习的时候要注意。
移动端常见的栅格化主要是2栏，3栏，4栏布局，SUI都有所封装。
<div class="row">
  
  <div class="col-50">50%</div>
  <div class="col-50">50%</div>
</div>
<div class="row">
  
  <div class="col-33">33%</div>
  <div class="col-33">33%</div>
  <div class="col-33">33%</div>
</div>

<div class="row">
  <div class="col-20">20%</div>
  <div class="col-20">20%</div>
  <div class="col-20">20%</div>
  <div class="col-20">20%</div>
  <div class="col-20">20%</div>
</div>
SUI的栅格化系统默认是有间距的，如果不需要间距可以添加 .no-gutter 类，把间距去掉，这点SUI做的比Bootstrap好。
<div class="row no-gutter">
  <div class="col-50">50%</div>
  <div class="col-50">50%</div>
</div>
【路由】
路由(Router)是SUI的一个亮点，默认开启，路由会自动拦截所有链接点击跳转行为，并通过ajax来加载新页面。
《ajax加载》
对于SUI来说，通过ajax加载新页面和普通的链接写法没有区别，像如下我们熟悉的代码，默认就是通过ajax加载，所以我们可以很方便做出一些无刷新跳转的单页面web app。
<a href="back.html">ajax加载新页面</a>
《后退》
SUI对后退操作进行了封装，使用时只需要在任意链接上增加一个 .back 类，点击就会自动返回到上一页（调用 history.back）。
<a class="back">返回上一页</a>
《注意实现》
由于SUI默认是通过ajax加载新页面，所以推荐大家所有页面都引用相同的 js，而这个 js 里面包含了所有的逻辑，并且尽量使用事件委托来绑定，否则ajax加载过来的页面可能会出现JS不执行的问题。
【常用JS插件】
SUI是可以让我们高效开发一个移动端Web App，是因为它还封装了很多移动端现成的插件，如幻灯片，对话框，等，不用我们重复造轮子。SUI内置Zepto，让我们能用熟悉的jQuery风格操作DO。
《幻灯片》
SUI内部还封装了swiper幻灯片插件，不过需要注意使用到了幻灯片插件，记得在页面底部执行$.init()进行初始化。
<!DOCTYPE html>
<html>
  <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SUI</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="stylesheet" href="lib/css/sm.min.css">
<link rel="stylesheet" href="lib/css/sm-extend.min.css">

  </head>
  <body>
<div class="page-group">
      <div class="page page-current">
         <header class="bar bar-nav">
            <h1 class="title">幻灯片</h1>
         </header>
         <div class="content">
            
            <div class="swiper-container" data-space-between='10'>
                  <div class="swiper-wrapper">
                     <div class="swiper-slide"><img src="img/banner01.jpg" alt=""></div>
                     <div class="swiper-slide"><img src="img/banner02.jpg" alt=""></div>
                     <div class="swiper-slide"><img src="img/banner03.jpg" alt=""></div>
                  </div>
                  <div class="swiper-pagination"></div>
            </div>
         </div>
      </div>
</div>
<script type='text/javascript' src='lib/js/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='lib/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='lib/js/sm-extend.min.js' charset='utf-8'></script>
<script>
      // 使用到了幻灯片插件，记得在页面底部执行$.init()进行初始化。
      $.init();
</script>
  </body>
</html>
《对话框》
对话框的使用也很简单，直接通过$.alert()调用即可。
<!DOCTYPE html>
<html>
  <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SUI</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="lib/css/sm.min.css">
<link rel="stylesheet" href="lib/css/sm-extend.min.css">
  </head>
  <body>
<div class="page-group">
      <div class="page page-current">
         <header class="bar bar-nav">
            <h1 class="title">弹窗</h1>
         </header>
         <div class="content content-padded">
            <a href="#" class="button">点击弹窗</a>
         </div>
      </div>
</div>
<script type='text/javascript' src='lib/js/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='lib/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='lib/js/sm-extend.min.js' charset='utf-8'></script>
<script>
      $(function(){
         $(document).on('click','.button',function(){
            $.alert('这个弹窗还是IOS风格的。');
         })
      })
</script>
  </body>
</html>
其他JS插件使用可查看SUI的官方文档：http://m.sui.taobao.org/
【总结】
我们课程学习完成后，学员都可以自己通过HTML5+CSS3书写一些手机端的布局。但是往往出现样式代码不通用不健壮，手机端ajax跳转页面效果不会，一些JS效果还需要到处找插件的问题。
SUI的CSS样式我们也可以直接使用，尤其是页面头部标题，底部工具栏和内容主体这些通用的模块。当然还有表单，按钮等现成的样式，项目中有需要都可直接使用。
SUI的路由很好的解决了ajax跳转的问题，并且也可以添加加载动画，做更好的用户体验。
当然SUI内置了很多JS插件，如手机商城常用的效果，并且插件性兼容良好。
善用SUI，可以让我们开发移动端网站效率更高，效果更好。

izhu · izhu

如此高大上

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 探索淘宝移动端高效开发框架SUI

1 个回复