首页
所有分类
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 相关文章推荐
mouse_on_title.js
Aug 25 Javascript
JS数组的遍历方式for循环与for...in
Jul 31 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
js设置随机切换背景图片的简单实例
Nov 12 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
ES6 Array常用扩展的应用实例分析
Jun 26 Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 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
bs4(1) pandas(7) apply(1) mp3Play(1) 矩阵(1) agg(1) 音频(1) 读取(1) 数据保存(1) 数组(5)
You might like
php 文件上传类代码
2011/08/06 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
JQuery 学习笔记 选择器之三
2009/07/23 Javascript
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
js实现a标签超链接提交form表单的方法
2015/06/24 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
JavaScript使用Range调色及透明度实例
2016/09/25 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
vue中配置mint-ui报css错误问题的解决方法
2017/10/11 Javascript
Angular实现的简单定时器功能示例
2017/12/28 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
[03:08]Ti4观战指南上
2014/07/07 DOTA
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
Python列表生成器的循环技巧分享
2015/03/06 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
keras中模型训练class_weight,sample_weight区别说明
2020/05/23 Python
简历的自荐信
2013/12/19 职场文书
浪漫婚礼主持词
2014/03/14 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
员工生日活动方案
2014/08/24 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
2014年内勤工作总结
2014/11/24 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
关于军训的感想
2015/08/07 职场文书
求职信：会计求职的写作技巧
2019/04/24 职场文书