Angularjs与weui的握手
引子
自從開(kāi)通了sf的文章專欄，總想在這個(gè)專欄里寫(xiě)些自己的東西。不久前，微信推出了自己的一套UI，我看有很多開(kāi)發(fā)者將其套用在了一些前端框架中，比如react、vue。最近自己在學(xué)習(xí)Angularjs，所以，也想把這個(gè)UI整合到這個(gè)框架，這幾天試了一下，簡(jiǎn)單的套用了一個(gè)功能，現(xiàn)在分享給大家，分離做的不好，請(qǐng)高手指點(diǎn)。
適合讀者
有一定的Angularjs基礎(chǔ)，并且了解ngRoute、ngAnimate的人群。
包含文件
整合的時(shí)候，參照官方的演示頁(yè)面，自己也做了一個(gè)演示頁(yè)面，完全使用Angularjs做的，沒(méi)有引用其它框架。下面先說(shuō)明一下引入的文件。
使用angular.min.js 1.4.9
使用angular-route.min.js 1.4.9
使用angular-animate.min.js 1.4.9
使用weui.min.css 0.4.0
一開(kāi)始想與官方的演示頁(yè)面一樣做一個(gè)單頁(yè)面的，開(kāi)發(fā)之后發(fā)現(xiàn)，把所有內(nèi)容放到一個(gè)文件里顯得雜亂，所以，使用了Angularjs的路由功能，把各個(gè)小功能獨(dú)立成頁(yè)面，在需要時(shí)加載進(jìn)來(lái)。此處使用模板加載功能來(lái)實(shí)現(xiàn)。于是，導(dǎo)航頁(yè)面代碼就顯示很干凈，如果想要使用哪部分的功能代碼，直接使用相對(duì)應(yīng)的html頁(yè)面及js腳本文件即可，方便、快捷。
下是導(dǎo)航頁(yè)面的代碼：
<!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>以上代碼大部分來(lái)自官方的首頁(yè)代碼，由于要使用Angularjs，所以增加了相應(yīng)的屬性，包括ngApp,ngController,ngClick,ngIf以及顯示功能演示頁(yè)面的ngView。
代碼中，ngClick中使用了showBlock函數(shù)，參數(shù)是當(dāng)前點(diǎn)擊的功能字符串，這個(gè)函數(shù)的參數(shù)在使用路由功能后，沒(méi)有使用，僅僅是在此函數(shù)中增加了隱藏與顯示導(dǎo)航部分以及功能演示部分的代碼，詳情請(qǐng)查看下面的腳本代碼。
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來(lái)實(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)畫(huà)效果代碼。導(dǎo)航部分初始化為絕對(duì)定位，讓其在消失前先做一個(gè)向左移出顯示區(qū)域，并且漸隱的動(dòng)畫(huà)。當(dāng)查看完功能演示，回到導(dǎo)航時(shí)，進(jìn)行動(dòng)畫(huà)反轉(zhuǎn)。這里使用的ngAnimate的$animateCss服務(wù)，并且使用了此服務(wù)提供的進(jìn)入事件enter以及移出事件leave。其它的動(dòng)畫(huà)功能與其相同。
$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ù)，對(duì)應(yīng)html中的a標(biāo)簽href屬性，所以，此程序中沒(méi)有使用showBlock函數(shù)的參數(shù)，已經(jīng)沒(méi)有用處了，此函數(shù)只是為了增加了動(dòng)態(tài)效果而創(chuàng)造的。
下面，再來(lái)看看功能演示部分的頁(yè)面代碼。
<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>這就是加載等待提示功能的演示頁(yè)面代碼，一共兩種樣式，其一，顯示文字；其二，有一個(gè)加載等待的動(dòng)畫(huà)并且有提示文字顯示。
頁(yè)面有兩個(gè)按鈕，功能就是分別呼出這兩種樣式，每種樣式呼出后，停留3秒后自動(dòng)消失。
在導(dǎo)航頁(yè)面的js中，有一個(gè)控制器和一個(gè)動(dòng)畫(huà)函數(shù)調(diào)用了此功能頁(yè)面腳本代碼中的函數(shù)，分別是控制器函數(shù)toast()以及動(dòng)畫(huà)函數(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)畫(huà)，使用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è)功能演示的頁(yè)面就已經(jīng)實(shí)現(xiàn)了。由于大部分UI是靜態(tài)的，沒(méi)有動(dòng)態(tài)，所以只需要將官方的演示照搬即可。需要增加動(dòng)態(tài)代碼的，現(xiàn)在已只做了這一個(gè)，后續(xù)還會(huì)陸續(xù)增加至完成。
代碼開(kāi)源地址
代碼已經(jīng)上傳至github上，感興趣的朋友可以點(diǎn)擊查看，代碼同時(shí)也上傳到個(gè)人的服務(wù)器上，說(shuō)明中有鏈接地址，可以直接點(diǎn)擊查看效果。
由于項(xiàng)目剛剛成立，很多東西沒(méi)有完善，還有很多不如意的地方，請(qǐng)諒解。更希望能得到您的幫助與指正。
項(xiàng)目地址：https://github.com/limeng0403/Angularjs-weui
總結(jié)
以上是生活随笔為你收集整理的Angularjs与weui的握手的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Git的基本概念
- 下一篇： 使用redis和fastjson做应用和