http://blog.csdn.net/zoutongyuan/article/details/41910903?utm_source=tuicool
javaScript 寫(xiě)多了，要想真正提高js水平，研究其他js框架源碼是不錯(cuò)的選擇。Github上大部分都是js、CSS相關(guān)的項(xiàng)目，可以有目的性的 check out 下來(lái)，研讀研讀，還是非常收益的，跟隨nb的人，也會(huì)慢慢變的nb。
場(chǎng)景：有一個(gè)朋友，他公司是做移動(dòng)應(yīng)用開(kāi)發(fā)的，3個(gè)安卓開(kāi)發(fā)人員，3個(gè)iOS，然后是Java 開(kāi)發(fā)，美工 ，10多個(gè)人的公司，主要是以接項(xiàng)目為主，一個(gè)項(xiàng)目（電商、微信、聊天 類型的）大概在20萬(wàn)左右， 差不多1個(gè)半月 做完（代碼質(zhì)量能不能保證，不知道，不過(guò)我覺(jué)得開(kāi)發(fā)是一件很嚴(yán)謹(jǐn)?shù)氖拢_(kāi)發(fā)出高性能、高健壯性的程序，還是很難的），公司銷售很給力，能談下好幾個(gè)項(xiàng)目。問(wèn)題來(lái)了，要能同時(shí)進(jìn)行好幾個(gè)項(xiàng)目，就要招移動(dòng)開(kāi)發(fā)的人，如果有時(shí)沒(méi)接到項(xiàng)目，那 ，又會(huì)閑著。如果有些 客戶 要 做 wp ，黑莓的 ，那就做不來(lái)了。于是迫切 想 找一些跨平臺(tái)的 開(kāi)發(fā)技術(shù) 來(lái) 解決問(wèn)題？
這個(gè)場(chǎng)景是真實(shí)的，不是 yy，那么我們來(lái)玩玩 Ionic ，Apache Cordova 這些技術(shù)，這樣我們就有更深入的 理解了。
我做過(guò) 一些 安卓的小東西，ios 沒(méi)玩過(guò)；我是一個(gè) web技術(shù) 狂熱者，很看好web技術(shù)；我認(rèn)為那些Android 、ios 等等 將會(huì)慢慢 被 web 技術(shù) 取代，瀏覽器 作為跨平臺(tái)的中間件，將會(huì)成為主流。do not mind
尊重原創(chuàng)，轉(zhuǎn)載請(qǐng)注明出去：http://blog.csdn.NET/zoutongyuan/article/details/41910903
進(jìn)入主題吧。
1、Ionic 是什么？
好吧，我們看 Ionic 能給我們提供什么? 一個(gè)樣式庫(kù)，你可以使用它 來(lái) 裝飾你的 HTML 網(wǎng)頁(yè) ，看起來(lái) 想 移動(dòng)程序的 界面，什么 header 、content、footer、grid、list。這貌似沒(méi)什么 實(shí)質(zhì)性的東西， sencha touch ，jq 都能提供 。
一個(gè)用AngularJS 寫(xiě)的 工具庫(kù)，姑且叫它 組件庫(kù)吧。Ionic的 grid 設(shè)計(jì)的比較合理，比 bootstrap的 更強(qiáng)大。
當(dāng)然它 還包含 了angular-animate、angular-resource、angular-sanitize、angular-ui-router，適應(yīng)移動(dòng)平臺(tái)的模塊庫(kù)。
2、Apache Cordova 是什么？
Apache Cordova 提供用 Javascript 訪問(wèn) 移動(dòng)平臺(tái) 的 API 。
其內(nèi)部是用每個(gè) 平臺(tái)下的 web view 組件，運(yùn)行 程序，然后實(shí)現(xiàn)了 每個(gè)平臺(tái)下的 一套 CordovaLib 供你寫(xiě)的程序調(diào)用，然后你就可以 調(diào)用 攝像頭、磁盤等 重api。
接下來(lái) 動(dòng)手玩玩。首先安裝nodejs，和平臺(tái)的 （ios || android）sdk，這里不在 累述
1、先安裝 cordova
npm install -g cordova2、安裝 Ionic
npm install -g ionic3、創(chuàng)建項(xiàng)目
ionic start todo blank4、配置平臺(tái)
ionic platform add android然后 在IDE中打開(kāi) 項(xiàng)目：
www是主目錄
index.html 是 主頁(yè)面
剛才我們配置 平臺(tái)的時(shí)候 ，工具幫我們做了一件事，創(chuàng)建 了一個(gè) 安卓 應(yīng)用，
創(chuàng)建一個(gè) CordovaApp 類，繼承自 CordovaActivity ， Activity 是 安卓的4大組件，表示可以看到 了一塊窗口。
它做了一個(gè) 引導(dǎo)，就是loadUrl，這里不做過(guò)多的 介紹，有興趣 我們以后深入研究，這里我們只是 發(fā)散性的引導(dǎo)。
現(xiàn)在，你就可以使用 ionic 和 Apache Cordova 提供的 api 來(lái) 開(kāi)發(fā) 跨平臺(tái)的應(yīng)用了。
來(lái)改我們的index.html
[html] view plain copy PRint?
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <link href="css/ionic.app.css" rel="stylesheet"> --> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> <!-- cordova script (this will be a 404 during development) --> <script src="cordova.js"></script> <!-- your app's js --> <script src="js/app.js"></script> </head> <body ng-app="todoApp" ng-controller="TodoController" ng-cloak> <ion-side-menus> <!-- Center content --> <ion-side-menu-content> <ion-header-bar class="bar-dark"> <button class="button button-icon" ng-click="toggleProjects()"> <i class="icon ion-navicon"></i> </button> <h1 class="title">{{activeProject.title}}</h1> <!-- New Task button--> <button class="button button-icon" ng-click="newTask()"> <i class="icon ion-compose"></i> </button> </ion-header-bar> <ion-content scroll="false"> <ion-list> <ion-item ng-repeat="task in activeProject.tasks"> {{task.title}} </ion-item> </ion-list> </ion-content> </ion-side-menu-content> <!-- Left menu --> <ion-side-menu side="left"> <ion-header-bar class="bar-dark"> <h1 class="title">Projects</h1> <button class="button button-icon ion-plus" ng-click="newProject()"> </button> </ion-header-bar> <ion-content scroll="false"> <ion-list> <ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}"> {{project.title}} </ion-item> </ion-list> </ion-content> </ion-side-menu> </ion-side-menus> <script id="new-task.html" type="text/ng-template"> <div class="modal"> <!-- Modal header bar --> <ion-header-bar class="bar-secondary"> <h1 class="title">New Task</h1> <button class="button button-clear button-positive" ng-click="closeNewTask()">Cancel</button> </ion-header-bar> <!-- Modal content area --> <ion-content> <form ng-submit="createTask(task)"> <div class="list"> <label class="item item-input"> <input type="text" placeholder="What do you need to do?" autofocus ng-model="task.title"> </label> </div> <div class="padding"> <button type="submit" class="button button-block button-positive">Create Task</button> </div> </form> </ion-content> </div> </script> </body> </html> js/app.js[javascript]%20view%20plain%20copy%20print?var todoApp = angular.module('todoApp', ['ionic']); todoApp.run(function ($ionicPlatform) { $ionicPlatform.ready(function () { if (window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardaccessoryBar(true); } if (window.StatusBar) { StatusBar.styleDefault(); } }); }); todoApp.controller('TodoController', function ($scope, $timeout, $ionicModal, Projects, $ionicSideMenuDelegate) { // A utility function for creating a new project // with the given projectTitle var createProject = function (projectTitle) { var newProject = Projects.newProject(projectTitle); $scope.projects.push(newProject); Projects.save($scope.projects); $scope.selectProject(newProject, $scope.projects.length - 1); } // Load or initialize projects $scope.projects = Projects.all(); // Grab the last active, or the first project $scope.activeProject = $scope.projects[Projects.getLastActiveIndex()]; // Called to create a new project $scope.newProject = function () { var projectTitle = prompt('Project name'); if (projectTitle) { createProject(projectTitle); } }; // Called to select the given project $scope.selectProject = function (project, index) { $scope.activeProject = project; Projects.setLastActiveIndex(index); $ionicSideMenuDelegate.toggleLeft(false); }; // Create our modal $ionicModal.fromTemplateUrl('new-task.html', function (modal) { $scope.taskModal = modal; }, { scope: $scope }); $scope.createTask = function (task) { if (!$scope.activeProject || !task) { return; } $scope.activeProject.tasks.push({ title: task.title }); $scope.taskModal.hide(); // Inefficient, but save all the projects Projects.save($scope.projects); task.title = ""; }; $scope.newTask = function () { $scope.taskModal.show(); }; $scope.closeNewTask = function () { $scope.taskModal.hide(); } $scope.toggleProjects = function () { $ionicSideMenuDelegate.toggleLeft(); }; // Try to create the first project, make sure to defer // this by using $timeout so everything is initialized // properly $timeout(function () { if ($scope.projects.length == 0) { while (true) { var projectTitle = prompt('Your first project title:'); if (projectTitle) { createProject(projectTitle); break; } } } }); }); todoApp.factory('Projects', function () { return { all: function () { var projectString = window.localStorage['projects']; if (projectString) { return angular.fromJson(projectString); } return []; }, save: function (projects) { window.localStorage['projects'] = angular.toJson(projects); }, newProject: function (projectTitle) { // Add a new project return { title: projectTitle, tasks: [] }; }, getLastActiveIndex: function () { return parseInt(window.localStorage['lastActiveProject']) || 0; }, setLastActiveIndex: function (index) { window.localStorage['lastActiveProject'] = index; } } }) 這個(gè)todo%20我們沒(méi)有用到 Apache%20Cordova%20的api，所以，這個(gè)項(xiàng)目在瀏覽器中%20也可以運(yùn)行。使用 $%20ionic%20serve在我的小米3 中 看看。使用下面命令，你可能要安裝好 驅(qū)動(dòng)，
$ ionic run android
最后編譯，
$ cordova build --release android來(lái)評(píng)價(jià)這一些技術(shù)吧。
天下大勢(shì)，合久必分，分久必合。
HTML5 + CSS3 + Javascript 最適合作為跨平臺(tái)的技術(shù)棧，其開(kāi)放 ，自由，每個(gè)人都可以 為這些技術(shù)的制定 ，發(fā)表意見(jiàn) ，像 使用 svg 、canvas 、css 3動(dòng)畫(huà) 開(kāi)發(fā)的游戲 ，已經(jīng)在撼動(dòng) 桌游， 手游 等 原生語(yǔ)言開(kāi)發(fā)的 應(yīng)用了，所以不僅僅是 應(yīng)用。
而 Apache Cordova 只是 一個(gè) 過(guò)渡階段的產(chǎn)物。對(duì)于 新技術(shù)的 出現(xiàn) ，是值得鼓勵(lì)的 。
讓我們拭目以待，web 技術(shù) 明天的發(fā)展吧。
============================================================================
The following commands need to be ran:1. npm install -g cordova2. npm install -g ionic3. ionic start <SampleProjectName> blank 4. ionic platform add [ios|android]5. npm install -g ios-sim6. npm install -g iso-deploy //Xcode must be installed into Mac OS before install the iso-deploy plugin due that it depends on Xcode tool7. ionic serve8. ionic run [ios|android|browser]
run <PLATFORM> [options] ...................... Run an Ionic project on a connected device [--livereload|-l] ........................ Live reload app dev files from the device (beta) [--address] .............................. Use specific address (livereload req.) [--port|-p] .............................. Dev server HTTP port (8100 default, livereload req.) [--livereload-port|-r] ................... Live Reload port (35729 default, livereload req.) [--consolelogs|-c] ....................... Print app console logs to Ionic CLI (livereload req.) [--serverlogs|-s] ........................ Print dev server logs to Ionic CLI (livereload req.) [--debug|--release] ...................... [--device|--emulator|--target=FOO]
ionic run ios --deviceionic run ios --emulatorionic run ios --target="iPhone-5s"ionic run ios --target="iPhone-6"ionic run ios --target="iPhone-6s"ionic run ios --emulator --target="iPhone-6s" -l HaideMacBook-Pro:sampleApp2 liuhaidl$ ionic run ios --emulator --target="iPhone-6s" -lSetup Live ReloadMultiple addresses available.Please select which address to use by entering its number from the list below:Note that the emulator/device must be able to access the given IP address 1) 192.168.31.241 (en0) 2) 9.197.226.42 (utun1)
com.ionicframework.sampleapp2937890: 17622logPath: /Users/liuhaidl/Desktop/AMTools/SourceCodes/mobile/sampleApp2/platforms/ios/cordova/console.logJS changed: www/js/app.jsHTML changed: www/index.html
9. ionic emulate [ios|android]
============================================================================
Run Command: ionic run iosError: xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instanceSolution: install Xcode tool from apple appstore
Run Command: ionic run iosAgreeing to the Xcode/iOS license requires admin privileges, please re-run as root via sudo.Error: Error code 69 for command: xcodebuild with args: -xcconfig,/Users/liuhaidl/Desktop/AMTools/SourceCodes/mobile/sampleApp/platforms/ios/cordova/build-debug.xcconfig,-project,sampleApp.xcodeproj,ARCHS=i386,-target,sampleApp,-configuration,Debug,-sdk,iphonesimulator,build,VALID_ARCHS=i386,CONFIGURATION_BUILD_DIR=/Users/liuhaidl/Desktop/AMTools/SourceCodes/mobile/sampleApp/platforms/ios/build/emulator,SHARED_PRECOMPS_DIR=/Users/liuhaidl/Desktop/AMTools/SourceCodes/mobile/sampleApp/platforms/ios/build/sharedpchSolution: sudo ionic run ios
HaideMacBook-Pro:emulator liuhaidl$ ls -lrttotal 1768drwxr-xr-x 3 root staff 102 2 7 21:39 include-rw-r--r-- 1 root staff 904440 2 7 21:39 libCordova.adrwxr-xr-x 3 root staff 102 2 7 21:39 sampleApp.app.dSYMdrwxr-xr-x 46 root staff 1564 2 7 21:39 sampleApp.appHaideMacBook-Pro:emulator liuhaidl$ pwd/Users/liuhaidl/Desktop/AMTools/SourceCodes/mobile/sampleApp/platforms/ios/build/emulator
Run Command: sudo ionic run ios
Error: No target specified for emulator. Deploying to iPhone-SE, 10.2 simulatorAn error was encountered processing the command (domain=com.apple.CoreSimulator.SimError, code=163):Unable to lookup in current state: Shutdown
Solution: The above issue has been fixed after I have created a new project using ionic command"ionic start <Create Project Name> blank"
Run Command: sudo ionic run ios
[....] Waiting up to 1 seconds for iOS device to be connected[....] Found 19759d43b40f63cc098d334c85af3798646b59c7 (N51AP, iPhone 5s (GSM), iphoneos, arm64) a.k.a. 'Angela' iPhone' connected through USB.Error: 2017-02-07 21:59:20.470 ios-deploy[11231:428045] [ !! ] Can't access app path '/Users/liuhaidl/Desktop/AMTools/SourceCodes/mobile/sampleApp/platforms/ios/build/device/sampleApp.app' : No such file or directoryError: Error code 253 for command: ios-deploy with args: --justlaunch,--no-wifi,-d,-b,/Users/liuhaidl/Desktop/AMTools/SourceCodes/mobile/sampleApp/platforms/ios/build/device/sampleApp.appSolution: sudo ionic run ios --device
Run Command: sudo ionic run ios
Check dependenciesSigning for "sampleApp" requires a development team. Select a development team in the project editor.Code signing is required for product type 'application' in SDK 'iOS 10.2'
The following build commands failed: Check dependencies(1 failure)Error: Error code 65 for command: xcodebuild with args: -xcconfig,/Users/liuhaidl/Desktop/AMTools/SourceCodes/mobile/sampleApp/platforms/ios/cordova/build-debug.xcconfig,-project,sampleApp.xcodeproj,ARCHS=armv7 arm64,-target,sampleApp,-configuration,Debug,-sdk,iphoneos,build,VALID_ARCHS=armv7 arm64,CONFIGURATION_BUILD_DIR=/Users/liuhaidl/Desktop/AMTools/SourceCodes/mobile/sampleApp/platforms/ios/build/device,SHARED_PRECOMPS_DIR=/Users/liuhaidl/Desktop/AMTools/SourceCodes/mobile/sampleApp/platforms/ios/build/sharedpchNo target specified for emulator. Deploying to iPhone-SE, 10.2 simulator//This is not a issue. It just shows you we have not set the certain iso version for simulator for it.
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
