使用Ionic + Apache Cordova开发跨平台混合型的移动应用 - 非常好的手机开发初级文章!!!!!!

最新推荐文章于 2020-05-16 22:32:16 发布

LarryHai6

最新推荐文章于 2020-05-16 22:32:16 发布

阅读量3.5k

点赞数

分类专栏： IT-手机移动开发文章标签：移动开发 angularjs cordova html5 ionic

IT-手机移动开发专栏收录该内容

46 篇文章 0 订阅

订阅专栏

http://blog.csdn.net/zoutongyuan/article/details/41910903?utm_source=tuicool

JavaScript 写多了，要想真正提高js水平，研究其他js框架源码是不错的选择。Github上大部分都是js、css相关的项目，可以有目的性的 check out 下来，研读研读，还是非常收益的，跟随nb的人，也会慢慢变的nb。

场景：有一个朋友，他公司是做移动应用开发的，3个安卓开发人员，3个iOS，然后是Java 开发，美工，10多个人的公司，主要是以接项目为主，一个项目（电商、微信、聊天类型的）大概在20万左右，差不多1个半月做完（代码质量能不能保证，不知道，不过我觉得开发是一件很严谨的事，要开发出高性能、高健壮性的程序，还是很难的），公司销售很给力，能谈下好几个项目。问题来了，要能同时进行好几个项目，就要招移动开发的人，如果有时没接到项目，那，又会闲着。如果有些客户要做 wp ，黑莓的，那就做不来了。于是迫切想找一些跨平台的开发技术来解决问题？

这个场景是真实的，不是 yy，那么我们来玩玩 Ionic ，Apache Cordova 这些技术，这样我们就有更深入的理解了。

我做过一些安卓的小东西，ios 没玩过；我是一个 web技术狂热者，很看好web技术；我认为那些Android 、ios 等等将会慢慢被 web 技术取代，浏览器作为跨平台的中间件，将会成为主流。do not mind

尊重原创，转载请注明出去：http://blog.csdn.NET/zoutongyuan/article/details/41910903

进入主题吧。

1、Ionic 是什么？

好吧，我们看 Ionic 能给我们提供什么? 一个样式库，你可以使用它来装饰你的 HTML 网页，看起来想移动程序的界面，什么 header 、content、footer、grid、list。这貌似没什么实质性的东西， sencha touch ，jq 都能提供。

一个用AngularJS 写的工具库，姑且叫它组件库吧。Ionic的 grid 设计的比较合理，比 bootstrap的更强大。

当然它还包含了angular-animate、angular-resource、angular-sanitize、angular-ui-router，适应移动平台的模块库。

2、Apache Cordova 是什么？

Apache Cordova 提供用 Javascript 访问移动平台的 API 。

其内部是用每个平台下的 web view 组件，运行程序，然后实现了每个平台下的一套 CordovaLib 供你写的程序调用，然后你就可以调用摄像头、磁盘等重api。

接下来动手玩玩。首先安装nodejs，和平台的（ios || android）sdk，这里不在累述

1、先安装 cordova

npm install -g cordova

2、安装 Ionic

npm install -g ionic

3、创建项目

ionic start todo blank

4、配置平台

ionic platform add android

然后在IDE中打开项目：

www是主目录

index.html 是主页面

刚才我们配置平台的时候，工具帮我们做了一件事，创建了一个安卓应用，

创建一个 CordovaApp 类，继承自 CordovaActivity ， Activity 是安卓的4大组件，表示可以看到了一块窗口。

它做了一个引导，就是loadUrl，这里不做过多的介绍，有兴趣我们以后深入研究，这里我们只是发散性的引导。

现在，你就可以使用 ionic 和 Apache Cordova 提供的 api 来开发跨平台的应用了。

来改我们的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">
-->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="todoApp" ng-controller="TodoController" ng-cloak>
<ion-side-menus>
<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>
<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>
<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">
<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>
<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] view plain copy print ?

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;
}
}
})

这个todo 我们没有用到 Apache Cordova 的api，所以，这个项目在浏览器中也可以运行。

使用

$ ionic serve

在我的小米3 中看看。使用下面命令，你可能要安装好驱动，

$ ionic run android

最后编译，

$ cordova build --release android

来评价这一些技术吧。

天下大势，合久必分，分久必合。

HTML5 + CSS3 + Javascript 最适合作为跨平台的技术栈，其开放，自由，每个人都可以为这些技术的制定，发表意见，像使用 svg 、canvas 、css 3动画开发的游戏，已经在撼动桌游，手游等原生语言开发的应用了，所以不仅仅是应用。

而 Apache Cordova 只是一个过渡阶段的产物。对于新技术的出现，是值得鼓励的。

让我们拭目以待，web 技术明天的发展吧。

============================================================================

The following commands need to be ran:
1. npm install -g cordova
2. npm install -g ionic
3. ionic start <SampleProjectName> blank
4. ionic platform add [ios|android]
5. npm install -g ios-sim
6. npm install -g iso-deploy //Xcode must be installed into Mac OS before install the iso-deploy plugin due that it depends on Xcode tool
7. ionic serve
8. 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 --device
ionic run ios --emulator
ionic 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" -l
Setup Live Reload

Multiple 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: 17622

logPath: /Users/liuhaidl/Desktop/AMTools/SourceCodes/mobile/sampleApp2/platforms/ios/cordova/console.log

JS changed: www/js/app.js
HTML changed: www/index.html

9. ionic emulate [ios|android]

============================================================================

Run Command: ionic run ios
Error: xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance
Solution: install Xcode tool from apple appstore

Run Command: ionic run ios
Agreeing 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/sharedpch
Solution: sudo ionic run ios

HaideMacBook-Pro:emulator liuhaidl$ ls -lrt
total 1768
drwxr-xr-x   3 root staff     102 2 7 21:39 include
-rw-r--r--   1 root staff 904440 2 7 21:39 libCordova.a
drwxr-xr-x   3 root staff     102 2 7 21:39 sampleApp.app.dSYM
drwxr-xr-x 46 root staff    1564 2 7 21:39 sampleApp.app
HaideMacBook-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 simulator
An 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 directory

Error: 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.app

Solution: sudo ionic run ios --device

Run Command: sudo ionic run ios

Check dependencies

Signing 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/sharedpch

No 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.

LarryHai6

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Ionic + Apache Cordova开发跨平台混合型的移动应用 - 非常好的手机开发初级文章!!!!!!

http://blog.csdn.net/zoutongyuan/article/details/41910903?utm_source=tuicoolJavaScript 写多了，要想真正提高js水平，研究其他js框架源码是不错的选择。Github上大部分都是js、css相关的项目，可以有目的性的 check out 下来，研读研读，还是非常收益的，跟随nb的人，也会慢慢变的nb
复制链接

扫一扫