이 글에서 추천하는 내용은 위챗에서 새롭게 출시한 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>로그인 후 복사
위 코드의 대부분은 다음에서 왔습니다. 공식 홈페이지 코드를 사용하므로 기능 데모 페이지를 표시하는 ngApp, ngController, ngClick, ngIf 및 ngView를 포함하여 해당 속성이 추가됩니다.
코드에서 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;
}로그인 후 복사
이 섹션은 함수로 구현할 함수 코드입니다. 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 서비스를 사용하며, 이 서비스에서 제공하는 입장 이벤트 입장 및 퇴장 이벤트를 사용합니다. 다른 애니메이션 기능은 동일합니다.
$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 기능은 다음과 같습니다. 이 프로그램에서는 사용되지 않습니다. 매개변수는 더 이상 유용하지 않습니다. 이 기능은 동적 효과를 추가하기 위해서만 만들어졌습니다.
다음으로 기능 데모 부분의 페이지 코드를 살펴보겠습니다.
<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는 동적이 아닌 정적인 것이므로 공식 데모만 복사하면 됩니다. 만약 동적 코드를 추가해야 한다면 지금은 이것만 했고 앞으로도 계속해서 추가해서 완성할 예정입니다.
관련 기사:
WeChat WEUI를 통해 이미지를 업로드하는 방법, 백그라운드 PHP로 처리하는 방법은 무엇입니까?
WEUI 애플리케이션에서 일반적으로 사용되는 정보 프롬프트에 대한 JS 팝업 레이어 캡슐화
WeChat에서 WeUI를 통해 어떤 지식을 배울 수 있나요?
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
