搜尋

首頁  >  文章  >  web前端  >  Angularjs整合微信UI（weui）

Angularjs整合微信UI（weui）

PHP中文网
PHP中文网原創
2017-03-16 09:35:032751瀏覽

本文推薦給大家的是使用angularjs實現整合微信新推出的UI（weui）的全部過程，有相同需求的小夥伴可以參考下

引子

不久前，微信推出了自己的一套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-route.min.js 1.4.9

    4. 使用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">
  <p class="home" ng-if="homeShow">
    <p class="weui_grids">
      <a href="#/button" class="weui_grid js_grid" data-id="button" ng-click="showBlock(&#39;button&#39;)">
        <p class="weui_grid_icon">
          <img src="./images/icon_nav_button.png" alt="">
        </p>
        <p class="weui_grid_label">
          Button
        </p>
      </a>
      <a href="#/cell" class="weui_grid js_grid" data-id="cell" ng-click="showBlock(&#39;cell&#39;)">
        <p class="weui_grid_icon">
          <img src="./images/icon_nav_cell.png" alt="">
        </p>
        <p class="weui_grid_label">
          Cell
        </p>
      </a>
      <a href="#/toast" class="weui_grid js_grid" data-id="toast" ng-click="showBlock(&#39;toast&#39;)">
        <p class="weui_grid_icon">
          <img src="./images/icon_nav_toast.png" alt="">
        </p>
        <p class="weui_grid_label">
          Toast
        </p>
      </a>
      <a href="javascript:;" class="weui_grid js_grid" data-id="dialog" ng-click="showBlock(&#39;dialog&#39;)">
        <p class="weui_grid_icon">
         <img src="./images/icon_nav_dialog.png" alt="">
        </p>
        <p class="weui_grid_label">
          Dialog
        </p>
      </a>
      <a href="javascript:;" class="weui_grid js_grid" data-id="progress" ng-click="showBlock(&#39;progress&#39;)">
        <p class="weui_grid_icon">
          <img src="./images/icon_nav_progress.png" alt="">
        </p>
        <p class="weui_grid_label">
         Progress
        </p>
      </a>
      <a href="#/msg" class="weui_grid js_grid" data-id="msg" ng-click="showBlock(&#39;msg&#39;)">
        <p class="weui_grid_icon">
          <img src="./images/icon_nav_msg.png" alt="">
        </p>
        <p class="weui_grid_label">
          Msg
        </p>
      </a>
      <a href="#/article" class="weui_grid js_grid" data-id="article" ng-click="showBlock(&#39;article&#39;)">
        <p class="weui_grid_icon">
          <img src="./images/icon_nav_article.png" alt="">
        </p>
        <p class="weui_grid_label">
          Article
        </p>
      </a>
      <a href="javascript:;" class="weui_grid js_grid" data-id="actionsheet" ng-click="showBlock(&#39;actionsheet&#39;)">
        <p class="weui_grid_icon">
          <img src="./images/icon_nav_actionSheet.png" alt="">
        </p>
        <p class="weui_grid_label">
          ActionSheet
        </p>
      </a>
      <a href="#/icons" class="weui_grid js_grid" data-id="icons" ng-click="showBlock(&#39;icons&#39;)">
        <p class="weui_grid_icon">
          <img src="./images/icon_nav_icons.png" alt="">
        </p>
        <p class="weui_grid_label">
          Icons
        </p>
      </a>
      <a href="#/panel" class="weui_grid js_grid" data-id="panel" ng-click="showBlock(&#39;panel&#39;)">
        <p class="weui_grid_icon">
          <img src="./images/icon_nav_panel.png" alt="">
        </p>
        <p class="weui_grid_label">
          Panel
        </p>
      </a>
      <a href="javascript:;" class="weui_grid js_grid" data-id="tab" ng-click="showBlock(&#39;tab&#39;)">
        <p class="weui_grid_icon">
          <img src="./images/icon_nav_tab.png" alt="">
        </p>
        <p class="weui_grid_label">
          Tab
        </p>
      </a>
      <a href="#/searchbar" class="weui_grid js_grid" data-id="searchbar" ng-click="showBlock(&#39;searchbar&#39;)">
        <p class="weui_grid_icon">
          <img src="./images/icon_nav_search_bar.png" alt="">
        </p>
        <p class="weui_grid_label">
          SearchBar
        </p>
      </a>
    </p>
  </p>
  <p class="view" ng-view ng-if="viewShow"></p>
  <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(&#39;weuiapp&#39;, [&#39;ngAnimate&#39;, &#39;ngRoute&#39;])
  .config(function($routeProvider) {
    $routeProvider
      .when(&#39;/&#39;, {
        controller: &#39;home&#39;,
        templateUrl: &#39;&#39;
      })
      .when(&#39;/button&#39;,{
        controller: &#39;button&#39;,
        templateUrl: &#39;button.html&#39;
      })
      .when(&#39;/cell&#39;, {
        controller: &#39;cell&#39;,
        templateUrl: &#39;cell.html&#39;
      })
      .when(&#39;/toast&#39;, {
        controller: &#39;toast&#39;,
        templateUrl: &#39;toast.html&#39;
      })
      .when(&#39;/msg&#39;, {
        controller: &#39;msg&#39;,
        templateUrl: &#39;msg.html&#39;
      })
      .when(&#39;/article&#39;, {
        controller: &#39;article&#39;,
        templateUrl: &#39;article.html&#39;
      })
      .when(&#39;/icons&#39;, {
        controller: &#39;icons&#39;,
        templateUrl: &#39;icons.html&#39;
      })
      .when(&#39;/panel&#39;, {
        controller: &#39;panel&#39;,
        templateUrl: &#39;panel.html&#39;
      })
      .otherwise({
        redirectTo: &#39;/&#39;
      })

  })
  .controller(&#39;home&#39;, function($scope) {
    $scope.homeShow = true;
    $scope.viewShow = false;

    $scope.showBlock = function() {
      $scope.homeShow = false;
      $scope.viewShow = true;
    }
  })
  .controller(&#39;toast&#39;, [&#39;$scope&#39;, &#39;$interval&#39;, toast])
  .animation(&#39;.aweui-show&#39;, [&#39;$animateCss&#39;, toastAnimate])
  .animation(&#39;.home&#39;, [&#39;$animateCss&#39;, function($animateCss) {
    return {
      enter: function(element, doneFn) {
        return $animateCss(element, {
          from: { left: &#39;100%&#39;, 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: &#39;-100%&#39;, top: 0, opacity: 0 },
          duration: .3
        });
      }
    }
  }])
  .animation(&#39;.view&#39;, [&#39;$animateCss&#39;, function($animateCss) {
    return {
      enter: function(element, doneFn) {
        return $animateCss(element, {
          from: { left: &#39;100%&#39;, 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: &#39;-100%&#39;, top: 0, opacity: 0 },
          duration: .3
        });
      }
    }
  }])
$scope.showBlock = function() {
  $scope.homeShow = false;
  $scope.viewShow = true;
}



這段便是函數要實現的功能代碼，分別控制變數homeShow以及viewShowhow兩部分的顯示與隱藏。 

.animation(&#39;.home&#39;, [&#39;$animateCss&#39;, function($animateCss) {
  return {
    enter: function(element, doneFn) {
      return $animateCss(element, {
        from: { left: &#39;100%&#39;, 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: &#39;-100%&#39;, top: 0, opacity: 0 },
        duration: .3
      });
    }
  }
}])



以上是導覽部分顯示時的動畫效果代碼。導航部分初始化為絕對定位，讓其在消失前先做一個向左移出顯示區域，並且漸隱的動畫。當查看完功能演示，回到導航時，進行動畫反轉。這裡使用的ngAnimate的$animateCss服務，並且使用了此服務提供的進入事件enter以及移出事件leave。其它的動畫功能與其相同。 

$routeProvider
  .when(&#39;/&#39;, {
    controller: &#39;home&#39;,
    templateUrl: &#39;&#39;
  })
  .when(&#39;/button&#39;,{
    controller: &#39;button&#39;,
    templateUrl: &#39;button.html&#39;
  })
  .when(&#39;/cell&#39;, {
    controller: &#39;cell&#39;,
    templateUrl: &#39;cell.html&#39;
  })
  .when(&#39;/toast&#39;, {
    controller: &#39;toast&#39;,
    templateUrl: &#39;toast.html&#39;
  })
  .when(&#39;/msg&#39;, {
    controller: &#39;msg&#39;,
    templateUrl: &#39;msg.html&#39;
  })
  .when(&#39;/article&#39;, {
    controller: &#39;article&#39;,
    templateUrl: &#39;article.html&#39;
  })
  .when(&#39;/icons&#39;, {
    controller: &#39;icons&#39;,
    templateUrl: &#39;icons.html&#39;
  })
  .when(&#39;/panel&#39;, {
    controller: &#39;panel&#39;,
    templateUrl: &#39;panel.html&#39;
  })
  .otherwise({
    redirectTo: &#39;/&#39;
  })


這是路由服務，對應html中的a標籤href屬性，所以，此程式中沒有使用showBlock函數的參數，已經沒有用處了，此函數只是為了增加了動態效果而創造的。


下面，再來看看功能示範部分的頁面程式碼。 

<p class="page">
  <p class="hd">
    <h1 class="page_title">Toast</h1>
  </p>
  <p 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>
  </p>
  <!--BEGIN toast-->
  <p id="toast" ng-if="toastHide" class="aweui-show">
    <p class="weui_mask_transparent"></p>
    <p class="weui_toast">
      <i class="weui_icon_toast"></i>
      <p class="weui_toast_content">已完成</p>
    </p>
  </p>
  <!--end toast-->
  <!-- loading toast -->
  <p id="loadingToast" ng-if="loadingToastHide" class="weui_loading_toast aweui-show">
    <p class="weui_mask_transparent"></p>
    <p class="weui_toast">
      <p class="weui_loading">
        <p class="weui_loading_leaf weui_loading_leaf_0"></p>
        <p class="weui_loading_leaf weui_loading_leaf_1"></p>
        <p class="weui_loading_leaf weui_loading_leaf_2"></p>
        <p class="weui_loading_leaf weui_loading_leaf_3"></p>
        <p class="weui_loading_leaf weui_loading_leaf_4"></p>
        <p class="weui_loading_leaf weui_loading_leaf_5"></p>
        <p class="weui_loading_leaf weui_loading_leaf_6"></p>
        <p class="weui_loading_leaf weui_loading_leaf_7"></p>
        <p class="weui_loading_leaf weui_loading_leaf_8"></p>
        <p class="weui_loading_leaf weui_loading_leaf_9"></p>
        <p class="weui_loading_leaf weui_loading_leaf_10"></p>
        <p class="weui_loading_leaf weui_loading_leaf_11"></p>
      </p>
      <p class="weui_toast_content">数据加载中</p>
    </p>
  </p>
</p>


這就是載入等待提示功能的示範頁碼，一共兩種樣式，其一，顯示文字；其二，有一個載入等待的動畫並且有提示文字顯示。

頁面有兩個按鈕，功能就是分別呼出這兩種樣式，每種樣式呼出後，停留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是靜態的，沒有動態，所以只需要將官方示範照搬即可。需要增加動態程式碼的，現在已只做了這一個，後續還會陸續增加至完成。

相關文章：

透過微信WEUI實現圖片上傳，後台PHP該如何處理？

WEUI應用之JS常用資訊提示彈層的封裝

透過微信的WeUI可以學習到哪些知識？
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：Jquery實現簡單的輪播效果(程式碼管用)_jquery下一篇：Jquery實現簡單的輪播效果(程式碼管用)_jquery

相關文章

看更多