Angularjs整合微信UI(weui)


Posted in Javascript onMarch 15, 2016

引子

不久前,微信推出了自己的一套UI,我看有很多开发者将其套用在了一些前端框架中,比如react、vue。最近自己在学习Angularjs,所以,也想把这个UI整合到这个框架,这几天试了一下,简单的套用了一个功能,现在分享给大家,分离做的不好,请高手指点。

适合读者

有一定的Angularjs基础,并且了解ngRoute、ngAnimate的人群。

包含文件

整合的时候,参照官方的演示页面,自己也做了一个演示页面,完全使用Angularjs做的,没有引用其它框架。下面先说明一下引入的文件。

  1. 使用angular.min.js 1.4.9
  2. 使用angular-route.min.js 1.4.9
  3. 使用angular-animate.min.js 1.4.9
  4. 使用weui.min.css 0.4.0

一开始想与官方的演示页面一样做一个单页面的,开发之后发现,把所有内容放到一个文件里显得杂乱,所以,使用了Angularjs的路由功能,把各个小功能独立成页面,在需要时加载进来。此处使用模板加载功能来实现。于是,导航页面代码就显示很干净,如果想要使用哪部分的功能代码,直接使用相对应的html页面及js脚本文件即可,方便、快捷。

下是导航页面的代码:

<!DOCTYPE html>
<html lang="en" ng-app="weuiapp">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <title>WeUI</title>
  <link rel="stylesheet" href="./css/weui.css" />
</head>
<style type="text/css">
.home,
.view {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}
</style>

<body ng-controller="home">
  <div class="home" ng-if="homeShow">
    <div class="weui_grids">
      <a href="#/button" class="weui_grid js_grid" data-id="button" ng-click="showBlock('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="#/cell" class="weui_grid js_grid" data-id="cell" ng-click="showBlock('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="#/toast" class="weui_grid js_grid" data-id="toast" ng-click="showBlock('toast')">
        <div class="weui_grid_icon">
          <img src="./images/icon_nav_toast.png" alt="">
        </div>
        <p class="weui_grid_label">
          Toast
        </p>
      </a>
      <a href="javascript:;" class="weui_grid js_grid" data-id="dialog" ng-click="showBlock('dialog')">
        <div class="weui_grid_icon">
          <img src="./images/icon_nav_dialog.png" alt="">
        </div>
        <p class="weui_grid_label">
          Dialog
        </p>
      </a>
      <a href="javascript:;" class="weui_grid js_grid" data-id="progress" ng-click="showBlock('progress')">
        <div class="weui_grid_icon">
          <img src="./images/icon_nav_progress.png" alt="">
        </div>
        <p class="weui_grid_label">
          Progress
        </p>
      </a>
      <a href="#/msg" class="weui_grid js_grid" data-id="msg" ng-click="showBlock('msg')">
        <div class="weui_grid_icon">
          <img src="./images/icon_nav_msg.png" alt="">
        </div>
        <p class="weui_grid_label">
          Msg
        </p>
      </a>
      <a href="#/article" class="weui_grid js_grid" data-id="article" ng-click="showBlock('article')">
        <div class="weui_grid_icon">
          <img src="./images/icon_nav_article.png" alt="">
        </div>
        <p class="weui_grid_label">
          Article
        </p>
      </a>
      <a href="javascript:;" class="weui_grid js_grid" data-id="actionsheet" ng-click="showBlock('actionsheet')">
        <div class="weui_grid_icon">
          <img src="./images/icon_nav_actionSheet.png" alt="">
        </div>
        <p class="weui_grid_label">
          ActionSheet
        </p>
      </a>
      <a href="#/icons" class="weui_grid js_grid" data-id="icons" ng-click="showBlock('icons')">
        <div class="weui_grid_icon">
          <img src="./images/icon_nav_icons.png" alt="">
        </div>
        <p class="weui_grid_label">
          Icons
        </p>
      </a>
      <a href="#/panel" class="weui_grid js_grid" data-id="panel" ng-click="showBlock('panel')">
        <div class="weui_grid_icon">
          <img src="./images/icon_nav_panel.png" alt="">
        </div>
        <p class="weui_grid_label">
          Panel
        </p>
      </a>
      <a href="javascript:;" class="weui_grid js_grid" data-id="tab" ng-click="showBlock('tab')">
        <div class="weui_grid_icon">
          <img src="./images/icon_nav_tab.png" alt="">
        </div>
        <p class="weui_grid_label">
          Tab
        </p>
      </a>
      <a href="#/searchbar" class="weui_grid js_grid" data-id="searchbar" ng-click="showBlock('searchbar')">
        <div class="weui_grid_icon">
          <img src="./images/icon_nav_search_bar.png" alt="">
        </div>
        <p class="weui_grid_label">
          SearchBar
        </p>
      </a>
    </div>
  </div>
  <div class="view" ng-view ng-if="viewShow"></div>
  <script type="text/javascript" src="./js/angular.min.js"></script>
  <script type="text/javascript" src="./js/angular-animate.min.js"></script>
  <script type="text/javascript" src="./js/angular-route.min.js"></script>
  <script type="text/javascript" src="./js/toast.js"></script>
  <script type="text/javascript" src="./js/example.js"></script>
</body>

</html>

以上代码大部分来自官方的首页代码,由于要使用Angularjs,所以增加了相应的属性,包括ngApp,ngController,ngClick,ngIf以及显示功能演示页面的ngView。

代码中,ngClick中使用了showBlock函数,参数是当前点击的功能字符串,这个函数的参数在使用路由功能后,没有使用,仅仅是在此函数中增加了隐藏与显示导航部分以及功能演示部分的代码,详情请查看下面的脚本代码。

angular.module('weuiapp', ['ngAnimate', 'ngRoute'])
  .config(function($routeProvider) {
    $routeProvider
      .when('/', {
        controller: 'home',
        templateUrl: ''
      })
      .when('/button',{
        controller: 'button',
        templateUrl: 'button.html'
      })
      .when('/cell', {
        controller: 'cell',
        templateUrl: 'cell.html'
      })
      .when('/toast', {
        controller: 'toast',
        templateUrl: 'toast.html'
      })
      .when('/msg', {
        controller: 'msg',
        templateUrl: 'msg.html'
      })
      .when('/article', {
        controller: 'article',
        templateUrl: 'article.html'
      })
      .when('/icons', {
        controller: 'icons',
        templateUrl: 'icons.html'
      })
      .when('/panel', {
        controller: 'panel',
        templateUrl: 'panel.html'
      })
      .otherwise({
        redirectTo: '/'
      })

  })
  .controller('home', function($scope) {
    $scope.homeShow = true;
    $scope.viewShow = false;

    $scope.showBlock = function() {
      $scope.homeShow = false;
      $scope.viewShow = true;
    }
  })
  .controller('toast', ['$scope', '$interval', toast])
  .animation('.aweui-show', ['$animateCss', toastAnimate])
  .animation('.home', ['$animateCss', function($animateCss) {
    return {
      enter: function(element, doneFn) {
        return $animateCss(element, {
          from: { left: '100%', top: 0, opacity: 0 },
          to: { left: 0, top: 0, opacity: 1 },
          duration: .3
        });
      },
      leave: function(element, doneFn) {
        return $animateCss(element, {
          from: { left: 0, top: 0, opacity: 1 },
          to: { left: '-100%', top: 0, opacity: 0 },
          duration: .3
        });
      }
    }
  }])
  .animation('.view', ['$animateCss', function($animateCss) {
    return {
      enter: function(element, doneFn) {
        return $animateCss(element, {
          from: { left: '100%', top: 0, opacity: 0 },
          to: { left: 0, top: 0, opacity: 1 },
          duration: .3
        });
      },
      leave: function(element, doneFn) {
        return $animateCss(element, {
          from: { left: 0, top: 0, opacity: 1 },
          to: { left: '-100%', top: 0, opacity: 0 },
          duration: .3
        });
      }
    }
  }])
$scope.showBlock = function() {
  $scope.homeShow = false;
  $scope.viewShow = true;
}

这一段便是函数要实现的功能代码,分别控制变量homeShow以及viewShow来实现导航与功能演示两部分的显示与隐藏。

.animation('.home', ['$animateCss', function($animateCss) {
  return {
    enter: function(element, doneFn) {
      return $animateCss(element, {
        from: { left: '100%', top: 0, opacity: 0 },
        to: { left: 0, top: 0, opacity: 1 },
        duration: .3
      });
    },
    leave: function(element, doneFn) {
      return $animateCss(element, {
        from: { left: 0, top: 0, opacity: 1 },
        to: { left: '-100%', top: 0, opacity: 0 },
        duration: .3
      });
    }
  }
}])

以上是导航部分显示时的动画效果代码。导航部分初始化为绝对定位,让其在消失前先做一个向左移出显示区域,并且渐隐的动画。当查看完功能演示,回到导航时,进行动画反转。这里使用的ngAnimate的$animateCss服务,并且使用了此服务提供的进入事件enter以及移出事件leave。其它的动画功能与其相同。

$routeProvider
  .when('/', {
    controller: 'home',
    templateUrl: ''
  })
  .when('/button',{
    controller: 'button',
    templateUrl: 'button.html'
  })
  .when('/cell', {
    controller: 'cell',
    templateUrl: 'cell.html'
  })
  .when('/toast', {
    controller: 'toast',
    templateUrl: 'toast.html'
  })
  .when('/msg', {
    controller: 'msg',
    templateUrl: 'msg.html'
  })
  .when('/article', {
    controller: 'article',
    templateUrl: 'article.html'
  })
  .when('/icons', {
    controller: 'icons',
    templateUrl: 'icons.html'
  })
  .when('/panel', {
    controller: 'panel',
    templateUrl: 'panel.html'
  })
  .otherwise({
    redirectTo: '/'
  })

这是路由服务,对应html中的a标签href属性,所以,此程序中没有使用showBlock函数的参数,已经没有用处了,此函数只是为了增加了动态效果而创造的。

下面,再来看看功能演示部分的页面代码。

<div class="page">
  <div class="hd">
    <h1 class="page_title">Toast</h1>
  </div>
  <div class="bd spacing">
    <a href="javascript:;" class="weui_btn weui_btn_primary" ng-click="showToast()">点击弹出Toast</a>
    <a href="javascript:;" class="weui_btn weui_btn_primary" ng-click="showLoadingToast()">点击弹出Loading Toast</a>
  </div>
  <!--BEGIN toast-->
  <div id="toast" ng-if="toastHide" class="aweui-show">
    <div class="weui_mask_transparent"></div>
    <div class="weui_toast">
      <i class="weui_icon_toast"></i>
      <p class="weui_toast_content">已完成</p>
    </div>
  </div>
  <!--end toast-->
  <!-- loading toast -->
  <div id="loadingToast" ng-if="loadingToastHide" class="weui_loading_toast aweui-show">
    <div class="weui_mask_transparent"></div>
    <div class="weui_toast">
      <div class="weui_loading">
        <div class="weui_loading_leaf weui_loading_leaf_0"></div>
        <div class="weui_loading_leaf weui_loading_leaf_1"></div>
        <div class="weui_loading_leaf weui_loading_leaf_2"></div>
        <div class="weui_loading_leaf weui_loading_leaf_3"></div>
        <div class="weui_loading_leaf weui_loading_leaf_4"></div>
        <div class="weui_loading_leaf weui_loading_leaf_5"></div>
        <div class="weui_loading_leaf weui_loading_leaf_6"></div>
        <div class="weui_loading_leaf weui_loading_leaf_7"></div>
        <div class="weui_loading_leaf weui_loading_leaf_8"></div>
        <div class="weui_loading_leaf weui_loading_leaf_9"></div>
        <div class="weui_loading_leaf weui_loading_leaf_10"></div>
        <div class="weui_loading_leaf weui_loading_leaf_11"></div>
      </div>
      <p class="weui_toast_content">数据加载中</p>
    </div>
  </div>
</div>

这就是加载等待提示功能的演示页面代码,一共两种样式,其一,显示文字;其二,有一个加载等待的动画并且有提示文字显示。

页面有两个按钮,功能就是分别呼出这两种样式,每种样式呼出后,停留3秒后自动消失。

在导航页面的js中,有一个控制器和一个动画函数调用了此功能页面脚本代码中的函数,分别是控制器函数toast()以及动画函数toastAnimate()。脚本文件的代码如下。

//toast控制器
function toast($scope, $interval) {
  $scope.toastHide = 0;
  $scope.loadingToastHide = 0;

  $scope.showToast = function() {
    $scope.toastHide = 1;

    $interval(function() {
      $scope.toastHide = 0;
    }, 3000, 1);
  }

  $scope.showLoadingToast = function() {
    $scope.loadingToastHide = 1;

    $interval(function() {
      $scope.loadingToastHide = 0;
    }, 3000, 1);
  }
}

//显示与隐藏时的动画,使用ngAnimate中的$animateCss服务
function toastAnimate($animateCss) {
  return {
    enter: function(element, doneFn) {
      return $animateCss(element, {
        from: { opacity: 0 },
        to: { opacity: 1 },
        duration: .3
      });
    },
    leave: function(element, doneFn) {
      return $animateCss(element, {
        from: { opacity: 1 },
        to: { opacity: 0 },
        duration: .3
      });
    }
  }
}

到此,导航和一个功能演示的页面就已经实现了。由于大部分UI是静态的,没有动态,所以只需要将官方的演示照搬即可。需要增加动态代码的,现在已只做了这一个,后续还会陆续增加至完成。

代码开源地址

代码已经上传至github上,感兴趣的朋友可以点击查看,代码同时也上传到个人的服务器上,说明中有链接地址,可以直接点击查看效果。

由于项目刚刚成立,很多东西没有完善,还有很多不如意的地方,请谅解。更希望能得到您的帮助与指正。

项目地址:https://github.com/limeng0403/Angularjs-weui

Javascript 相关文章推荐
载入进度条 效果
Jul 08 Javascript
EasyUI中的tree用法介绍
Nov 01 Javascript
在网站上应该用的30个jQuery插件整理
Nov 03 Javascript
Firefox中beforeunload事件的实现缺陷浅析
May 03 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
Sep 09 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
Jun 05 Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 Javascript
微信小程序调用微信支付接口的实现方法
Apr 29 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 Javascript
一步步教大家编写酷炫的导航栏js+css实现
Mar 14 #Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 #Javascript
基于javascript html5实现3D翻书特效
Mar 14 #Javascript
php基于redis处理session的方法
Mar 14 #Javascript
使用javascript插入样式
Mar 14 #Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
Mar 14 #Javascript
javascript实现数组去重的多种方法
Mar 14 #Javascript
You might like
聊天室php&amp;mysql(三)
2006/10/09 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
JavaScript入门学习书籍推荐
2008/06/12 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
JS分页的实现(同步与异步)
2017/09/16 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
Django实现基于类的分页功能
2019/10/31 Python
关于初始种子自动选取的区域生长实例(python+opencv)
2020/01/16 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
法国足球商店:Footcenter
2019/07/06 全球购物
办公室主任岗位职责
2013/11/08 职场文书
大学系主任推荐信范文
2013/12/24 职场文书
物业公司采购员岗位职责
2013/12/31 职场文书
文秘应聘自荐书范文
2014/02/18 职场文书
听课评语大全
2014/04/30 职场文书
社区志愿者培训方案
2014/06/10 职场文书
2015年骨干教师工作总结
2015/05/26 职场文书
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript