首页
所有分类
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 相关文章推荐
如何判断图片地址是否失效
Feb 02 Javascript
javascript AOP 实现ajax回调函数使用比较方便
Nov 20 Javascript
JavaScript事件处理器中的event参数使用介绍
May 24 Javascript
JS中怎样判断undefined(比较不错的方法)
Mar 27 Javascript
Jquery简单实现GridView行高亮的方法
Jun 15 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 Javascript
Form表单按回车自动提交表单的实现方法
Nov 18 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 Javascript
JS浏览器BOM常见操作实例详解
Apr 27 Javascript
nuxt静态部署打包相对路径操作
Nov 06 Javascript
原生JS实现分页
Apr 19 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
驱动模型(1) 信息校验(1) Excel(4) 自动播放(1) 正则表达式(3) 静态压缩(1) 分区(2) gevent(1) greenlet(1) Coroutine(1)
You might like
PHP静态新闻列表自动生成代码
2007/06/14 PHP
PHP同时连接多个mysql数据库示例代码
2014/03/17 PHP
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
PHP7多线程搭建教程
2017/04/21 PHP
PHP利用百度ai实现文本和图片审核
2019/05/08 PHP
有趣的javascript数组定义方法
2010/09/10 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
js实现的倒计时按钮实例
2015/06/24 Javascript
javascript实现密码验证
2015/11/10 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程（二）
2017/01/21 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
2018/10/24 jQuery
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
python删除字符串中指定字符的方法
2018/08/13 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
Python While循环语句实例演示及原理解析
2020/01/03 Python
python和go语言的区别是什么
2020/07/20 Python
购买澳大利亚最好的服装和内衣在线：BONDS
2016/10/14 全球购物
工程部主管岗位职责
2013/11/17 职场文书
kfc实习自我鉴定
2013/12/14 职场文书
家长给幼儿园的表扬信
2014/01/09 职场文书
负责人任命书范本
2014/06/04 职场文书
目标责任书格式
2014/07/28 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
煤矿安全生产工作总结
2015/08/13 职场文书
python实现图片九宫格分割的示例
2021/04/25 Python
分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了
2021/05/21 Redis