Angularjs integriert WeChat UI (weui)
In diesem Artikel wird empfohlen, AngularJS zu verwenden, um den gesamten Prozess der Integration der neu eingeführten Benutzeroberfläche (weui) von WeChat zu implementieren. Freunde mit den gleichen Anforderungen können sich auf die folgende
Einführung beziehen
Vor nicht allzu langer Zeit hat WeChat seine eigene Benutzeroberfläche eingeführt. Ich sehe, dass viele Entwickler diese auf einige Front-End-Frameworks angewendet haben, z reagieren und vue. Vor Kurzem lerne ich Angularjs, deshalb habe ich es in den letzten Tagen auch ausprobiert und möchte es nun mit euch teilen Bitte geben Sie einige Ratschläge von Experten.
Geeignet für Leser
die über gewisse AngularJS-Grundlagen verfügen und ngRoute und ngAnimate verstehen.
Enthält Dateien
Beziehen Sie sich bei der Integration auf die offizielle Demoseite und haben Sie selbst eine Demoseite erstellt, die vollständig auf Angularjs basiert. Ohne gemacht Verweisen auf andere Frameworks. Lassen Sie uns zunächst die importierten Dateien erklären.
Verwenden Sie angle.min.js 1.4.9
Verwenden Sie angle-route.min.js 1.4.9
Verwenden Sie angle-animate.min.js 1.4.9
Verwenden Sie weui.min.css 0.4.0
Zuerst wollte ich eine einzelne Seite wie die offizielle Demoseite erstellen. Nach der Entwicklung stellte ich fest, dass es zu chaotisch war, den gesamten Inhalt in einer Datei zusammenzufassen. Deshalb habe ich die Routing-Funktion von Angularjs verwendet, um jede kleine Funktion zu trennen in separate Seiten laden. Dies wird über die Funktion zum Laden von Vorlagen erreicht. Daher wird der Navigationsseitencode sehr sauber angezeigt. Wenn Sie welchen Teil des Funktionscodes verwenden möchten, können Sie direkt die entsprechende HTML-Seite und die JS-Skriptdatei verwenden, was praktisch und schnell ist.
Das Folgende ist der Code für die Navigationsseite:
<!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>
Die meisten der oben genannten Codes stammen von Da Angularjs verwendet wird, werden entsprechende Attribute hinzugefügt, darunter ngApp, ngController, ngClick, ngIf und ngView, die die Funktionsdemonstrationsseite anzeigen.
Im Code wird die showBlock-Funktion in ngClick verwendet. Der Parameter ist die Funktionszeichenfolge des aktuellen Klicks. Die Parameter dieser Funktion werden nach Verwendung der Routing-Funktion nicht verwendet Zu dieser Funktion wurden Teile und Funktionsdemonstrationsteile hinzugefügt. Weitere Informationen finden Sie im Skriptcode unten.
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; }
Dieser Abschnitt ist der von der Funktion zu implementierende Funktionscode. Er steuert die zu implementierenden Variablen homeShow und viewShow Navigation und Funktionsdemonstration Ein- und Ausblenden der beiden Teile.
.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 }); } } }])
Das Obige ist der Animationseffektcode, wenn der Navigationsteil angezeigt wird. Der Navigationsteil wird auf absolute Positionierung initialisiert, sodass er sich nach links aus dem Anzeigebereich bewegt und ausgeblendet wird, bevor er verschwindet. Nach dem Betrachten der Funktionsdemonstration und der Rückkehr zur Navigation wird die Animation umgekehrt. Hier wird der $animateCss-Dienst von ngAnimate verwendet, und das von diesem Dienst bereitgestellte Eintrittsereignis enter und Exit-Ereignis Leave werden verwendet. Andere Animationsfunktionen sind gleich.
$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: '/' })
Dies ist ein Routing-Dienst, der dem href-Attribut des a-Tags in HTML entspricht, also der showBlock-Funktion Wird in diesem Programm nicht verwendet. Die Parameter sind nicht mehr nützlich. Diese Funktion wurde nur zum Hinzufügen dynamischer Effekte erstellt.
Als nächstes werfen wir einen Blick auf den Seitencode des Funktionsdemonstrationsteils.
<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>
Dies ist der Demoseitencode zum Laden der Warteaufforderungsfunktion. Es gibt insgesamt zwei Stile Anzeigetext; Zweitens gibt es eine Lade-Warte-Animation und einen Eingabeaufforderungstext.
Es gibt zwei Schaltflächen auf der Seite. Ihre Funktion besteht darin, diese beiden Stile auszuatmen. Nachdem jeder Stil ausgeatmet wurde, verschwindet er automatisch nach 3 Sekunden.
In den js der Navigationsseite gibt es einen Controller und eine Animationsfunktion, die die Funktionen im Skriptcode dieser Funktionsseite aufrufen, nämlich die Controller-Funktion toast() und die Animationsfunktion toastAnimate(). Der Code der Skriptdatei lautet wie folgt.
//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 }); } } }
Zu diesem Zeitpunkt wurden die Navigation und eine Funktionsdemonstrationsseite implementiert. Da der Großteil der Benutzeroberfläche statisch und nicht dynamisch ist, müssen Sie nur die offizielle Demo kopieren. Wenn dynamischer Code hinzugefügt werden muss, haben wir dies erst jetzt getan und werden ihn auch in Zukunft bis zur Vervollständigung hinzufügen.
Verwandte Artikel:
Wie lade ich Bilder über WeChat WEUI hoch, wie gehe ich damit mit Hintergrund-PHP um?
Kapselung von JS-Popup-Ebenen für häufig verwendete Informationsaufforderungen in WEUI-Anwendungen

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen



Javascript ist eine sehr einzigartige Sprache, was die Organisation des Codes, das Programmierparadigma des Codes und die objektorientierte Theorie betrifft. Die Frage, ob Javascript eine objektorientierte Sprache ist, wird seit langem diskutiert Es gibt offensichtlich schon seit langem eine Antwort. Auch wenn Javascript seit zwanzig Jahren vorherrscht, schauen Sie sich einfach das „Black Horse Cloud Classroom JavaScript Advanced Framework“ an, wenn Sie beliebte Frameworks wie jQuery, Angularjs und sogar React verstehen möchten Design-Video-Tutorial“.

Im heutigen Informationszeitalter sind Websites zu einem wichtigen Instrument für Menschen geworden, um Informationen zu erhalten und zu kommunizieren. Eine responsive Website kann sich an verschiedene Geräte anpassen und den Benutzern ein qualitativ hochwertiges Erlebnis bieten, was zu einem Hotspot in der modernen Website-Entwicklung geworden ist. In diesem Artikel erfahren Sie, wie Sie mit PHP und AngularJS eine responsive Website erstellen, um ein qualitativ hochwertiges Benutzererlebnis zu bieten. Einführung in PHP PHP ist eine serverseitige Open-Source-Programmiersprache, die sich ideal für die Webentwicklung eignet. PHP bietet viele Vorteile, z. B. einfache Erlernbarkeit, plattformübergreifende Funktionalität, umfangreiche Toolbibliothek und Entwicklungseffizienz

Mit der kontinuierlichen Entwicklung des Internets sind Webanwendungen zu einem wichtigen Bestandteil des Informationsaufbaus in Unternehmen und zu einem notwendigen Mittel für Modernisierungsarbeiten geworden. Um die Entwicklung, Wartung und Erweiterung von Webanwendungen zu vereinfachen, müssen Entwickler ein technisches Framework und eine Programmiersprache wählen, die ihren Entwicklungsanforderungen entspricht. PHP und AngularJS sind zwei sehr beliebte Webentwicklungstechnologien. Sie sind serverseitige bzw. clientseitige Lösungen und können die Entwicklungseffizienz und das Benutzererlebnis von Webanwendungen erheblich verbessern. Vorteile von PHPPHP

Mit der rasanten Entwicklung der Webtechnologie ist die Single Page Web Application (SinglePage Application, SPA) zu einem immer beliebter werdenden Webanwendungsmodell geworden. Im Vergleich zu herkömmlichen mehrseitigen Webanwendungen besteht der größte Vorteil von SPA darin, dass die Benutzererfahrung reibungsloser ist und auch der Rechendruck auf dem Server erheblich reduziert wird. In diesem Artikel stellen wir vor, wie man mit Flask und AngularJS ein einfaches SPA erstellt. Flask ist ein leichter Py

Mit der Popularität von Webanwendungen erfreut sich das Frontend-Framework AngularJS immer größerer Beliebtheit. AngularJS ist ein von Google entwickeltes JavaScript-Framework, das Sie beim Erstellen von Webanwendungen mit dynamischen Webanwendungsfunktionen unterstützt. Andererseits ist PHP für die Backend-Programmierung eine sehr beliebte Programmiersprache. Wenn Sie PHP für die serverseitige Programmierung verwenden, bringt die Verwendung von PHP mit AngularJS dynamischere Effekte auf Ihre Website.

Mit der Popularität des Internets nutzen immer mehr Menschen das Netzwerk, um Dateien zu übertragen und zu teilen. Aus verschiedenen Gründen kann die Verwendung herkömmlicher FTP- und anderer Methoden zur Dateiverwaltung jedoch nicht den Anforderungen moderner Benutzer gerecht werden. Daher ist die Einrichtung einer benutzerfreundlichen, effizienten und sicheren Online-Dateiverwaltungsplattform zu einem Trend geworden. Die in diesem Artikel vorgestellte Online-Dateiverwaltungsplattform basiert auf PHP und AngularJS. Sie kann problemlos Dateien hochladen, herunterladen, bearbeiten, löschen und andere Vorgänge ausführen und bietet eine Reihe leistungsstarker Funktionen wie Dateifreigabe, Suche,

Der Inhalt dieses Artikels befasst sich mit der grundlegenden Einführung in AngularJS. Jetzt kann ich ihn mit Ihnen teilen.

Mit der Popularität und Entwicklung des Internets wird die Front-End-Entwicklung immer wichtiger. Als Frontend-Entwickler müssen wir verschiedene Entwicklungstools und -technologien verstehen und beherrschen. Unter ihnen sind PHP und AngularJS zwei sehr nützliche und beliebte Tools. In diesem Artikel erklären wir, wie Sie diese beiden Tools für die Frontend-Entwicklung verwenden. 1. Einführung in PHP PHP ist eine beliebte serverseitige Open-Source-Skriptsprache. Sie eignet sich für die Webentwicklung und kann auf Webservern und verschiedenen Betriebssystemen ausgeführt werden. Die Vorteile von PHP sind Einfachheit, Geschwindigkeit und Komfort
