當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Angularjs与weui的握手

發布時間：2025/7/14 编程问答 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 Angularjs与weui的握手小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

引子

自從開通了sf的文章專欄，總想在這個專欄里寫些自己的東西。不久前，微信推出了自己的一套UI，我看有很多開發者將其套用在了一些前端框架中，比如react、vue。最近自己在學習Angularjs，所以，也想把這個UI整合到這個框架，這幾天試了一下，簡單的套用了一個功能，現在分享給大家，分離做的不好，請高手指點。

適合讀者

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

包含文件

整合的時候，參照官方的演示頁面，自己也做了一個演示頁面，完全使用Angularjs做的，沒有引用其它框架。下面先說明一下引入的文件。

使用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

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

總結

以上是生活随笔為你收集整理的Angularjs与weui的握手的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Git的基本概念
下一篇：使用redis和fastjson做应用和