Angularjs menyepadukan UI WeChat (weui)
Apa yang disarankan oleh artikel ini ialah menggunakan angularjs untuk melaksanakan keseluruhan proses penyepaduan UI (weui) yang baru dilancarkan oleh WeChat yang mempunyai keperluan yang sama boleh merujuk kepada perkara berikut
Pengenalan.
Tidak lama dahulu, WeChat melancarkan set UInya sendiri, saya nampak ramai pembangun telah menggunakannya pada beberapa rangka kerja bahagian hadapan, seperti bertindak balas dan vue . Baru-baru ini saya sedang belajar Angularjs, jadi saya juga ingin menyepadukan UI ini ke dalam rangka kerja ini. Saya telah mencubanya dalam beberapa hari yang lalu dan hanya menggunakan fungsi Sekarang saya ingin berkongsi dengan anda , sila beri sedikit nasihat daripada pakar.
Sesuai untuk pembaca
yang mempunyai asas tertentu Angularjs dan memahami ngRoute dan ngAnimate.
Termasuk fail
Apabila menyepadukan, rujuk halaman demo rasmi dan buat sendiri halaman demo, sepenuhnya menggunakan Angularjs Made tanpa merujuk rangka kerja lain. Mari kita jelaskan dahulu fail yang diimport.
Gunakan angular.min.js 1.4.9
Guna angular-route.min.js 1.4.9
Gunakan angular-animate.min.js 1.4.9
Gunakan weui.min.css 0.4.0
Pada mulanya, saya ingin membuat satu halaman seperti halaman demo rasmi Selepas pembangunan, saya mendapati bahawa meletakkan semua kandungan ke dalam satu fail adalah terlalu kemas, saya menggunakan fungsi penghalaan Angularjs untuk memisahkan setiap fungsi kecil ke dalam halaman berasingan Muatkan apabila diperlukan. Ini dicapai menggunakan fungsi memuatkan templat. Oleh itu, kod halaman navigasi dipaparkan dengan sangat bersih Jika anda ingin menggunakan bahagian mana kod fungsi, anda boleh terus menggunakan halaman html dan fail skrip js yang sepadan, yang mudah dan pantas.
Berikut ialah kod untuk halaman navigasi:
<!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>
Kebanyakan kod di atas berasal daripada kod halaman utama rasmi Memandangkan Angularjs digunakan, atribut yang sepadan ditambah, termasuk ngApp, ngController, ngClick, ngIf dan ngView yang memaparkan halaman demonstrasi fungsi.
Dalam kod, fungsi showBlock digunakan dalam ngClick Parameter ialah rentetan fungsi klik semasa Parameter fungsi ini tidak digunakan selepas menggunakan fungsi penghalaan sahaja ditambahkan pada fungsi ini dan bahagian demonstrasi fungsi kod, sila lihat kod skrip di bawah untuk butiran.
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; }
Bahagian ini ialah kod fungsian yang akan dilaksanakan oleh fungsi ini mengawal pembolehubah homeShow dan viewShow masing-masing untuk dilaksanakan navigasi dan demonstrasi fungsi. Menunjukkan dan menyembunyikan dua bahagian.
.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 }); } } }])
Di atas ialah kod kesan animasi apabila bahagian navigasi dipaparkan. Bahagian navigasi dimulakan kepada kedudukan mutlak, supaya ia bergerak ke kiri keluar dari kawasan paparan dan pudar sebelum hilang. Selepas melihat demonstrasi fungsi dan kembali ke navigasi, animasi diterbalikkan. Perkhidmatan $animateCss ngAnimate digunakan di sini, dan acara masuk masuk dan cuti acara keluar yang disediakan oleh perkhidmatan ini digunakan. Fungsi animasi lain adalah sama.
$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: '/' })
Ini ialah perkhidmatan penghalaan, sepadan dengan atribut href bagi teg a dalam html, jadi fungsi showBlock ialah tidak digunakan dalam program ini Parameter tidak lagi berguna Fungsi ini hanya dicipta untuk menambah kesan dinamik.
Seterusnya, mari kita lihat kod halaman bahagian demonstrasi fungsi.
<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>
Ini ialah kod halaman tunjuk cara untuk memuatkan fungsi gesaan menunggu secara keseluruhannya teks paparan; Kedua, terdapat animasi menunggu pemuatan dan teks segera dipaparkan.
Terdapat dua butang pada halaman tersebut Fungsinya masing-masing untuk menghembuskan kedua-dua gaya ini Selepas setiap gaya dihembus, ia akan hilang secara automatik selepas 3 saat.
Dalam js halaman navigasi, terdapat pengawal dan fungsi animasi yang memanggil fungsi dalam kod skrip halaman fungsi ini, iaitu fungsi pengawal toast() dan fungsi animasi toastAnimate(). Kod fail skrip adalah seperti berikut.
//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 }); } } }
Pada ketika ini, navigasi dan halaman demonstrasi fungsi telah dilaksanakan. Memandangkan kebanyakan UI adalah statik dan tidak dinamik, anda hanya perlu menyalin demo rasmi. Jika perlu menambah kod dinamik, kami hanya melakukan yang ini sekarang dan akan terus menambahkannya sehingga siap pada masa hadapan.
Artikel berkaitan:
Pengenkapsulan lapisan pop timbul JS untuk gesaan maklumat yang biasa digunakan dalam aplikasi WEUI
Apakah pengetahuan yang boleh dipelajari melalui WeUI pada WeChat?

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



Javascript 是一个非常有个性的语言. 无论是从代码的组织, 还是代码的编程范式, 还是面向对象理论都独具一格. 而很早就在争论的Javascript 是不是面向对象语言这个问题, 显然已有答案. 但是, 即使 Javascript 叱咤风云二十年, 如果想要看懂 jQuery, Angularjs, 甚至是 React 等流行框架, 观看《黑马云课堂JavaScript 高级框架设计视频教程》就对了。

Dalam era maklumat hari ini, laman web telah menjadi alat penting untuk orang ramai mendapatkan maklumat dan berkomunikasi. Tapak web responsif boleh menyesuaikan diri dengan pelbagai peranti dan memberikan pengguna pengalaman berkualiti tinggi, yang telah menjadi tumpuan dalam pembangunan tapak web moden. Artikel ini akan memperkenalkan cara menggunakan PHP dan AngularJS untuk membina tapak web responsif untuk memberikan pengalaman pengguna yang berkualiti tinggi. Pengenalan kepada PHP PHP ialah bahasa pengaturcaraan sisi pelayan sumber terbuka yang sesuai untuk pembangunan web. PHP mempunyai banyak kelebihan, seperti mudah dipelajari, merentas platform, perpustakaan alat yang kaya, kecekapan pembangunan

Dengan pembangunan berterusan Internet, aplikasi Web telah menjadi bahagian penting dalam pembinaan maklumat perusahaan dan cara kerja pemodenan yang diperlukan. Untuk menjadikan aplikasi web mudah dibangunkan, diselenggara dan dikembangkan, pembangun perlu memilih rangka kerja teknikal dan bahasa pengaturcaraan yang sesuai dengan keperluan pembangunan mereka. PHP dan AngularJS ialah dua teknologi pembangunan web yang sangat popular. Kedua-duanya adalah penyelesaian bahagian pelayan dan bahagian pelanggan. Penggunaan gabungan mereka boleh meningkatkan kecekapan pembangunan dan pengalaman pengguna aplikasi web. Kelebihan PHPPHP

Dengan perkembangan pesat teknologi Web, Aplikasi Web Halaman Tunggal (SinglePage Application, SPA) telah menjadi model aplikasi Web yang semakin popular. Berbanding dengan aplikasi web berbilang halaman tradisional, kelebihan terbesar SPA ialah pengalaman pengguna lebih lancar, dan tekanan pengkomputeran pada pelayan juga sangat berkurangan. Dalam artikel ini, kami akan memperkenalkan cara membina SPA mudah menggunakan Flask dan AngularJS. Flask ialah Py ringan

Dengan populariti aplikasi web, rangka kerja bahagian hadapan AngularJS telah menjadi semakin popular. AngularJS ialah rangka kerja JavaScript yang dibangunkan oleh Google yang membantu anda membina aplikasi web dengan keupayaan aplikasi web dinamik. Sebaliknya, untuk pengaturcaraan bahagian belakang, PHP ialah bahasa pengaturcaraan yang sangat popular. Jika anda menggunakan PHP untuk pengaturcaraan sisi pelayan, maka menggunakan PHP dengan AngularJS akan membawa lebih banyak kesan dinamik ke tapak web anda.

Dengan populariti Internet, semakin ramai orang menggunakan rangkaian untuk memindahkan dan berkongsi fail. Namun, atas pelbagai sebab, pengurusan fail menggunakan kaedah tradisional seperti FTP tidak dapat memenuhi keperluan pengguna moden. Oleh itu, mewujudkan platform pengurusan fail dalam talian yang mudah digunakan, cekap dan selamat telah menjadi satu trend. Platform pengurusan fail dalam talian yang diperkenalkan dalam artikel ini adalah berdasarkan PHP dan AngularJS Ia boleh melakukan muat naik, memuat turun, mengedit, memadam dan operasi lain dengan mudah, dan menyediakan satu siri fungsi yang berkuasa, seperti perkongsian fail, carian,

这篇文章介绍的内容是关于AngularJS基础入门介绍,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下。

Dengan populariti dan perkembangan Internet, pembangunan bahagian hadapan menjadi semakin penting. Sebagai pembangun bahagian hadapan, kita perlu memahami dan menguasai pelbagai alatan dan teknologi pembangunan. Antaranya, PHP dan AngularJS adalah dua alat yang sangat berguna dan popular. Dalam artikel ini, kami akan menerangkan cara menggunakan kedua-dua alat ini untuk pembangunan bahagian hadapan. 1. Pengenalan kepada PHP PHP ialah bahasa skrip bahagian pelayan sumber terbuka yang popular Ia sesuai untuk pembangunan web dan boleh dijalankan pada pelayan web dan pelbagai sistem pengendalian. Kelebihan PHP adalah kesederhanaan, kelajuan dan kemudahan
