首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Angularjs整合微信UI（weui）

- Author -

大猛

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 哈希表(hashtable)的简单实现
Jan 20 Javascript
jQuery中next()方法用法实例
Jan 07 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 Javascript
Javascript的表单验证-初识正则表达式
Mar 18 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
学习vue.js中class与style绑定
Dec 03 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
vue中子组件的methods中获取到props中的值方法
Aug 27 Javascript
vue中的过滤器实例代码详解
Jun 06 Javascript
深入了解JavaScript代码覆盖
Jun 13 Javascript
jQuery属性选择器用法实例分析
Jun 28 jQuery
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 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
XDM(3) PyAutoGUI(1) 百度地图(1) 封装(1) 验证表达式(1) 继承(1) 构造函数(1) promise(2) redis(3) gRPC(3)
You might like
PHP+MySQL5.0中文乱码解决方法
2006/11/20 PHP
PHP session常见问题集锦及解决办法总结
2007/03/18 PHP
PHP中redis的用法深入解析
2014/02/20 PHP
基于php实现的验证码小程序
2016/12/13 PHP
PHP中overload与override的区别
2017/02/13 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
动态样式类封装JS代码
2009/09/02 Javascript
js移除事件 js绑定事件实例应用
2012/11/28 Javascript
js切换光标示例代码
2013/10/10 Javascript
document.execCommand()的用法小结
2014/01/08 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
Javascript同时声明一连串（多个）变量的方法
2017/01/23 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
儿童python练习实例
2018/05/27 Python
python 实现倒排索引的方法
2018/12/25 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
python3中datetime库，time库以及pandas中的时间函数区别与详解
2020/04/16 Python
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
Pedro官网：新加坡时尚品牌
2019/08/27 全球购物
教育专业自荐书范文
2013/12/17 职场文书
2015圣诞节贺卡寄语
2015/03/24 职场文书
教师病假条范文
2015/08/17 职场文书
2016年学校十一国庆节活动总结
2016/04/01 职场文书