扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
在Windows下使用ionic打包与开发IOS程序
目前成都创新互联已为上千的企业提供了网站建设、域名、网页空间、网站托管运营、企业网站设计、朝天网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
ionic开发Android程序都不需要安装eclipse等IDE,只要一个能写SSS,JS
,HTML的IDE就行(Hbuilder,WebStrom,Sublime Text), 开发完成之后不就执行个ionic platform
add android,ionic build android,然后就能生成一个.apk文件,给手机上一安装O了。
安装ionic开发环境(这个和在windows上安装android开发环境类似)。
安装Nodejs,按照步骤下载安装即可。
安装cordova,ionic,sudo npm install -g cordova ,sudo npm install -g ionic 或者合成一句统一安装sudo npm install -g cordova ionic。
创建项目,cd firstIonicProjectForIosionic serve(自动在afai浏览器中打开)浏览器中运行项目(调试项目)。
模拟器中运行项目
因为apple开发的证书限制我们在没有申请购买apple账号的情况下,使用虚拟机来部署我们的应用,在部署之前需要使用npm安装一个ios-sim插件用来调用模拟器。
用Ionic来开发app的很可能对Ios和android的app打包。
开发iOS程序需要mac本,没的话就只能在虚拟机上安装一个MacOS。ionic开发ios程序就得安装Xcode IDE,这个ipa文件不能被直接安装到苹果上,只能先上传到APP Store,人家审核通过之后,我们再从APP Store上下载。
一个完整的App开发需要哪些技术?在回答这个问题之前,我们首先要了解App都有哪些类型,不同的类型适用于哪些需求,用户可以根据自己的需求选择不同的App开发。
一、 App有哪些形式
WebApp:简单来说,Web App就是针对iOS/Android优化后的web站点,用户不需要下载安装即可访问。一般的web站点测重使用网页技术在移动端做展示,包括文字,视频,图片等,而Web App更侧重“功能”,是基于网页技术开发实现特定功能的应用,必须依赖手机浏览器运行。Web App开发成本低,维护更新简单,支持云修复,用户不用下载更新,但是App的用户体验不足,页面跳转迟钝甚至卡壳,页面交互动态效果不灵活,而且可能上不了AppStore,如果企业的核心功能不多,App需求侧重于信息查询,浏览等基础功能,可以选择Web App。
Native App(原生App):Native App是基于智能手机操作系统(现在主流的是ios和Android)用原生程序编写运营的App。Native App运行时是基于本地操作系统的,所以它的兼容能力和访问能力更好,拥有最佳的用户体验、最好的交互界面,但也是开发难度最大,开发成本和维护成本最高的App。
Hybrid App(混合App):是指半原生半web的混合类App,同时采用网页语言和程序语言进行开发,通过不同的应用商店进行打包分发,用户需要下载安装使用。Hybrid App兼具Native App良好的用户交互体验和web App跨平台开发的优势,因在开发过程中使用网页语言,所以开发成本和难度大大降低。Native App是现在的主流应用,大型的App如淘宝/掌上百度/微信都是走的Hybrid App路线。
二、开发不同类型的App需要用到哪些技术?
Web App:iOS/Android的内置浏览器是基于webkit内核的,所以在开发webApp时,多数使用html或html5、CSS3、JavaScript技术做UI布局,使其在网站页面上实现传统的C/S架构软件功能,服务端技术用java、php、ASP。现在也有很多一键生成webApp的平台,如百度siteApp/移动开发平台APICloud,APICloud平台提供基于腾讯x5浏览器引擎生成webApp,因为移动端的超级流量入口微信/手机qq等用的也是腾讯x5内置浏览器,所以用腾讯x5浏览器生成的App在移动页面展示时适配于微信的浏览体验,这样可以帮助webApp引流。
Native App:
开发Native App需要根据运行的手机系统采用不同的开发语言,开发Android App需要的开发语言是java,还需要熟悉Android环境和机制。主要知识点如下:
1. 开发环境,Android Studio、eclipse.如何搭建Android开发环境可以去百度。
2. 数据结构,App的某些功能涉及到做算法,所以要有一定的数学基础
3. Android SDK,会API接口开发,包括自行开发API的能力和调用第三发API的经验。
4. 熟悉tcp、IP,socket等网络协议
5. 如果涉及到服务器,你还需要了解webservice相关知识和相应的开发语言,常用有PHP、JSP、ASP.Net.
6. 除了这些功能基础,App开发还涉及到UI设计、框架、性能优化、调试适配等。
Objective-C是开发iOS系统App的主流编程语言,开发者一般用苹果公司的iOS SDK搭建开发环境,iOS SDK是开发iOS应用程序中不可少的软件开发包,提供了从创建程序,到编译、调试、运行、测试等多种开发过程中需要等工具。学习iOS开发可以去看苹果官方文档,这是最权威的ios教程。
Hybrid App:混合开发中主流的是以web为主体型的开发,即以网页语言编写,穿插Native功能的hybrid App开发类型,网页语言主要有html5、CSS3、JavaScript。Web主体型的App用户体验好坏,取决于底层中间件的交互与跨平台的能力。国内外有很多优秀的开发工具,如国外的AppmAkr、Appmobi,国内的APICloud,APICloud的底层引擎用Deep Engine,使用半翻译式原理,将运行中的web翻译成Native API,并且支持扩展API,开发时可调用用原生语言开发的功能模块,以此达到媲美原生App的用户体验,同时节省开发时间。
对企业来说,可以根据自己的需求选择不同的开发类型和开发工具,目前来看,Hybrid App已经成为移动开发趋势,一方面Hybrid App开发时不采用或者大部分不采用原生语言,却能拥有原生应用的特性,一方面随着web技术的发展,Hybrid App技术已经成熟,很多大型App淘宝、微信、携程都属于这种开发模式,Hybrid App给企业移动应用的开发、维护、更新都带来了极高的便捷性,从成本投入用户体验考虑,Hybrid App都是首选。
进入命令行后,输入 node -v 就可以看到你安装的 nodejs的版本了。输入 node -h 可以查看nodejs的帮助。
我最近也在做后端,Python,Ruby,Node 都用了一下,最后选择 NodeJS。
在选择时,Ruby on Rails,Django 第一个出局,因为考虑到 API 应该轻,快。
Python 曾经用过 Flask,考虑过 Bottle。不过两者的 Extensions 的功能都无法需求。
Ruby 的 Sinatra 是最好用的。选择 Sinatra + Mongoid,一个星期可以搞出来(我自己的情况)。
现在选择用 NodeJS 的 ExpressJS + Mongoose 搭配。从 Ruby 转成 Node,主要是因为看上 NodeJS 的性能。Request per Second 的话,NodeJS 7000 左右,ExpressJS 3000 左右,Sinatra 900 左右,Ruby on Rails 300 左右。
我写 JavaScript 都是用 CoffeeScript 写的,所以写起来就像写 Ruby 或 Python 一样,非常 Lisp。
ExpressJS 的开发也是这些框架里面,最活跃的。
React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发
iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件,代替 DOM 元素来渲染等。
React Native 使你能够使用基于 JavaScript 和 React
一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native
把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。Facebook
在多个应用程序产品中使用了 React Native,并将继续为 React Native 投资。
其好处显而易见:减少了人力、节省了时间、避免了 iOS 与 Android 版本发布的时间差,开发新功能可以更迅速。
下面,我们可以尝试用React Native创建一个 iOS APP.
在我们开始之前,我建议:你可以在 Github
里先下载 React Native 的代码框架。里面还有一些示例项目,2048 的游戏, Movies(一个看电影的
APP),SampleApp, TicTacToe (一款游戏)和 UIExplorer(能显示出所有用 React Native
替代的控件,如ListView,TabBar,MapView, Slider)),对于学习用如何用 React Native 创建
UI,这些都是非常好的例子,尤其是 UIExplorer APP,它几乎用到了每一个您的 APP 中需要创建的 UI 控件。
首先,我们先来安装相应的工具。React native 是使用 Node.js 来 创建 JavaScript 代码。如果你已经在你电脑上安装上了这些工具,你可以跳过下面这几步。
推荐使用 Homebrew的方式来安装 nvm,watchman 和 flow。
在Mac下,如果用homebrew,那么只用一行就可以装好:
brew install node
接下来安装watchman
brew install watchman
watchman是Facebook的一个文件观察者。React Native 用它来检测代码的变化.
接下来安装 npm
npm install -g react-native-cli
nmp 是 node的一个三方管理工具,相当于 Ruby中的RubyGems,iOS中的 CocoaPods,Java中的 Gradle/Maven,基本上,它使您能够轻松下载和管理你的项目需要的任何依赖库。
在终端,找到你希望保存的项目文件,然后运行下面的文件夹。
react-native init BookSearch
以上使用 CLI 工具来构建一个 Native 项目,是准备建立并运行原样。当这个过程完成后,你就会在终端窗口中打开 Xcode
的BookSearch.xcodeproj
并运行应用程序像往常一样。做到这一点,模拟器将启动您的应用程序的运行。一个终端窗口也将打开。当一个Native应用程序启动时,它加载从以下网址
JavaScript 的应用程序。

终端被打开,服务器开始作出反应来处理上述请求。该 Native 负责读取和建设 JSX(我们将看看这个版本)和 JavaScript 代码。
运行这个 APP,你可以看到下图中的模拟器,如果你想在开发运行有几个步骤,你应该这样做。
欢迎屏幕给出了一些关键的指令,你应该注意:编辑应用程序的用户界面,你应该修改,当你创建项目时生成的 index.ios.js 文件,如果您更改
JavaScript 代码,重新加载命令应用程序 Command-R 看到的变化,如果你想要更多的选择,使用命令控制
Command-Control-Z 打开开发者菜单,提供了这样的选项,使现场重新加载和浏览器的调试。
在任何时候做本教程时你可能会遇到一个红色屏幕模拟器,可以检查错误消息。它能让你知道这个问题是与你的代码还是服务器有关系。当我接收到错误的消
息「无法连接到服务器」 在模拟器和检查终端有一个「流程终止」 错误消息时我陷入了服务器连接问题。当这种情况发生时,关闭终端窗口,停止在
Xcode
中的应用并再次运行它。对于其他错误,是由于语法错误代码中或网络请求超时时(如果你的应用从互联网上获取数据),一个简单的重新加载后修复这个问题应该
怎么做。
如果你在敦促 Command-R 键盘但什么都没有发生,硬件键盘可能没有连接到模拟器上。选择模拟器上的选项菜单以连接它:Hardware Keyboard Connect Hardware Keyboard.
如果你按上边程序做了它依然不能重新加载,那么你可能需要重启你的电脑。我遇到过一次突然死机,重启电脑可以完成加载。
我们现在开始构建应用程序,打开 index.ios.js 文件。我建议使用适合 web 开发的 IDE。你还可以使用
Xcode,但你会发现它并不适合因为在代码格式化、自动完成和语法错误突出显示时它不是非常灵活。你可以通过学习本文来决定并选择合适的
JavaScript IDE。我用过 RudbyMine,但实际上任何 IDE 都支持 JavaScript。如果你能得到一个支持 JSX
的那真很不错。
当你打开 indx.ios.js 文件,你就会看到正在运行的应用程序构建 UI 的代码。你可能看到以下代码块。
'use strict'
以上代码启用了严格的模式,增加了处理原生 JavaScript 代码对错误的改善。
var React = require('react-native');
以上代码可以加载 react-native 模块,并将它赋予变量的反应。在你调用任何模块之前你需要把外部模块加载到你的文件中来。可以把它作为Swift 和 Objective-C 的导入库。
var { AppRegistry, StyleSheet, Text,
View,
} = React;
上面是一个解构赋值,你可以通过它将多个对象属性分配给一个变量。这能让他们在文件作用域被引用。以上是可选择的,但如果你不用它,那么每次你使用
一个组件在你代码中时,你就必须使用完全限定的名称,例如:「React.AppRegistry」而不能只用「AppRegistry」
、「React.StyleSheet」 而不能用「StyleSheet」 等等。
var BookSearch = React.createClass({
render: function() {
return (
View style={styles.container}
Text style={styles.welcome}
Welcome to React Native!
/Text
Text style={styles.instructions}
To get started, edit index.ios.js
/Text
Text style={styles.instructions}
Press Cmd+R to reload,{'\n'}
Cmd+Control+Z for dev menu
/Text
/View
);
}
});
上面创建一个类只有一个渲染 () 函数。在渲染函数中无论什么被定义都是将输出到屏幕上。上述使用
JSX(JavaScript语法扩展)来构建应用程序的 UI。如果您以前使用过 XML(甚至HTML),JSX
就会记住并熟悉你。它具有相同的均衡功能来打开和关闭标签并使用属性来设置值标签。你不需要使用 JSX 本地反应,你可以使用纯
JavaScript,但 JSX 建议它的简单定义树结构。如果你有很多 UI 的代码,通过大型的 JSX 树结构将更容易阅读理解。
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
上面的样式应用可于视图的内容。如果你做过 web 开发或用过 CSS(层叠样式表),在此之前这应该是熟悉的。React Native 使用
CSS 样式应用程序的UI。如果你看看 JSX 代码,你会看到不同风格的代码被用在不同的地方。例如:
style={style.container}设置样式定义容器的外部视图包含其他UI组件。
上面的样式应用可于视图的内容。如果你做过 web 开发或用过 CSS(层叠样式表),在此之前这应该是熟悉的。React Native 使用
CSS 样式应用程序的 UI。如果你看看 JSX 代码,你会看到不同风格的代码被用在不同的地方。例如:
style={style.container}设置样式定义容器的外部视图包含其他 UI 组件。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流