混合app開發(fā)基礎(chǔ)1課件筆記

第1章移動開發(fā)基礎(chǔ)介 App開發(fā)方式介 App三種開發(fā)方式對 混合APP開 Ionic介 ReactNative介 Jquery介 AppCan介 Cordova介 Ng-cordova介 ES6介 Angular介 Angular2介 Ionic2介 第2章學(xué)習(xí)方法介 第3章Ionic 第4章Ionic 石webappappappapp開發(fā)方式的選擇，不要為了混合而混合。app的開發(fā)方式是未來的主流趨勢。JqueryReactHTML5，簡稱“HTML5+”，是為了更好的推進(jìn)HTML5的、更好的為HTML5開發(fā)者服務(wù)而由產(chǎn)業(yè)鏈主流廠商共同組成的一個。致力于整合資源，建立圍繞HTML5開發(fā)者的生態(tài)系統(tǒng)，通過HTMLl5開發(fā)者服務(wù)。W3C的指導(dǎo)單位CSDN和DCloud是的處單位DcloudEmmet語法:HBuilderweb開發(fā)工具。它能大幅提升開發(fā)效率，對程序員也設(shè)計了更人文的UI，它包括最全面的語法庫和瀏覽器兼容性數(shù)據(jù)。到現(xiàn)在5+RuntimeH5H5的能力和原生操作系統(tǒng)的產(chǎn)品。app的性能很好，用戶體驗很高api40萬+IonicIonic官網(wǎng) Ionic中文網(wǎng)IonicIONIC是目前最有潛力的一款HTML5應(yīng)用開發(fā)框架。通過SASS構(gòu)建應(yīng)用程序，它提供了很多UI組件來幫助開發(fā)者開發(fā)強大的應(yīng)用。它使用JavaScriptMVVM框架和AngularJS來增強應(yīng)用。提供數(shù)據(jù)的雙向綁定，Web和移動開發(fā)者的共同選擇。IonicWEB開發(fā)技術(shù)，基于HTML5創(chuàng)建類似于平臺原生應(yīng)用的一個開發(fā)框架。Ionic框的目的是從web的角度開發(fā)應(yīng)用，基于PhoneGap的編譯平臺，可以實現(xiàn)IonicCSS框架-AppCSSionic這部分的實現(xiàn)使用了ionicons圖標(biāo)樣式庫。JavaScript-Web應(yīng)用開發(fā)框架。ionicAngularJSAngularJSionicAngularJSUIRouter實現(xiàn)前端路由。命令行/CLI-命令行工具集用來簡化應(yīng)用的開發(fā)、構(gòu)造和仿真運行。ionic命令行工具使用了Cordova，依賴于平臺SDK（Android&iOS）實現(xiàn)將移動Web項目打包成原生App。IonicAngularjsMVCSASSUI組件 Ionic開發(fā)有哪些由于ionic使用了HTML5和CSS3的一些范，所以要求iOS7+/在低于這些版本的上使用ionic開發(fā)的應(yīng)用，有時會發(fā)生莫名其妙的Ionic ReactNativeRN官網(wǎng)RN中文網(wǎng) ReactnativeReactNative實現(xiàn)是什么ReactNative里面webviewHybridappJS是用的JavascriptCore。把Nativecode十來個最基本的類（RCTDeviceEventEmitter、RCTRenderingPerf等）、或組件（RCTView、RCTTextField、RCTTextView、RCTModalFullscreenView等）封裝成二十來個基本組件（Popover、Listviewcss的子集，用來解決樣式問題，相當(dāng)復(fù)雜和強大，靠這個才能將Native的組件組成JS層的基本組件再組成業(yè)務(wù)端的業(yè)務(wù)組件ReactNativeJS的工程師解決的是「將基本組件拼裝成可用的React組件」的問題，寫NativeCode的工程師解決的是「提供組件，提供ReactNativeNative端提供的是基本控件，JS可以自由組合可以直接使用Native原生的「牛」動畫。JSapp。React 官網(wǎng)地址 中文網(wǎng)地址/jquery.htmlAPi學(xué)習(xí)地址http: webweb應(yīng)用程jQuery適用于所有流行的智能和平板電jQuery構(gòu)建于jQuery庫之上，這使其更易學(xué)習(xí)，如果您通jQueryHTML5、CSS3、JavaScriptAJAX通過盡可能少的代碼來完成AppCan官網(wǎng)地址 AppCan開發(fā)平臺是基于HTML5技術(shù)的跨平臺移動應(yīng)用快速開發(fā)一體化解決方案。開發(fā)者利用HTML5+CSS3+JavaScript技術(shù)可以快速地開發(fā)與本 平臺提供了UI快速開發(fā)框架、本地功能調(diào)用API接口、應(yīng)用打包系統(tǒng)、IDE集成開發(fā)環(huán)境和本地應(yīng)用調(diào)試模擬接口，人性化的開發(fā)環(huán)境，豐富的開發(fā)資源，強大的服務(wù)支持，使開發(fā)者可項目演示 3、根據(jù)快速開始的指引或者從上找一些快速開始的kit學(xué)習(xí)，勤api都搞過一次。4、加qq群 每天都應(yīng)該上的幾個CnodeCordovaCordovaCordovaAPIAPI，移動應(yīng)用能夠以JavaScript原生的設(shè)備功能，如頭、麥克風(fēng)等。Cordova支持如下移動操作系統(tǒng)：iOSAndroid,ubuntuphoneosBlackberry,WindowsPhone,PalmWebOS,Bada和Symbian。phonegapCordova是貢獻(xiàn)給Apache后的開源項目，是從PhoneGap中抽出的代碼，目前(PhoneGap和ApacheCordova之間的)唯一區(qū)別是的包的名字，這Ng-cordova官網(wǎng)地址 Ng-cordovangCordovaCordovaApiAngularJs服務(wù)和AngularJs代碼中設(shè)備能力Api。cordovasucesserrorjsangularjs$scope對象和注入的方法的，只能全局的方法和變量，這樣會導(dǎo)致很多麻jsngCordova應(yīng)該可以解決AngularAngular中文 Angular官 AngularAngularJS誕生于2009年，由MiskoHevery等人創(chuàng)建，后為所購。是一款優(yōu)秀的前端JS框架，已經(jīng)被用于的多款產(chǎn)品當(dāng)中。AngularJS有著諸多特性，最為的是：MVVM、模塊化、自動化雙向數(shù)據(jù)AngularDirectivejQueryDirective的使用ng模塊化比較大膽的引入了依賴注入，能夠很容易的寫出可復(fù)用的代碼，對于敏捷開發(fā)的團隊來說非常有幫助，我們的項目從上線到目前，UI變化很js的代碼基本上很少改動。Angular2、AngularCRUD4、hybrid開發(fā)AngularES6ES6199611月，JavaScriptNetscapeJavaScript提交ECMA，希望這種語言能夠成為國際標(biāo)準(zhǔn)。次年，ECMA發(fā)布262號標(biāo)準(zhǔn)文件（ECMA-262）的第一版，規(guī)定了瀏覽器語言的標(biāo)ECMAScriptECMAScript1.0版。ES6ECMAScriptJavaScript的關(guān)系是，前者是后者的規(guī)格，后者是前者的一20156月，ECMAScript6Node.jsJavaScriptES6的支持度，比瀏覽器更高。通過它們，可以體驗ES6的特性。編程，Generatorangularnode中都有很好的實現(xiàn)了。ES6ECMAScript6址 Angular2官網(wǎng)地址Angular2.0的一切Angular2初體驗發(fā)布Angular2BetaAngular2單的一個內(nèi)部工具。隨著時間的推移，各種特性被加入進(jìn)去以適應(yīng)不同場景WEB——在語言方面，ECMAScript6的標(biāo)準(zhǔn)已經(jīng)完成，這意味著瀏覽器將很快支持例如模塊、類、lambda表達(dá)式、generator等新的特性，JavaScript的開發(fā)體驗。Angular1.xWEB簡單易用——說實話，Angular1.x太復(fù)雜了，學(xué)習(xí)曲線太陡峭了，這讓人望而生畏。AngularAngular2移動化——想想5年 都是和平板。Angular1.x沒有針對移動應(yīng)用特別優(yōu)化，并且缺少一些關(guān)鍵Angular2現(xiàn)代化：Angular2.0將把ES6和“常青”現(xiàn)代瀏覽器（自動更新到版Ionic2Ionic2第6章IonicIoniccss如果你對AngularJS這樣的東西不感，可以只使用ionic的CSSHTMLionic.cssionicCSS框架主要提供預(yù)定義CSS類，來幫助我們快速構(gòu)建適用于端的UI。Ioniccss.bar-header-.bar-subheaderheader.bar-footer-.bar-subfooterfooter.content-.scroll-content-bar<any<any標(biāo)題文字-對包含標(biāo)題文字的元素應(yīng)用.titleh1元素。-對用作按鈕的元素，應(yīng)用.buttonbuttona元素-包含一組按鈕。對用作的元素，應(yīng)用.button-bar樣式，通常使用div元素作為。bar<any<anyclass="positive-bgenergized"...</any>.icon-將元素為圖.ion-{icon-name}-要使用的具體圖<any<anyclass="iconion-ioniccalm"></any><any<anyclass="padding-top">.padding-top</any><any<anyclass="list"><anyclass="item">...</any><anyclass="item">...</any><any<anyclass="item">...</any><anyclass="item">...</any></any>-<any<anyclass="itemitem-toggle"><labelclass="toggletoggle-balanced"<inputtype="checkbox"<divclass="track"><divclass="handle"></div></div></label></any><any<anyclass="itemitem-chexkbox"><anyclass="checkbox"<inputtype="checkbox"</any></any><label<labelclass="itemitem-radio"><inputtype="radio"name="group"><divclass="item-content">f支付寶客戶端支付</div><iclass="radio-iconion-checkmarkassertive"></i></label><any<anyclass="list"><any<anyclass="itemitem-radio">...</any><anyclass="itemitem-radio">...</any></any><any<anyclass="itemrange"<anyclass="iconicon-volume-low"></any><input<inputtype="range"name="volume"><anyclass="iconicon-volume-high"></any></any><any<anyclass=itemitem-select”<labelclass="item-input"><anyclass="input-label"></any><select><option>...</option><option>...</option>...</select></</label></any><anyclass="tabs"><anyclass="tab-item">...</any><anyclass="tab-item">...</any>...</<anyclass="tabs"><anyclass="tab-item">...</any><anyclass="tab-item">...</any>...</any>在.tab-item同級.has-badge樣<any<anyclass="tabs"><anyclass="tab-itemhas-badge"<anyclass="badge">...</any></any>...</any>第7章IonicIonicionicAngularJSUI組件AngularJS的指令，便于我們在開發(fā)中快速構(gòu)建應(yīng)用界面。ionicion-nav-viewAngularUIRouteui-<ion-nav-<ion-nav-view></ion-nav-view>cache-view-是否對這個模板視圖進(jìn)行緩存允許值為：true|falsetrue<ion-header-<ion-header-bar>...</ion-header-bar>align-title-設(shè)置標(biāo)題文字的對齊方式。允許值：left|right|center，默認(rèn)center。no-tap-scroll-當(dāng)點擊標(biāo)題時是否將內(nèi)容區(qū)域自動滾動到最開始。允許值：true|falsetrue。<ion-footer-<ion-footer-bar>...</ion-footer-bar>align-title-設(shè)置標(biāo)題文本的對齊方式。允許值：left|right|center<ion-<ion-content>...</ion-content>ion-contentheaderfooter以外的剩余區(qū)域。當(dāng)內(nèi)容超過可視區(qū)域時，ion-content可以滾動以顯示被隱藏的部分。ionicoverflow-scroll屬性設(shè)<ion-<ion-tabs><ion-tabtitle="...">...</ion-tab><ion-tabtitle="...">...</ion-tab>...</ion-tabs> ion-tabs指令放在ion-content之內(nèi)ion-tabion-viewionic在計算布局時可select(index)index0index0，1，selectedIndex如果當(dāng)前沒有選中的選項頁，則返回-1。<ion-<ion-list><ion-item>...</ion-item><ion-<ion-item>...</ion-item></ion-list>type-typelist-inset|card。這兩card列表有邊框的陰影效果。show-delete-deleteshow-deletedelete按鈕（ion-delete-button），使用這個屬性來通知列表是否顯示元素刪除按鈕。允許的值為：true|falseshow-reorder-reordershow-reorderreorder按鈕（ion-reorder-button）值為：true|falsecan-swipe-optioncan-swipeoption按鈕（ion-option-button），使用這個屬性來允許或通過向左滑動成員來打開option按鈕。允許的值為：true|falsetrue。ion-option-button-ion-tabscan-swipe屬性允許或滑動開啟選項按鈕。ion-delete-button-ion-tabsshow-delete屬性顯示或隱藏刪除按鈕ion-reorder-button-ion-tabsshow-reorder屬性顯示或隱藏重排按鈕API:showReorder([showReorder-顯示/式showDelete([showDelete-顯示/showDeletetrue|false式canSwipeItems([canSwipeItems-是否允許通過滑動方式來顯示成員canSwipeItems的允許值為：true|falsecloseOptionButtons-<ion-<ion-checkbox>...</ion-checkbox>1、使用ion-checkbox指令復(fù)選按鈕元素ng-model屬性，可以直接將選中狀態(tài)<ion-<ion-radio>...</ion-radio>HTMLradio相比，ion-radio<ion-<ion-toggle></ion-toggle>ng-model-ng-model屬性實現(xiàn)與作用域變量的雙向綁定。toggle-class-可以使用可選的toggle-class屬性為開關(guān)按鈕額外的樣式。比如：toggle-{color}用來配色方案。<ion-<ion-slide-box><ion-slide>...</ion-slide><ion-slide>...</ion-slide>...</ion-slide-box>does-continuedoes-continuetrue，就可以讓幻燈頁組首尾連接起來，循環(huán)切換。auto-y-是否自通過將auto-y屬性設(shè)置為true，可以讓幻燈頁自動切換。切換的間隔默認(rèn)是4000ms，slide-intervalslide-interval-自動的間隔時間，默認(rèn)為showr分頁器用來指示幻燈頁的選中狀態(tài)，位于幻燈片的底部。允許值為：true|pager-clickpager-clickon-slide-changedactive-slideupdate()update()slide(to[,speed])tospeedprevious()next()currentIndex()slideCount()模態(tài)框 框常用來供用戶進(jìn)行選擇或編輯，在模態(tài)框關(guān)閉之前，其他的用戶交互 在ionic中使用模態(tài)框有三個步驟<scriptid="a.html"type="text/ng-tem<ion-modal-<!--框內(nèi)容--</ion-modal- teString,options) teUrl,options)對象框?qū)ο笥幸韵路椒ㄓ糜陲@示、隱藏或刪除框show()-顯 hide()-隱 remove()-移 isShown()-框是否可視angular.module('testApp',.controller('MyController',function($scope,$ionicModal) teUrl('modal.html',scope:animation:'slide-in-}).then(function(modal)$scope.modal= $scope.openModal=function() $scope.closeModal=function() //$scope.$on('$destroy',function() //$scope.$on('modal.hide',function()// //$scope.$on('modal.removed',function()// 27上拉菜單titleTextbuttonstextcancelTextdestructiveText-選項按鈕的文本。如果不設(shè)置此字段，則上拉菜單中不出現(xiàn)buttonClickedcanceldestructiveButtonClicked-選項按鈕的回調(diào)函數(shù)，當(dāng)用戶點擊時觸cancelOnStateChangecssClassCSSangular.module('mySuperApp',angular.module('mySuperApp',.controller(function($scope,$ionicActionSheet)//$scope.show=function()//buttons:{text:'<b>Share</b>This'{text:'Move'}destructiveText:titleText:'ModifyyourcancelText:buttonClicked:function(index)return$ionicPopup.show(options).then(function(){$ionicPopup.show(options).then(function(){//這個函數(shù)在彈出框關(guān)閉時被調(diào)用});alert(options-confirm(options)-prompt(options)-js5151angular.module('mySuperApp',52.controller(function($scope,$ionicPopup,$timeout)//$scope.showPopup=function()$scope.data=//varmyPopup= te:'<inputtype="password"ng-title:'EnterWi-FisubTitle:'Pleaseusenormalscope:buttons:{text:'Cancel'{text:type:'button-onTap:function(e)if(!$scope.data.wifi)}elsereturn myPopup.then(function(res)console.log('Tapped!', $timeout(function()myPopup.close();//由于某種原因3 },//一個確 $scope.showCo