이 글에서 추천하는 내용은 위챗에서 새롭게 출시한 UI(weui)를 통합하는 전 과정을Angularjs를 사용하여 구현하는 것입니다.
얼마 전 WeChat은 자체 UI 세트를 출시했으며 많은 개발자가 이를 다음과 같은 일부 프런트엔드 프레임워크에 적용한 것을 보았습니다. 반응하고 . 최근에 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">
<p class="home" ng-if="homeShow">
<p class="weui_grids">
<a href="#/button" class="weui_grid js_grid" data-id="button" ng-click="showBlock('button')">
<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('cell')">
<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('toast')">
<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('dialog')">
<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('progress')">
<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('msg')">
<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('article')">
<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('actionsheet')">
<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('icons')">
<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('panel')">
<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('tab')">
<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('searchbar')">
<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>
코드에서 showBlock 함수는 ngClick에서 사용됩니다. 매개변수는 현재 클릭의 함수 문자열입니다. 이 함수의 매개변수는 라우팅 기능을 사용한 후에는 사용되지 않습니다. 이 함수에 추가된 부분과 코드의 함수 데모 부분에 대한 자세한 내용은 아래 스크립트 코드를 참조하세요.
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;
}.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
});
}
}
}])$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: '/'
})
다음으로 기능 데모 부분의 페이지 코드를 살펴보겠습니다.
<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
});
}
}
}
관련 기사:
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
