国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

一個(gè)基于Angular+Ionic+Phonegap的混合APP實(shí)戰(zhàn)

孫淑建 / 2417人閱讀

摘要：有二維碼掃描功能，還做了類似消息可拖拽效果，上拉下拉刷新，輪播圖組件。特別適合用于基于模式的移動(dòng)應(yīng)用程序開發(fā)。簡(jiǎn)介是一個(gè)用基于，和的，創(chuàng)建移動(dòng)跨平臺(tái)移動(dòng)應(yīng)用程序的快速開發(fā)平臺(tái)。

這個(gè)項(xiàng)目做得比較早，當(dāng)時(shí)是基于ionic1和angular1做的。做了四個(gè)tabs的app，首頁(yè)模仿攜程首頁(yè)，第二頁(yè)主要是phonegap調(diào)用手機(jī)核心功能，第三頁(yè)模仿微信和qq聊天頁(yè)，第四頁(yè)模仿一般手機(jī)的表單設(shè)置頁(yè)。同時(shí)還模仿知乎做了一個(gè)側(cè)邊欄頁(yè)(賬號(hào)：wty，密碼：123456)。

沒有后臺(tái)，純前端展示，功能還比較多，調(diào)用系統(tǒng)的聲音、震動(dòng)和手機(jī)設(shè)備信息等。有二維碼掃描功能，還做了類似qq消息可拖拽效果，上拉下拉刷新，輪播圖組件。

安卓apk下載

線上地址

一、基本概念 1. Angularjs簡(jiǎn)介

Angularjs是一款優(yōu)秀的前端 JS 框架，已用于 Google 的多款產(chǎn)品當(dāng)中 如 Gmail、Maps、Calender 等。AngularJS有著諸多特性，最為核心的是：MVVM、模塊化、自動(dòng)化雙向數(shù)據(jù)綁定、語(yǔ)義標(biāo)簽、依賴注入，等等。

2. Ionic簡(jiǎn)介

Ionic是一個(gè)強(qiáng)大的 HTML5 應(yīng)用程序開發(fā)框架，具有速度快，界面現(xiàn)代化、美觀等特點(diǎn)。特別適合用于基于 Hybird 模式的 HTML5 移動(dòng)應(yīng)用程序開發(fā)。

3. Phonegap簡(jiǎn)介

Phonegap是一個(gè)用基于 HTML， CSS 和 JavaScript 的，創(chuàng)建移動(dòng)跨平臺(tái)移動(dòng)應(yīng)用程序的
快速開發(fā)平臺(tái)。它使開發(fā)者能夠手機(jī)的核心功能——包括地理定位，加速器，聯(lián)系人，聲音和振動(dòng)等，此外PhoneGap 擁有豐富的插件，可以調(diào)用。

二、項(xiàng)目各tab主要功能介紹 1. 初始化配置

手機(jī)上app顯示的圖標(biāo)、名稱、開機(jī)畫面

注入依賴

隱藏顯示鍵盤

hammer觸屏手勢(shì)插件配置

菜單欄的位置、導(dǎo)航條文字位置、回退按鈕圖標(biāo)等

切換頁(yè)面的過(guò)渡效果（bug）

AngularUI Router

services服務(wù)

2. tab-home

幻燈指令 ion-slide-box

觸屏手勢(shì)切換頁(yè)面

柵格系統(tǒng)

觸屏手勢(shì)touch-bases和hammerjs

ng-init、ng-click、 ng-src、 ng-repeat指令，雙向數(shù)據(jù)綁定

打開app內(nèi)置的瀏覽器webview方法

上拉刷新

3. tab-dash

phonegap功能的應(yīng)用：二維碼掃描、調(diào)用系統(tǒng)彈窗、震動(dòng)鈴聲功能、獲取設(shè)備信息

ion-side-menus側(cè)邊欄功能

ionic 動(dòng)態(tài)組件 $ionicModal彈出登錄界面

ng-show、ng-model 雙向數(shù)據(jù)綁定實(shí)現(xiàn)登錄驗(yàn)證的實(shí)時(shí)監(jiān)控

ionic 動(dòng)態(tài)組件 $ionicPopup彈出注銷界面

更換頭像（訪問(wèn)手機(jī)攝像頭、圖庫(kù)功能）

切換主題顏色

4. tab-chats

刪除按鈕和重新排序按鈕

下拉刷新

滑動(dòng)顯示分享編輯按鈕

長(zhǎng)按顯示動(dòng)態(tài)組件$ionicActionSheet選項(xiàng)

紅色消息badge

5. tab-account

ionic的表單應(yīng)用

“聲音”選項(xiàng)被選中播放鈴聲

“震動(dòng)”選項(xiàng)被選中開始震動(dòng)

實(shí)現(xiàn)全選、全不選、反選的功能

ionic動(dòng)態(tài)組件$ionicPopup

根據(jù)被選擇數(shù)顯示相應(yīng)彈窗內(nèi)容

三、演示如下：

ionic實(shí)戰(zhàn)動(dòng)態(tài)圖演示

四、總 結(jié)

優(yōu)點(diǎn)： 通過(guò)使用 web 技術(shù)開發(fā) App，采用 Cordova/PhoneGap之類進(jìn)行打包封裝。優(yōu)點(diǎn)是采用標(biāo)準(zhǔn)的web技術(shù)開發(fā)，避免了不同平臺(tái)原生開發(fā)體系的學(xué)習(xí)，學(xué)習(xí)成本低， 上手快、 效率高，一次開發(fā)微信 wap app 全部搞定；

缺點(diǎn)：app 在 android 平臺(tái)性能上有一些損失， 但是相信硬件的發(fā)展會(huì)接近原生。

歡迎大家star學(xué)習(xí)交流：github地址 | 我的博客

參考文獻(xiàn)

PhoneGap3.4安裝視頻教程下載

Angular1官網(wǎng)

Angular中文社區(qū)

AngularJS Nice Things

phonegap 中文網(wǎng)

ionic官網(wǎng)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/107524.html

相關(guān)文章

  • 用WijmoJS玩轉(zhuǎn)您的Web應(yīng)用 —— Ionic

    摘要：在之前的文章中，我們已經(jīng)介紹了使用與三大框架結(jié)合搭建您的應(yīng)用程序。使用創(chuàng)建應(yīng)用程序。擴(kuò)展閱讀用玩轉(zhuǎn)您的應(yīng)用用玩轉(zhuǎn)您的應(yīng)用用玩轉(zhuǎn)您的應(yīng)用近期活動(dòng)問(wèn)卷調(diào)查揚(yáng)帆萬(wàn)里，因您前行使用反饋意見征集 前言： 在本文中，我們將著重介紹如何將WijmoJS與Ionic一起使用，來(lái)創(chuàng)建一款移動(dòng)端支持優(yōu)先、快捷高效的應(yīng)用程序。在之前的文章中，我們已經(jīng)介紹了使用WijmoJS與Angular、React、Vu...

    fjcgreat 評(píng)論0 收藏0

  • 大前端2018現(xiàn)在上車還還得及么

    摘要：面向?qū)ο笕筇卣骼^承性多態(tài)性封裝性接口。第五階段封裝一個(gè)屬于自己的框架框架封裝基礎(chǔ)事件流冒泡捕獲事件對(duì)象事件框架選擇框架。核心模塊和對(duì)象全局對(duì)象，，，事件驅(qū)動(dòng)，事件發(fā)射器加密解密，路徑操作，序列化和反序列化文件流操作服務(wù)端與客戶端。 第一階段： HTML+CSS:HTML進(jìn)階、CSS進(jìn)階、div+css布局、HTML+css整站開發(fā)、 JavaScript基礎(chǔ)：Js基礎(chǔ)教程、js內(nèi)置對(duì)...

    stormgens 評(píng)論0 收藏0

  • 大前端2018現(xiàn)在上車還還得及么

    摘要：面向?qū)ο笕筇卣骼^承性多態(tài)性封裝性接口。第五階段封裝一個(gè)屬于自己的框架框架封裝基礎(chǔ)事件流冒泡捕獲事件對(duì)象事件框架選擇框架。核心模塊和對(duì)象全局對(duì)象，，，事件驅(qū)動(dòng)，事件發(fā)射器加密解密，路徑操作，序列化和反序列化文件流操作服務(wù)端與客戶端。 第一階段： HTML+CSS:HTML進(jìn)階、CSS進(jìn)階、div+css布局、HTML+css整站開發(fā)、 JavaScript基礎(chǔ)：Js基礎(chǔ)教程、js內(nèi)置對(duì)...

    mylxsw 評(píng)論0 收藏0

  • Capacitor 新一代混合應(yīng)用“神器” 會(huì)代替Cordova嗎？？

    摘要：介紹暢想是由團(tuán)隊(duì)最新開發(fā)維護(hù)的一個(gè)跨平臺(tái)的應(yīng)用程序容器，可以輕松構(gòu)建在，，和上本機(jī)運(yùn)行的應(yīng)用程序。后者旨在替代或者說(shuō)是進(jìn)化。希望看到在未來(lái)發(fā)展，以及正式發(fā)布。我認(rèn)為它有可能大大改善混合應(yīng)用開發(fā)體驗(yàn)。 1.介紹or暢想 Capacitor是由ionic團(tuán)隊(duì)最新開發(fā)維護(hù)的一個(gè)跨平臺(tái)的應(yīng)用程序容器，可以輕松構(gòu)建在iOS，Android，Electron和Web上本機(jī)運(yùn)行的Web應(yīng)用程序。我們...

    番茄西紅柿 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<