摘要:有二維碼掃描功能,還做了類似消息可拖拽效果,上拉下拉刷新,輪播圖組件。特別適合用于基于模式的移動應用程序開發。簡介是一個用基于,和的,創建移動跨平臺移動應用程序的快速開發平臺。
這個項目做得比較早,當時是基于ionic1和angular1做的。做了四個tabs的app,首頁模仿攜程首頁,第二頁主要是phonegap調用手機核心功能,第三頁模仿微信和qq聊天頁,第四頁模仿一般手機的表單設置頁。同時還模仿知乎做了一個側邊欄頁(賬號:wty,密碼:123456)。
沒有后臺,純前端展示,功能還比較多,調用系統的聲音、震動和手機設備信息等。有二維碼掃描功能,還做了類似qq消息可拖拽效果,上拉下拉刷新,輪播圖組件。
安卓apk下載
線上地址
一、基本概念 1. Angularjs簡介Angularjs是一款優秀的前端 JS 框架,已用于 Google 的多款產品當中 如 Gmail、Maps、Calender 等。AngularJS有著諸多特性,最為核心的是:MVVM、模塊化、自動化雙向數據綁定、語義標簽、依賴注入,等等。
2. Ionic簡介Ionic是一個強大的 HTML5 應用程序開發框架,具有速度快,界面現代化、美觀等特點。特別適合用于基于 Hybird 模式的 HTML5 移動應用程序開發。
3. Phonegap簡介Phonegap是一個用基于 HTML, CSS 和 JavaScript 的,創建移動跨平臺移動應用程序的
快速開發平臺。它使開發者能夠手機的核心功能——包括地理定位,加速器,聯系人,聲音和振動等,此外PhoneGap 擁有豐富的插件,可以調用。
手機上app顯示的圖標、名稱、開機畫面
注入依賴
隱藏顯示鍵盤
hammer觸屏手勢插件配置
菜單欄的位置、導航條文字位置、回退按鈕圖標等
切換頁面的過渡效果(bug)
AngularUI Router
services服務
2. tab-home幻燈指令 ion-slide-box
觸屏手勢切換頁面
柵格系統
觸屏手勢touch-bases和hammerjs
ng-init、ng-click、 ng-src、 ng-repeat指令,雙向數據綁定
打開app內置的瀏覽器webview方法
上拉刷新
3. tab-dashphonegap功能的應用:二維碼掃描、調用系統彈窗、震動鈴聲功能、獲取設備信息
ion-side-menus側邊欄功能
ionic 動態組件 $ionicModal彈出登錄界面
ng-show、ng-model 雙向數據綁定實現登錄驗證的實時監控
ionic 動態組件 $ionicPopup彈出注銷界面
更換頭像(訪問手機攝像頭、圖庫功能)
切換主題顏色
4. tab-chats刪除按鈕和重新排序按鈕
下拉刷新
滑動顯示分享編輯按鈕
長按顯示動態組件$ionicActionSheet選項
紅色消息badge
5. tab-accountionic的表單應用
“聲音”選項被選中播放鈴聲
“震動”選項被選中開始震動
實現全選、全不選、反選的功能
ionic動態組件$ionicPopup
根據被選擇數顯示相應彈窗內容
三、演示如下:ionic實戰動態圖演示
四、總 結優點: 通過使用 web 技術開發 App,采用 Cordova/PhoneGap之類進行打包封裝。優點是采用標準的web技術開發,避免了不同平臺原生開發體系的學習,學習成本低, 上手快、 效率高,一次開發微信 wap app 全部搞定;
缺點:app 在 android 平臺性能上有一些損失, 但是相信硬件的發展會接近原生。
歡迎大家star學習交流:github地址 | 我的博客
參考文獻PhoneGap3.4安裝視頻教程下載
Angular1官網
Angular中文社區
AngularJS Nice Things
phonegap 中文網
ionic官網
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/107524.html
摘要:在之前的文章中,我們已經介紹了使用與三大框架結合搭建您的應用程序。使用創建應用程序。擴展閱讀用玩轉您的應用用玩轉您的應用用玩轉您的應用近期活動問卷調查揚帆萬里,因您前行使用反饋意見征集 前言: 在本文中,我們將著重介紹如何將WijmoJS與Ionic一起使用,來創建一款移動端支持優先、快捷高效的應用程序。在之前的文章中,我們已經介紹了使用WijmoJS與Angular、React、Vu...
摘要:面向對象三大特征繼承性多態性封裝性接口。第五階段封裝一個屬于自己的框架框架封裝基礎事件流冒泡捕獲事件對象事件框架選擇框架。核心模塊和對象全局對象,,,事件驅動,事件發射器加密解密,路徑操作,序列化和反序列化文件流操作服務端與客戶端。 第一階段: HTML+CSS:HTML進階、CSS進階、div+css布局、HTML+css整站開發、 JavaScript基礎:Js基礎教程、js內置對...
摘要:面向對象三大特征繼承性多態性封裝性接口。第五階段封裝一個屬于自己的框架框架封裝基礎事件流冒泡捕獲事件對象事件框架選擇框架。核心模塊和對象全局對象,,,事件驅動,事件發射器加密解密,路徑操作,序列化和反序列化文件流操作服務端與客戶端。 第一階段: HTML+CSS:HTML進階、CSS進階、div+css布局、HTML+css整站開發、 JavaScript基礎:Js基礎教程、js內置對...
摘要:介紹暢想是由團隊最新開發維護的一個跨平臺的應用程序容器,可以輕松構建在,,和上本機運行的應用程序。后者旨在替代或者說是進化。希望看到在未來發展,以及正式發布。我認為它有可能大大改善混合應用開發體驗。 1.介紹or暢想 Capacitor是由ionic團隊最新開發維護的一個跨平臺的應用程序容器,可以輕松構建在iOS,Android,Electron和Web上本機運行的Web應用程序。我們...
閱讀 1990·2021-11-22 19:20
閱讀 2633·2021-11-22 13:54
閱讀 1962·2021-09-04 16:40
閱讀 1823·2021-08-13 11:54
閱讀 2657·2019-08-30 15:55
閱讀 3465·2019-08-29 13:51
閱讀 528·2019-08-29 11:09
閱讀 3008·2019-08-26 14:06