标签：至少1个，最多5个
Ionic 2 程序主要通过Ionic命令行工具CLI来创建和开发，并使用Cordova来构建和部署为原生应用程序。也就是说我们需要先安装一些工具来实现程序开发。
安装Ionic CLI 和 Cordova
要创建 Ionic 2 项目，你需要安装最新版本的 CLI 和 Cordova。在此之前你需要安装最新版本的Node.js。 下载安装Node.js，然后继续安装Ionic CLI和Cordova来进行应用程序开发：
安装 Ionic
npm install -g ionic
安装 Cordova
npm install -g cordova
命令前面可能需要添加sudo提权来进行全局安装。
安装完成后来创建你的第一个 Ionic 应用：
ionic start cutePuppyPics --v2
cutePuppyPics可以替换成你的应用程序名称。--v2表示当前生成的是 Ionic 2 版本的应用，不添加则生成 Ionic 1 应用。
创建完成后cd到你的程序目录中，执行ionic serve来启动你的Ionic应用，并确保测试在浏览器中能够正常显示：
cd cutePuppyPics
ionic serve
对于那些为iOS和Android构建原生应用程序（大多数人），每个平台都有一定的功能和安装要求，才能充分利用Ionic和Cordova开发。
对于iOS开发人员，请查看，并按照说明安装或升级Xcode，并注册开发人员帐户，开始为iOS开发应用程序。
对于Android开发人员，请查看，并按照说明安装SDK或Android Studio，开始为Android开发应用程序。
Ionic 2 基础教程
确保完成之前的安装并测试启动成功。下面我们将启动新的应用程序，添加页面，并在这些页面之间导航等过程。 让我们开始吧！
启动一个新的Ionic 2应用
用start命令来创建一个新的Ionic 2应用。别忘了添加--v2来指定这是一个 Ionic 2 的应用程序。再添加一个tutorial参数，指定使用tutorial模版创建该应用。这样一个基于TypeScript的Ionic 2应用就被成功创建了。
ionic start MyIonic2Project tutorial --v2
在这个过程中将会下载 Ionic 2 库包，安装所需的npm模块，并为应用配置好Cordova。如果在创建时不指定tutorial参数，ionic默认使用 tabs模版来创建应用。
在浏览器中查看应用
现在你可以cd到创建好的项目文件夹中，使用serve命令在浏览器中预览你的应用。
cd MyIonic2Project/
ionic serve
如果成功启动，你将看到上面这样的欢迎界面。
让我们来剖析一下Ionic 2应用，在我们创建的文件夹中，我们可以看到一个典型的Cordova项目结构。我们可以在其中安装原生插件，并创建平台特定的项目文件。
./src/index.html
src/index.html是 Ionic 2 应用的主入口文件，其目的是设置脚本和CSS引导，然后开始运行我们的应用程序。 我们不会在这个文件中花费大量的时间。
为了让应用正常运作，Ionic 2 会在HTML中寻找&ion-app&标记。 在这个例子中，我们有：
&ion-app&&/ion-app&
并且在下方我们还能看到这样的脚本引用：
&script src="cordova.js"&&/script&
&script src="build/polyfills.js"&&/script&
&script src="build/main.js"&&/script&
cordova.js是Cordova应用的需求文件，我们在开发过程中这个文件将会提示404错误，这不需要担心。Cordova将会在构建过程中自动注入这个文件。
build/polyfills.js 是在构建过程中自动生成的，我们不需要过多关注。
build/main.js是一个包含了Ionic, Angular和你的JS脚本的文件。
./src/ponent.ts
在app文件夹中能找到我们的预编译代码。这是Ionic 2应用程序的大部分工作起始的地方。当我们运行ionic serve时，app中的代码将被编译成当前浏览器能够执行的javascript版本（当前是ES5）。也就是说我们可以使用TypeScript或更高级别的 ES6+ 进行开发，而在编译时会自动降级为浏览器可识别的版本。
<ponent.ts 是应用的入口文件。
在文件中我们能够看到这样的结构：
@Component({
templateUrl: 'app.html'
export class MyApp {
constructor(
每个应用程序都有一个根组件，用于控制应用程序的其余部分。这跟Ionic 1和Angular 1中的ng-app非常相似。原先的启动配置被放倒了app.module.ts文件中。
在这个组件中，我们设置了模版文件app.html，下面我们来看一下这个文件。
./src/app/app.html
app.html里是我们应用的主模版：
&ion-menu [content]="content"&
&ion-header&
&ion-toolbar&
&ion-title&Pages&/ion-title&
&/ion-toolbar&
&/ion-header&
&ion-content&
&ion-list&
&button ion-item *ngFor="let p of pages" (click)="openPage(p)"&
{{p.title}}
&/ion-list&
&/ion-content&
&/ion-menu&
&ion-nav [root]="rootPage" #content swipeBackEnabled="false"&&/ion-nav&
在这个模板中，我们设置了一个ion-menu作为侧面菜单，然后一个ion-nav组件作为主要内容区域。ion-menu菜单的[content]属性绑定到了我们ion-nav的本地变量content上。所以我们知道哪里会发生动作变化。
接下来，我们来看看如何创建更多页面并执行基本的导航。
现在我们对Ionic 2应用的布局有一个基本的掌握，让我们来了解一下在应用中创建和导航到页面的过程。让我们看一下app.html页面的底部：
&ion-nav [root]="rootPage" #content swipeBackEnabled="false"&&/ion-nav&
注意[root]属性绑定。 这本质上是设置了ion-nav组件的“root”页面。 当ion-nav加载时，变量rootPage引用的组件将是根页面。
在<ponent.ts中，MyApp组件在其构造函数中指定：
import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
export class MyApp {
// make HelloIonicPage the root (or first) page
rootPage: any = HelloIonicP
constructor(
public platform: Platform,
public menu: MenuController
我们看到rootPage设置成了HelloIonicPage ，所以HelloIonicPage将是在nav控制器中加载的第一个页面。
创建一个页面
接下来，让我们看看我们正在导入的HelloIonicPage。在src/app/pages/hello-ionic/文件夹中，找到并打开hello-ionic.ts。
你可能已经注意到每个页面都有自己的文件夹，该文件夹以页面命名。 在每个文件夹内，我们还可以看到一个.html和一个.scss同名文件。 例如，在hello-ionic/我们将找到hello-ionic.ts，hello-ionic.html和hello-ionic.scss。 虽然使用这种模式不是必需的，但它可以有助于保持项目的组织结构。
然后我们找到HelloIonicPage类，在创建的页面中提供了一个Angular组件和已经使用Ionic的导航系统加载的所有Ionic指令。注意，因为页面是动态加载的，所以它们没有选择器（selector ）：
import { Component } from '@angular/core';
@Component({
templateUrl: 'hello-ionic.html'
export class HelloIonicPage {
constructor() {
所有的页面都会有一个类和一个关联的模版。让我们再看一下src/app/pages/hello-ionic/hello-ionic.html，这是一个模版页面：
&ion-header&
&ion-navbar&
&button ion-button menuToggle&
&ion-icon name="menu"&&/ion-icon&
&ion-title&Hello Ionic&/ion-title&
&/ion-navbar&
&/ion-header&
&ion-content padding&
&h3&Welcome to your first Ionic app!&/h3&
This starter project is our way of helping you get a functional app running in record time.
Follow along on the tutorial section of the Ionic docs!
&button ion-button color="primary" menuToggle&Toggle Menu&/button&
&/ion-content&
&ion-navbar&是这个页面中导航栏的模版。当我们导航到这个页面，导航栏的按钮和标题作为页面转换的一部分进行过渡。
模板的其余部分是标准的Ionic代码，用于设置我们的内容区域并输出我们的欢迎信息。
创建其他页面
要创建一个其他的页面，我们不需要太多的事情，只要确保配置标题和我们期望在导航栏显示的东西即可。
让我们来看一下src/app/pages/list/list.ts。在这里，你会看到一个新的页面被定义：
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { ItemDetailsPage } from '../item-details/item-details';
@Component({
templateUrl: 'list.html'
export class ListPage {
selectedItem:
icons: string[];
items: Array&{title: string, note: string, icon: string}&;
constructor(public navCtrl: NavController, public navParams: NavParams) {
// If we navigated to this page, we will have an item available as a nav param
this.selectedItem = navParams.get('item');
this.icons = ['flask', 'wifi', 'beer', 'football', 'basketball', 'paper-plane',
'american-football', 'boat', 'bluetooth', 'build'];
this.items = [];
for(let i = 1; i & 11; i++) {
this.items.push({
title: 'Item ' + i,
note: 'This is item #' + i,
icon: this.icons[Math.floor(Math.random() * this.icons.length)]
itemTapped(event, item) {
this.navCtrl.push(ItemDetailsPage, {
item: item
此页面将创建一个包含多个项目的基本列表页面。
总的来说，这个页面和我们之前看到的HelloIonicPage非常相似。 在下一节中，我们将学习如何导航到新页面！
导航到页面
回想上一部分我们在ListPage类中有一个函数，看起来像这样：
itemTapped(event, item) {
this.navCtrl.push(ItemDetailsPage, {
item: item
你可能已经注意到我们引用了一个ItemDetailsPage。这是一个包含在教程启动器中的页面。我们要在list.ts中导入它，我们可以这样导入：
import { ItemDetailsPage } from '../item-details/item-details';
保存好之后。你会发现ionic serve将重新编译应用程序并刷新浏览器，你的修改将会出现在程序中。让我们在浏览器中重新访问我们的应用程序，当我们点击一个项目，它将导航到项目详细信息页面！请注意，菜单切换按钮将被替换为后退按钮。这是Ionic遵循的原生风格，但可以按需配置。
Ionic 2 导航的工作原理就像一个简单的堆栈，我们通过push将一个页面推到堆栈的顶端，这会让我们的应用前进一步并显示一个返回按钮。反之，我们也可以pop掉一个页面。因为我们在构造函数中设置了this.navCtrl，我们可以调用this.navCtrl.push(),并传递我们要导航到的页面。我们还可以传递一个数据对象给我们想要导航到的页面。使用push导航到新页面很简单，而且Ionic的导航系统非常的灵活。你可以查看找到更多高级导航示例。
当涉及到URL，Ionic 2的工作方式有点不同于Ionic 1。不使用URL导航，可以确保我们可以总是回到一个页面（例如应用程序启动）。这意味着我们不只是限于使用href来导航。无论怎样，我们仍然可以选择在必要时使用网址导航到某个网页。
到此你已经完成了Ionic 2基本教程，了解了Ionic 2并开始朝着掌握Ionic 2进发。有能力的话最好去阅读完整的技术文档。
建议熟悉一下TypeScript的基本语法和使用，包括@types使用和d.ts编写。
掌握Angular2的基本原理和开发思路。
熟悉Ionic 2的所有Components和API。
了解Cordova的使用方法和插件。
祝在Ionic踩坑之路上越走越远。
2 收藏&&|&&35
你可能感兴趣的文章
5 收藏，2k
97 收藏，21.1k
22 收藏，1.3k
本作品采用 署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
对的，selector虽然在没有标签的情况下可以不写，但是现在绑定sass样式也使用了selector，所以还是建议填写的
@types如何使用可以写个教程吗？
RC1 已经出来了:
然后我们找到HelloIonicPage类，在创建的页面中提供了一个Angular组件和已经使用Ionic的导航系统加载的所有Ionic指令。注意，因为页面是动态加载的，所以它们没有选择器（selector ）：
实际上这里的选择器是可选的，如果需要使用局部样式的话官方推荐的方法是使用选择器，虽然不写也可以
你好，关于语法有些疑惑，想请教一下，src/ponent.ts文件中：
import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
// make HelloIonicPage the root (or first) page
rootPage: any = HelloIonicP
this.pages = [
{ title: 'Hello Ionic', component: HelloIonicPage }
HelloIonicPage是作为一个class被import进来，文件中有2处使用HelloIonicPage的地方：
rootPage: any = HelloIonicP
{ title: 'Hello Ionic', component: HelloIonicPage }；
HelloIonicPage没有new出对象，HelloIonicPage本身是一个class，但是却被作为一个对象使用了。
请问这样的语法使用方式应该怎样理解？有相关的文档出处吗？
js(ES5) 里本身没有真正的 class 和 new 构建函数. 本身仍然是对 object 的操作. 这是基于 TS(ES6) 新标准的书写方式. 推荐看下《You Don't Know JS》.希望对你的疑惑有所帮助.
谢谢你的回复！后来我又看了下，这个写法好像是ionic借助了angular的DI注入功能，传入的参数是HelloIonicPage这个class，但是系统借助DI注入调用了HelloIonicPage的构造函数创建了对象，也就是说系统负责了对象的创建工作，我们只需传入class就可以了。。。。。也不知道理解的是否正确。
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
我要该，理由是：
扫扫下载 Appweb学习笔记08-Ionic的前后端简单交互与打包 - 简书
web学习笔记08-Ionic的前后端简单交互与打包
Ionic的前后端简单交互与打包
前言：这篇文章同样是新手专用，对于一个像我一样的前端渣新来说，看看还可以，大神的话就算啦。里面涉及的点都不算太难，虽然我也有一堆东西没懂，但是跟着先敲起来，慢慢地就会理解了。这个之后还做了一个angular的前后端简单交互，道理都一样，只是pc端会出现跨域问题，需要配置一下nginx的反向代理之类的。本篇就不说这些了，因为做这个的时候没遇到这些问题，遇到的是一些网络权限的问题，在下面也都提了。
1.实现目标
目标是搭建一个简单的前后端交互，应用ionic实现一个简单的表单，点击提交按钮，会发送一个请求，并且能在搭建的后端处查看到提交表单上的值。如图：
2.页面搭建
前提：已安装node.js，ionic，cordova。
安装node.js可以去官网下载，下载完node.js之后可以使用集成包管理工具npm安装剩下的两样（全局安装）。
$ npm install -g cordova ionic
2.1 创建ionic空模板项目
在终端，进入搭建工程的目录
$ cd /Users/apple/Desktop/
下载ionic空模板
$ ionic start ionicTest blank
下载成功之后，进入工程。
其中www是我们主要编写代码的文件夹。这时候我们在终端运行
$ cd /Users/apple/Desktop/ionicTest/
$ ionic serve
会编译生成页面，在浏览器中显示如下图：
这就是ionic的空模板，所以展示出来的是空页面。
2.2 编写代码
1 编写页面html代码
进入/www/index.html。在body中的标签 &ion-content&&/ion-content&之间，写下如下页面代码。
&div class="row1"&
&div class="inner_box"&
&div class="title_msg"&版本号 :&/div&
&input class="input_text" type="text" name="name" id="name" placeholder="请输入姓名"&
&div class="row1"&
&div class="inner_box"&
&div class="title_msg"&编码方式 :&/div&
&input class="input_text" type="text" name="age" id="age" placeholder="请输入年龄"&
&div class="row1"&
&div class="button_box"&
&input type="submit" value="提交" class="submit_btn"&
结果如图：
2 编写css样式
&style type="text/css"&
.inner_box{
width: 310
height: 40
background-color:
border-radius: 5
width: 98%;
height: 40
margin-top: 5
padding: 0;
.title_msg{
width: 100
margin-left: 5
height: 40
text-align:
font-size: 14
line-height: 40
color: #333;
.input_text{
padding: 0px !
width: 200
height: 26px!
margin-top: 7
border: 1px solid #dddddd !
border-radius: 5
font-size: 14
line-height: 26
.button_box{
width: 200
height: 40
.submit_btn{
padding: 0px !
width: 150
height: 30
margin-top: 5
margin-left: 25
border: 1px solid lightblue !
border-radius: 5
background-color:
color: #333333;
这里提一嘴：css中用了不少!important的原因是因为ionic里面很多东西的样式都有初始设定，所以很多时候需要强制设定下。我写css也没几天，不知道这种方式算不算对，要是大家有好的解决办法，一定要告诉我。
结果如图：
3 添加form标签
&form action="http://192.168.1.100:3000/Info" method="post" onsubmit="return submitForm();"&
其中submitForm()方法是点击提交按钮的时候先触发的方法。在这个方法中进行一些验证或者判断是否为空值。action之后接的是需要将表单上的内容发送到的地址。这里就用本机ip地址来吧。
4 添加逻辑代码，如果输入框为空，就弹出提示框。
&script type="text/javascript"&
function submitForm(){
var name = document.getElementById("name");
var age = document.getElementById("age");
if(name.value == null || name.value == ""){
alert("请输入姓名");
if(age.value == null || age.value == ""){
alert("请输入年龄");
以上基本上就搭建好了界面，现在需要的是搭建一个后台服务，来接受发送的请求。
3.服务搭建
在这里为了简便，我们所使用的是express来搭建，express是基于node.js平台，快速，开放，极简的web开发框架。
1 创建server文件
进入工程目录的www文件夹下，创建server.js文件
2 安装express组件
$ npm install express --save
此外还需要安装express的中间件bodyParser。因为不知名的原因，express里没有包括bodyParser。bodyParser用来解析表单提交的数据。
$ npm install body-parser --save
3 编写代码（按照官网的教程写）
var express = require('express');
var bodyParser = require('body-parser');//引入
var app = express();//创建实例
var router = express.Router();
app.use(bodyParser.json());
app.use(require('body-parser').urlencoded({extended: true}));
//请求时开始使用的方法
router.use(function(req, res, next) {
//请求返回的方法
router.post('/Info', function (req, res) {
res.send('Got a POST request');
console.log(req.body);
app.use(router);
app.listen(3000); //指定端口并启动express web服务
编译前端：
$ ionic serve
启动后台服务：
$ node server.js
在页面输入姓名，年龄。
成功的话会出现后台我写的返回报文。这个时候在终端上看，后台打印的内容，会发现如下图：
表单提交的内容都已经在后台显示出来。这样就完成了自建前后端简单的交互。
1. 添加设备
$ ionic platform add ios
$ ionic platform add android
一般项目都需要两个平台同时部署，所以我们就添加两个，执行完毕之后执行命令查看你已经添加的平台列表：
$ ionic platform list
Installed platforms:ios 4.1.1，android ~5.2.0
Available platforms: amazon-fireos ~3.6.3 (deprecated)，blackberry10 ~3.8.0，browser ~4.1.0，firefoxos ~3.6.3，osx ~4.0.1，webos ~3.7.0
在终端进入工程目录下，进行编译
$ ionic build ios
开始编译项目，编译完成之后代开Xcode，打开platform-&ios-&myIonic.xcodeproj的项目文件，Xcode中选择要运行的模拟器版本并执行快捷键cmd+R运行模拟器，模拟器打开后会自动运行你应用。
输入姓名年龄，点击提交，这个时候会报错：
ERROR Internal navigation rejected - &allow-navigation& not set for url='http://192.168.14.102:3000/Info'
出现这个错误的原因是因为没有设置白名单，iOS9+会拒绝请求。
所以解决方案也很简单。只需要在ios -& ionicTest -& config.xml中配置
&allow-navigation href="*" /& //即允许跳转到任意http协议的页面
这样就成功解决这个问题，接下来重新运行，就通畅了。
2.2 打包ipa包
在Xcode中，模拟器选择Generic iOS Device
在顶部导航栏上的product中选择Archive进行打包，接下来的选择根据不同的需要选择不同的选项，我这里选择的是测试包。
Export -& Save for Ad Hoc Deployment -& select a Development Team -& Export one app for all compatible devices -& next -& Export到指定文件夹下。
以上就是打包iOS包的方法和遇到的一些小问题。
安卓模块不是我负责的，我也就没有花太多精力去详细研究，一些配置什么的也就大概说下，具体的配置项需要自己根据自己所处的环境进行配置。我就不赘述了。3.1 配置环境
1.安装Java的JDK，并配置好环境变量。
2.安装工程需要版本的AndroidSDK，并配置好环境变量；这里JDK和andriodSDK的安装和配置都很重要，必须安装好JDK和AndroidSDK，才可以进行下面的打包，否则是打不了包的。
在终端进入工程目录下，进行编译
$ ionic build android
注意：这里会提示你安装部分版本的Android SDK，按照上面的步骤跟着安装就可以，之后重新编译一下。
编译之后可以选择在模拟器上运行或者是在真机上运行。（需要先新建虚拟机/连接手机，新建方法：打开Android SDK安装目录下的AVD Manager.exe选择新建）
$ ionic run android
同样，iOS中出现的问题，Android也出现了。
只需要在platform -& Android-& AndroidManifest.xml中，添加上以下一些权限设置的代码即可：
&uses-permission android:name="android.permission.READ_PHONE_STATE" /&
&uses-permission android:name="android.permission.INTERNET" /&
&uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /&
&uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /&
&uses-permission android:name="android.permission.READ_LOGS" /&
以上就是整个Ionic的前后端简单交互与打包了。项目要是有需求的话可以评论留言跟我要。不过这个项目比较简单，跟着一步一步走很快就可以搞定的。要是大家在这里发现什么问题，请私信或者评论告诉我，让我也学习学习。
iOS萌新，web纯新，入门厨子，手工爱好者，吐槽专家。&&& & qq交流群：
利用你喜欢的(html css js) web技术创建跨平台的移动app。
IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和
AngularJS 来增强应用。提供数据的双向绑定，使用它成为 Web 和移动开发者的共同选择。Ionic是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。Ionic框架的目的是从web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。
果你已经熟悉Anguar1和Ionic1，那么请不要嚣张，Angular2是一个全新的框架，它从ReactJS以及其他web移动框架借鉴了不少经验和优点，巨大的改进使得开 发体验和性能已经超越了Angular1。而且Ionic2无论是从UI交互效果和跨平台的差异性都优于I
这里给大家介绍的是两个混合app开发框架和原生app开发框架的对比， 也就是ionic,react-native,native 三种开发框架对比
HTML5 移动app开发框架该如何选择，这个问题困扰很多的新手，下面ionic中文网小编就和大家一起谈谈HTML5 移动app开发框架该如何选择
React自诞生以来，一直以其渲染速度快著称，特别与AngularJS和EmberJS等相比更是如此。但也有人不同意这个观点，以色列软件开发公司500Tech的CEO Boris Dinkevich近日发表博文称，其实React并不真正比AngularJS快。
采用ionic+phonegap开发hybrid app混合应用，自然少不了使用文件选择和上传操作，有两种可以实现的方法：
1.采用cordova插件，需要使用js绑定事件操作，无法使用angular
2.使用ngCordova插件，这个是结合cordova与angu
开始学ionic的时候就嫌弃ionic做不了与手机硬件紧密结合的APP，今天无意中看到了另外一个项目ngCordova，福音啊。神马拍照啊，文件上传啊，地理位置啊，借助ngCordova插件都可以实现。ngCordova是结合cordova和angular包装了许多插件，
PhoneGap 是一个免费且开源的开发环境，使开发者可以开发出在Android、Palm、黑莓、iPhone、iTouch及iPad等设备上运行的App。其使用 的是HTML和JavaScript等标准的Web开发语言。开发者使用PhoneGap进行开发，可调用加速计、
原生/Native：使用原生SDK开发App。优点不用说，当你有足够的资源，这是最理想的方式；缺点是对不同的 平台要分别开发，学习成本高,开发成本高、开发周期长、不易于web开发人员和企业建站公司转型
原生+web/ Hybrid：使用原生技术开发，部分页面调ionic react-native和native开发移动app那个好 - 一路吃一路丢 - 博客园
&react-native和native开发移动app那个好 ?&移动端开发如何选型？这里介绍一下我眼中的ionic,react-native,native 三种移动端开发选型对比。欢迎大家补充指正一、 跨平台特性&&&&ionic :&write once, run anywhere (&一次开发，随处运行，学习成本低 会html css js就可以学会)不涉及到系统级的开发的话， 确实是一次开发 处处运行，如果涉及到系统级API调用以及项目配置（如 ios plist文件）则需要自己手动编写插件的方式达到效果（如：注册文件的打开方式），当然，网上也有可能找到可以安装的现成插件。& 会html css js就可以学会 学习成本低&&&&react-native&：Learn once, write anywhere (&一次学习，随处开发)不涉及到与native混编的话， 统一js 进行开发 使用jsx 语法 确实能做到各端开发，但是需要针对iOS 和 android 开发两套代码。&&&&native ：使用原生java objective-c 开发， 各玩各的,无法跨平台。二、开发方式&&& ionic ：html + angularjs + css使用 html + angularjs 与网页开发类似，代码只需要写一次，就可以达到跨平台效果，系统级的调用由cordova插件解决，封装得相当好，简单易用，特殊情况的自己动手编写插件比较难，一般没有需要手动编写代码插件的情况，网上有比较多的插件可供下载安装，可用flexbox布局。&& 调用方便（比如：要用摄像头插件，只需要cordova plugin add camera，然后就可以用js调用原生摄像头）&&& react-native ：js + css普通UI全程js开发，部分情况下需要使用与native混合的方式，没有统一的UI组件，ios组件较多，android组件较少，各自编写js文件的情况较多，简单空间和逻辑层可共用，基本上iOS和android是两套代码，可用flexbox布局。&&& native ：java + oc|swift&&&iOS android 不同语言开发 以及适配。三、功能支持&&& ionic ：编写cordova插件，则能达到全部支持&&& 原生能完成的功能& ionic结合cordova都可以实现UI交互 由Web实现，系统级的交互 由 cordova实现，目前 文件上传下载，url跳转以及文件打开方式 均已做验证可实现，cordova对系统级调用的支持比较好，涵盖了大部分系统功能，如摄像头，设备信息，电池，网络等，不排除潜在不支持的问题。&&& react-native ：与native 混编 可达到全部支持android高级组件可能需要自己实现，系统级的功能可通过安装第三方插件或者与native混编的方式实现 ，基本上功能能完全实现&& native ：全部支持&&完全能实现四、性能对比&&& ionic ：虽然性能一直是html5在移动端的最大问题，但是ionic已经做得非常出色了，在ios上基本上无法区分是否是原生appandroid 通过优化基本看不出和原生差别ionic使用ionic-native-transitions&& 调用原生专场基本看不出和原生区别& （适合android ios）android 2G内存以上的手机看不出和原生差别，性能接近原生。android 低配置的手机添加 crosswalk 插件以后 体验较好，但是app打包偏大。程序运行内存占用较大（网络数据对比同款产品，内存占用100+M）&&&&react-native ：基本接近原生性能&&& js 到 native 需要经过两层桥接，性能与原生差别不大（网络数据对比同款产品，内存占用50 M）&&&&native：开发者水平很重要&&& 性能最好 （网络数据对比同款产品，内存占用30 +M）总结：开发水平很重要，html开发的app可能比原生的更快。主要还看开发人员的水平以及会不会优化
五、优劣对比&&& ionic ：&&& 优势：&&&&&&& ios 和 android 基本上可以共用代码，纯web思维，开发速度快，简单方便，一次编码，到处运行，如果熟悉web开发，则开发难度较低。&&&&&&& 文档很全，系统级支持封装较好，所有UI组件都是有html模拟，可以统一使用。&&&&&&& 可实现在线更新 允许加载动态加载web js&&&&&&& 文档多，开发者多，视频教程多 容易学习&&& 遇到问题容易解决& 技术成熟&&& 劣势：&&&&&& 占用内存高一些（不过手机内存都大了不影响），不适合做游戏类型app，&& web技术无法解决一切问题，对于比较耗性能的地方无法利用native的思维实现优势互补，如高体验的交互，动画等。&&& react-native ：&&& 优势：&&& 1、虽然不能做到一处编码到处运行，但是基本上即使是两套代码，也是相同的jsx语法，使用js进行开发。用户体验，高于html，开发效率较高 2、flexbox 布局 据说比native的自适应布局更加简单高效&&&&&&& 可实现在线更新
AppStore审核政策调整：允许运行于JavascriptCore的动态加载代码&&&&&&& 更贴近原生开发&&& 劣势：&&& 1、（引）对开发人员要求较高，不是懂点web技术就行的，当官方封装的控件、api无法满足需求时 就必然需要懂一些native的东西去扩展，扩展性仍然远远不如web，也远远不如直接写Native code。&2、（引）官方说得很隐晦：learn once, write anywhere。人家可没说run anywhere。事实上，从官方的api来看SliderIOS，SwitchIOS..等等这些控件，之后势必会出现SliderAndroid，SwitchAndroid...，也就是很可能针对不同的平台会需要写多套代码。&3、发展还不成熟，目前很多ui组件只有ios的实现，android的需要自己实现。&&&&&&& （引）从Native到Web，要做很多概念转换，势必造成双方都要妥协。比如web要用一套CSS的阉割版，Native通过css-layout拿到最终样式再转换成native原生的表达方式（比如iOS的Constraint\origin\Center等属性），再比如动画。另外，若Android和iOS都要做相同的封装，概念转换就更复杂 5、文档还不够完整 学习曲线偏高4.文档少& 学习起来困难&&& native ：&&& 优势：&&&&&&& 最好的体验以及功能实现。&&&&&&& 完善成熟的开发文档以及demo。&&& 劣势：&&&&&&& android开发学习曲线较高。&&&&&&& 各个平台分开开发 很难有iOS,android双平台高手。&&&&&&& 开发成本高
阅读(...) 评论()