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

Angularjs整合微信UI（weui）

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

引子

不久前，微信推出了自己的一套UI，我看有很多開發(fā)者將其套用在了一些前端框架中，比如react、vue。最近自己在學(xué)習(xí)Angularjs，所以，也想把這個(gè)UI整合到這個(gè)框架，這幾天試了一下，簡單的套用了一個(gè)功能，現(xiàn)在分享給大家，分離做的不好，請高手指點(diǎn)。

適合讀者

有一定的Angularjs基礎(chǔ)，并且了解ngRoute、ngAnimate的人群。

包含文件

整合的時(shí)候，參照官方的演示頁面，自己也做了一個(gè)演示頁面，完全使用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

一開始想與官方的演示頁面一樣做一個(gè)單頁面的，開發(fā)之后發(fā)現(xiàn)，把所有內(nèi)容放到一個(gè)文件里顯得雜亂，所以，使用了Angularjs的路由功能，把各個(gè)小功能獨(dú)立成頁面，在需要時(shí)加載進(jìn)來。此處使用模板加載功能來實(shí)現(xiàn)。于是，導(dǎo)航頁面代碼就顯示很干凈，如果想要使用哪部分的功能代碼，直接使用相對應(yīng)的html頁面及js腳本文件即可，方便、快捷。

下是導(dǎo)航頁面的代碼：

<!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，所以增加了相應(yīng)的屬性，包括ngApp,ngController,ngClick,ngIf以及顯示功能演示頁面的ngView。

代碼中，ngClick中使用了showBlock函數(shù)，參數(shù)是當(dāng)前點(diǎn)擊的功能字符串，這個(gè)函數(shù)的參數(shù)在使用路由功能后，沒有使用，僅僅是在此函數(shù)中增加了隱藏與顯示導(dǎo)航部分以及功能演示部分的代碼，詳情請查看下面的腳本代碼。

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;
}

這一段便是函數(shù)要實(shí)現(xiàn)的功能代碼，分別控制變量homeShow以及viewShow來實(shí)現(xiàn)導(dǎo)航與功能演示兩部分的顯示與隱藏。

.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
      });
    }
  }
}])

以上是導(dǎo)航部分顯示時(shí)的動(dòng)畫效果代碼。導(dǎo)航部分初始化為絕對定位，讓其在消失前先做一個(gè)向左移出顯示區(qū)域，并且漸隱的動(dòng)畫。當(dāng)查看完功能演示，回到導(dǎo)航時(shí)，進(jìn)行動(dòng)畫反轉(zhuǎn)。這里使用的ngAnimate的$animateCss服務(wù)，并且使用了此服務(wù)提供的進(jìn)入事件enter以及移出事件leave。其它的動(dòng)畫功能與其相同。

$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: '/'
  })

這是路由服務(wù)，對應(yīng)html中的a標(biāo)簽href屬性，所以，此程序中沒有使用showBlock函數(shù)的參數(shù)，已經(jīng)沒有用處了，此函數(shù)只是為了增加了動(dòng)態(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()">點(diǎn)擊彈出Toast</a>
    <a href="javascript:;" class="weui_btn weui_btn_primary" ng-click="showLoadingToast()">點(diǎn)擊彈出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">數(shù)據(jù)加載中</p>
    </div>
  </div>
</div>

這就是加載等待提示功能的演示頁面代碼，一共兩種樣式，其一，顯示文字；其二，有一個(gè)加載等待的動(dòng)畫并且有提示文字顯示。

頁面有兩個(gè)按鈕，功能就是分別呼出這兩種樣式，每種樣式呼出后，停留3秒后自動(dòng)消失。

在導(dǎo)航頁面的js中，有一個(gè)控制器和一個(gè)動(dòng)畫函數(shù)調(diào)用了此功能頁面腳本代碼中的函數(shù)，分別是控制器函數(shù)toast()以及動(dòng)畫函數(shù)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);
  }
}

//顯示與隱藏時(shí)的動(dòng)畫，使用ngAnimate中的$animateCss服務(wù)
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
      });
    }
  }
}

到此，導(dǎo)航和一個(gè)功能演示的頁面就已經(jīng)實(shí)現(xiàn)了。由于大部分UI是靜態(tài)的，沒有動(dòng)態(tài)，所以只需要將官方的演示照搬即可。需要增加動(dòng)態(tài)代碼的，現(xiàn)在已只做了這一個(gè)，后續(xù)還會(huì)陸續(xù)增加至完成。

代碼開源地址

代碼已經(jīng)上傳至github上，感興趣的朋友可以點(diǎn)擊查看，代碼同時(shí)也上傳到個(gè)人的服務(wù)器上，說明中有鏈接地址，可以直接點(diǎn)擊查看效果。

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

項(xiàng)目地址：https://github.com/limeng0403/Angularjs-weui

相關(guān)文章

  • 小談angular ng deploy的實(shí)現(xiàn)

    小談angular ng deploy的實(shí)現(xiàn)

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

    AngularJS中的$parse服務(wù)與$eval服務(wù)用法實(shí)例

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

    AngularJS基礎(chǔ) ng-cut 指令介紹及簡單示例

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

    Angularjs 實(shí)現(xiàn)動(dòng)態(tài)添加控件功能

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

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

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

    ANGULARJS中用NG-BIND指令實(shí)現(xiàn)單向綁定的例子

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

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

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

    angularjs利用directive實(shí)現(xiàn)移動(dòng)端自定義軟鍵盤的示例

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

    Angular應(yīng)用prerender預(yù)渲染提高頁面加載速度

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

    angularjs ocLazyLoad分步加載js文件實(shí)例

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

最新評論