Angularjs整合微信UI（weui）
angularjs
本文推薦給大家的是使用angularjs實現整合微信新推出的UI（weui）的全部過程，有相同需求的小夥伴可以參考下
引子
不久前，微信推出了自己的一套UI，我看有很多開發者將其應用在了一些前端框架中，例如react、vue 。最近自己在學習Angularjs，所以，也想把這個UI整合到這個框架，這幾天試了一下，簡單的套用了一個功能，現在分享給大家，分離做的不好，請高手指點。
適合讀者
有一定的Angularjs基礎，並且了解ngRoute、ngAnimate的人群。
包含文件
整合的時候，參考官方的演示頁面，自己也做了一個演示頁面，完全使用Angularjs做的，沒有引用其它框架。下面先說明一下引進的文件。
使用angular.min.js 1.4.9
使用angular-route.min.js 1.4.9
使用angular-route.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>登入後複製
程式碼中，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以及viewShowhow兩部分的顯示與隱藏。
.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: '/'
})登入後複製
下面，再來看看功能示範部分的頁面程式碼。
<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>登入後複製
在導覽頁面的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
});
}
}
}登入後複製
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
1 個月前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前
By 尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
3 週前
By DDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
2 週前
By DDD
威爾R.E.P.O.有交叉遊戲嗎？
1 個月前
By 尊渡假赌尊渡假赌尊渡假赌
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
2022年最新5款的angularjs教學從入門到精通
Jun 15, 2017 pm 05:50 PM
Javascript 是一個非常有個性的語言. 無論是從程式碼的組織, 還是程式碼的程式設計範式, 或物件導向理論都獨具一格. 而很早就在爭論的Javascript 是不是物件導向語言這個問題, 顯然已有答案. 但是, 即使Javascript 叱吒風雲二十年, 如果想要看懂jQuery, Angularjs, 甚至是React 等流行框架, 觀看《黑馬雲課堂JavaScript 高級框架設計視頻教程》就對了。
使用PHP和AngularJS建立響應式網站，提供優質的使用者體驗
Jun 27, 2023 pm 07:37 PM
在現今資訊時代，網站已成為人們獲取資訊和交流的重要工具。一個響應式的網站能夠適應各種設備，為使用者提供優質的體驗，成為了現代網站開發的熱點。本篇文章將介紹如何使用PHP和AngularJS建立響應式網站，進而提供優質的使用者體驗。 PHP介紹PHP是一種開源的伺服器端程式語言，非常適合Web開發。 PHP具有許多優點，如易於學習、跨平台、豐富的工具庫、開發效
使用PHP和AngularJS建立Web應用
May 27, 2023 pm 08:10 PM
隨著網路的不斷發展，Web應用已成為企業資訊化建設的重要組成部分，也是現代化工作的必要手段。為了讓Web應用能夠方便開發、維護和擴展，開發人員需要選擇適合自己開發需求的技術框架和程式語言。 PHP和AngularJS是兩種非常流行的Web開發技術，它們分別是伺服器端和客戶端的解決方案，透過結合使用可以大大提高Web應用的開發效率和使用體驗。 PHP的優勢PHP
使用Flask和AngularJS建立單頁Web應用程式
Jun 17, 2023 am 08:49 AM
隨著Web技術的快速發展，單頁Web應用程式（SinglePageApplication,SPA）已成為越來越流行的Web應用程式模型。相較於傳統的多頁Web應用程序，SPA的最大優勢在於使用者感受更加流暢，同時伺服器端的運算壓力也大幅減少。在本文中，我們將介紹如何使用Flask和AngularJS來建構一個簡單的SPA。 Flask是一款輕量級的Py
使用PHP和AngularJS開發一個線上文件管理平台，方便文件管理
Jun 27, 2023 pm 01:34 PM
隨著網路的普及，越來越多的人使用網路進行檔案傳輸和分享。然而，由於各種原因，使用傳統的FTP等方式進行檔案管理無法滿足現代使用者的需求。因此，建立一個易用、高效、安全的線上文件管理平台已成為了一種趨勢。本文介紹的線上文件管理平台，基於PHP和AngularJS，能夠方便地進行文件上傳、下載、編輯、刪除等操作，並且提供了一系列強大的功能，例如文件共享、搜尋、
AngularJS基礎入門介紹
Apr 21, 2018 am 10:37 AM
這篇文章介紹的內容是關於AngularJS基礎入門介紹，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下。
如何在PHP編程中使用AngularJS？
Jun 12, 2023 am 09:40 AM
隨著Web應用程式的普及，前端框架AngularJS變得越來越受歡迎。 AngularJS是一個由Google開發的JavaScript框架，它可以幫助你建立具有動態Web應用程式功能的網頁應用程式。另一方面，對於後端編程，PHP是非常受歡迎的程式語言。如果您正在使用PHP進行伺服器端編程，那麼結合AngularJS使用PHP將可以為您的網站帶來更多的動態效
如何使用PHP和AngularJS進行前端開發
May 11, 2023 pm 05:18 PM
隨著網路的普及和發展，前端開發已變得越來越重要。身為前端開發人員，我們需要了解並掌握各種開發工具和技術。其中，PHP和AngularJS是兩種非常有用且受歡迎的工具。在本文中，我們將介紹如何使用這兩種工具進行前端開發。一、PHP介紹PHP是一種流行的開源伺服器端腳本語言，它適用於Web開發，可以在Web伺服器和各種作業系統上運作。 PHP的優點是簡單、快速、便
