引子
不久前，微信推出了自己的一套UI，我看有很多開發人員將其套用在了一些前端架構中，比如react、vue。最近自己在學習Angularjs，所以，也想把這個UI整合到這個架構，這幾天試了一下，簡單的套用了一個功能，現在分享給大家，分離做的不好，請高手指點。
適合讀者
有一定的Angularjs基礎，並且瞭解ngRoute、ngAnimate的人群。
包含檔案
整合的時候，參照官方的示範頁面，自己也做了一個示範頁面，完全使用Angularjs做的，沒有引用其它架構。下面先說明一下引入的檔案。
一開始想與官方的示範頁面一樣做一個單頁面的，開發之後發現，把所有內容放到一個檔案裡顯得雜亂，所以，使用了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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
