欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Angularjs整合微信UI（weui）

 更新時間：2016年03月15日 08:52:33   作者：大猛  
本文給大家推薦的是使用angularjs實現整合微信新推出的UI（weui）的全部過程，有相同需求的小伙伴可以參考下

引子

不久前，微信推出了自己的一套UI，我看有很多開發(fā)者將其套用在了一些前端框架中，比如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

一開始想與官方的演示頁面一樣做一個單頁面的，開發(fā)之后發(fā)現，把所有內容放到一個文件里顯得雜亂，所以，使用了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
      });
    }
  }
}])

以上是導航部分顯示時的動畫效果代碼。導航部分初始化為絕對定位，讓其在消失前先做一個向左移出顯示區(qū)域，并且漸隱的動畫。當查看完功能演示，回到導航時，進行動畫反轉。這里使用的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函數的參數，已經沒有用處了，此函數只是為了增加了動態(tài)效果而創(chuàng)造的。

下面，再來看看功能演示部分的頁面代碼。

<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是靜態(tài)的，沒有動態(tài)，所以只需要將官方的演示照搬即可。需要增加動態(tài)代碼的，現在已只做了這一個，后續(xù)還會陸續(xù)增加至完成。

代碼開源地址

代碼已經上傳至github上，感興趣的朋友可以點擊查看，代碼同時也上傳到個人的服務器上，說明中有鏈接地址，可以直接點擊查看效果。

由于項目剛剛成立，很多東西沒有完善，還有很多不如意的地方，請諒解。更希望能得到您的幫助與指正。

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

相關文章

  • 小談angular ng deploy的實現

    小談angular ng deploy的實現

    這篇文章主要介紹了小談angular ng deploy的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2020-04-04
  • AngularJS中的$parse服務與$eval服務用法實例

    AngularJS中的$parse服務與$eval服務用法實例

    這篇文章主要介紹了AngularJS中的$parse服務與$eval服務用法,結合實例形式分析了AngularJS中$parse服務與$eval服務的功能、使用方法與相關注意事項,需要的朋友可以參考下
    2023-05-05
  • AngularJS基礎 ng-cut 指令介紹及簡單示例

    AngularJS基礎 ng-cut 指令介紹及簡單示例

    本文主要介紹AngularJS ng-cut 指令,這里對ng-cut指令的基礎資料進行了整理,和詳細介紹,并附上代碼示例和實現效果圖,學習AngularJS 指令的朋友可以參考下
    2016-08-08
  • Angularjs 實現動態(tài)添加控件功能

    Angularjs 實現動態(tài)添加控件功能

    這篇文章主要介紹了Angularjs 實現動態(tài)添加控件功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
    2017-05-05
  • AngularJS路由Ui-router模塊用法示例

    AngularJS路由Ui-router模塊用法示例

    這篇文章主要介紹了AngularJS路由Ui-router模塊用法,結合實例形式分析了Ui-router模塊的功能、使用方法及相關注意事項,需要的朋友可以參考下
    2017-05-05
  • ANGULARJS中用NG-BIND指令實現單向綁定的例子

    ANGULARJS中用NG-BIND指令實現單向綁定的例子

    這篇文章主要介紹了ANGULARJS中用NG-BIND指令實現單向綁定的例子,本文簡單介紹AngularJS框架后,用一個實例演示{{}}插值法和ng-bind指令的使用,需要的朋友可以參考下
    2014-12-12
  • ionic3實戰(zhàn)教程之隨機布局瀑布流的實現方法

    ionic3實戰(zhàn)教程之隨機布局瀑布流的實現方法

    這篇文章主要給大家介紹了關于ionic3實戰(zhàn)教程之隨機布局瀑布流的實現方法，文中通過示例代碼和圖文介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。
    2017-12-12
  • angularjs利用directive實現移動端自定義軟鍵盤的示例

    angularjs利用directive實現移動端自定義軟鍵盤的示例

    下面小編就為大家?guī)硪黄猘ngularJS利用directive實現移動端自定義軟鍵盤的示例。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • Angular應用prerender預渲染提高頁面加載速度

    Angular應用prerender預渲染提高頁面加載速度

    這篇文章主要介紹了Angular應用prerender預渲染提高頁面加載速度,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-10-10
  • angularjs ocLazyLoad分步加載js文件實例

    angularjs ocLazyLoad分步加載js文件實例

    本篇文章主要介紹了angularjs ocLazyLoad分步加載js文件，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-01-01

最新評論