Web移动端混合开发--IonicFramework

混合开发方案

采用框架：

  Ionic + Cordova + AngulaJS + Ionic UI

ionic是什么：

  Ionic(ionicframework)一款开源的Html5移动App开发框架,是AngularJS移动端解决方案,Ionic以流行的跨平台移动app开发框架phoengap为蓝本，让开发者可以通过命令行工具快速生成android 、ios移动app应用。通俗的讲：ionic是一款基于angularjs的html5移动app开发框架，phonegap就是一款可以打包并且可以让js调用原生的移动app框架。Ionic 底层打包使用 Cordova ( 和 Phonegap 一样 ) 底层打包用 Cordova 是不错的。Ionic 是一个全堆栈的混合应用开发框架，可以理解成 Ionic = Cordova + AngularJS + Ionic UI

优点：

  1.开发成本低；2.能够快速进行开发，迭代更新容易；3.轻量级和插件式架构显著降低了维护成本；

缺点：

  1.Ionic放弃了ios6(市场占用率低于5%)和Android4.1(市场占用率低于10%)以下版本支持，来获取更好的使用体验；2.浏览体验短期内还无法超越原生应用；3.特别复杂的应用运行速度稍显缓慢；

混合开发环境

1. 安装node.js
2. 安装jdk1.7配置环境变量，在我的电脑->属性->高级->环境变量->系统变量中添加以下环境变量(假定你的j2sdk安装在c:\jdk1.7)：  JAVA_HOME=c:\jdk1.7classpath=.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;（.;一定不能少，因为它代表当前路径）  path=%JAVA_HOME%\bin安装完成后cmd下执行命令行  java -version 查询版本即可验证是否安装成功
3. 安装android SDK配置环境变量，在我的电脑->属性->高级->环境变量->系统变量中添加以下环境变量(假定你的sdk安装在E:\soft\adt-bundle-windows-x86_64-20140702\sdk)：ANDROID_HOME = E:\soft\adt-bundle-windows-x86_64-20140702\sdkpath=%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;
4. 安装Git配置环境变量，在我的电脑->属性->高级->环境变量->系统变量中添加以下环境变量(假定你的git安装在E:\soft\Git)：path=E:\soft\Git\cmd;
5. 安装cordova和ionicnpm install -g cordova ionic  （如果出错的话，在安装ionic 和cordova 之前，先安装 express 然后在安装ionic 和cordova 居然就可以安装了。）npm  install expressnpm install -g ionicnpm Install -g cordova*备注：*查询版本即可验证是否安装成功node -vionic -vcordova -vnpm -vjava -version

ngCordova的安装及配置

插件文件地址：http://ngcordova.com/docs/plugins/barcodeScanner/
安装：

Ionic安装及使用一览图（请全屏查看）

命令行创建工程

IOS创建-安装-运行

  ionic start myproject  cd myproject  ionic platform add ios  ionic build ios  ionic emulate ios

Android创建-安装-运行

  ionic start myproject cd myproject ionic platform add android ionic build android ionic emulate android  (模拟器运行)ionic run android  (连接上手机运行)

号外！

准备：

JDK
下载地址 http://www.oracle.com/technetwork/java/javase/downloads/index.html
安装好之后环境变量配置:

  新建系统变量JAVA_HOME 和CLASSPATH 变量名：JAVA_HOME 变量值：C:Program FilesJavajdk1.7.0    变量名：CLASSPATH 变量值：.;%JAVA_HOME%libdt.jar;%JAVA_HOME%libtools.jar; 变量名：Path 变量值：%JAVA_HOME%bin;%JAVA_HOME%jrebin;

Android SDK
(参考该文章：http://www.cnblogs.com/zoupeiyang/p/4034517.html)
git
中间选择按照命令行来安装,会直接给你配置好环境变量.

nodejs 以及 npm
下载地址(https://nodejs.org/)

  nodejs 安装简单,直接, 下一步下一步,然后完事.cmd 测试: 输入  npm -v   和  node -v     结果如下说明成功.

ionic 使用插件ngCordova 调用nativeAPI—Camera

参数解析：

imageData：根据cameraOptions的设定值，为Base64编码的图像数据或图像文件的URI。（字符串类型）
message：设备本地代码提供的错误信息。（字符串类型）
quality：存储图像的质量，范围是[0,100]。（数字类型）
destinationType：选择返回数据的格式。通过navigator.camera.DestinationType进行定义。（数字类型）

  Camera.DestinationType = { DATA_URL : 0,   //返回Base64编码字符串的图像数据 FILE_URI : 1    //返回图像文件的URI }

sourceType：设定图片来源。通过nagivator.camera.PictureSourceType进行定义。（数字类型）

  Camera.PictureSourceType = { PHOTOLIBRARY : 0, CAMERA : 1, SAVEDPHOTOALBUM : 2 }

allowEdit：在选择图片进行操作之前允许对其进行简单编辑。（布尔类型）
EncodingType：选择返回图像文件的编码方式，通过navigator.camera.EncodingType进行定义。（数字类型）

  Camera.EncodingType = { JPEG : 0,       // 返回JPEG格式图片 PNG : 1         // 返回PNG格式图片 };

targetWidth：以像素为单位的图像缩放宽度，必须和targetHeight同时使用。相应的宽高比保持不变。（数字类型）
targetHeight：以像素为单位的图像缩放高度，必须和targetWidth同时使用。相应的宽高比保持不变。（数字类型）

ionic 再来！

希望做成一个形如移动web端的框架，包括样式及动效。so 有如下的:

1. www/index.html作为我们的程序入口文件，首先编辑这个文件，在body标签中加入<ion-nav-bar class="bar-positive"><ion-nav-back-button></ion-nav-back-button></ion-nav-bar><ion-nav-view></ion-nav-view>
2. 这段标签对于对Ionic不熟悉的人来说可能有点陌生，Ionic针对移动端自定义了一套样式库，
并且使用Angular的指令封装了各个模块。并且使用Angular的指令封装了各个模块。ion-nav-bar
是导航页面头部，ion-nav-view是导航内容页面。3. inde.html入口页面我们已经写完了，接下来我们新建两个我们自己的页面。我们在www目录下新建一个
templates文件夹，存放我们的页面并新建页面：tabs.html 作为我们tab应用的主页面：templates
文件夹，存放我们的页面并新建页面：tabs.html 作为我们tab应用的主页面：templates文件夹，
存放我们的页面并新建页面：tabs.html 作为我们tab应用的主页面：templates文件夹，存放我们的页面并
新建页面：tabs.html 作为我们tab应用的主页面：tabs.html<ion-tabs class="tabs-icon-top tabs-positive"><ion-tab title="Home" icon="ion-home" href="#/tab/home"><ion-nav-view name="home-tab"></ion-nav-view></ion-tab><ion-tab title="About" icon="ion-ios-information" href="#/tab/about"><ion-nav-view name="about-tab"></ion-nav-view></ion-tab></ion-tabs>
ion-tab为tab应用的底部菜单项,title是菜单按钮显示的文字,icon是菜单按钮图标,href是点击菜单的
跳转地址,子元素ion-nav-view是点击菜单后子页面显示的位置,ion-nav-view属性name为该tab的名称，
后面添加子页面会详细描述。4. 然后在app.js里加入该页面的路由$stateProvider.state('tabs', {url: "/tab",templateUrl: "templates/tabs.html",})$urlRouterProvider.otherwise("/tab");
保存刷新后应该是这个样子

Ionic IOS打包方法

Xcode 打包方法
1.
2.

3.
4.
5.

6.

关于Ionic Demo编写过程的问题解决方法记录总结

ion-tabs路由

触发状态迁移的几种方式（通俗讲即页面跳转的几种方式）

 调用$state.go() 方法，这是一个高级的便利方法；点击包含 ui-sref 指令的链接 <a ui-sref="state1">Go State 1</a>；导航到与状态相关联的 url；通过 href 方式页面切换需要指定 url。

 var app = angular.module("myApp", ["ionic"]);app.config(function($stateProvider,$urlRouterProvider) {$stateProvider.state("home", {url: "/home",templateUrl: "home.html",controller:‘homeController‘}).state("music", {url: "/music",templateUrl: "music.html",controller:‘musicController‘});}).controller("myCtrl",function($scope,$state){$state.go("home");}).controller("homeController",function($scope){console.log(‘home‘);}).controller("musicController",function($scope){console.log(‘music‘);})

ionic 中结合 tab 状态嵌套的几种方式状态可以相互嵌套。
有三个嵌套的方法：

使用“点标记法”，例如： .state(‘contacts.list‘, {})
使用 parent 属性，指定一个父状态的名称字符串，例如： parent: ‘contacts‘
使用 parent 属性，指定一个父状态对象，例如： parent: contacts（ contacts 是一个状态对象）
注：
1). 点标记法在$stateProvider 中可以使用点语法来表示层次结构，下面， contacts.list 是 contacts 的子状态。
```
$stateProvider.state(‘contacts‘, {}).state(‘contacts.list‘, {});
```
2). 使用 parent 属性，指定一个父状态的名称字符串
```
$stateProvider.state(‘contacts‘, {}).state(‘list‘, {parent: ‘contacts‘})
```
3). 基于对象的状态如果你不喜欢使用基于字符串的状态，您还可以使用基于对象的状态。 name 属性将在状态对象内部设置，在所有的子状态对象中设置 parent 属性为父状态对象，像下面这样：
```
var contacts = {name: 'contacts', //mandatorytemplateUrl: 'contacts.html'
}
var contactsList = {name: 'list', //mandatoryparent: contacts, //mandatorytemplateUrl: 'contacts.list.html'
}
$stateProvider.state(contacts).state(contactsList)
```

ionic 路由结合 tap 实现页面切换

在 ionic tab 中定义 ion-nav-view 并且加上 name 属性

<ion-nav-view name="news-list"></ion-nav-view>
<ion-tabs class="tabs-icon-top tabs-positive"><!-- Dashboard Tab --><ion-tab title="list" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/news/list"><ion-nav-view name="news-list"></ion-nav-view></ion-tab><!-- Chats Tab --><ion-tab title="content" icon-off="ion-ios-chatboxes-outline"icon-on="ion-ios-chatboxes" href="#/news/content"><ion-nav-view name="news-content"></ion-nav-view></ion-tab>
</ion-tabs>

在 ionic $stateProvider.state 中定义 view 并对应 ion-nav-view 中的 name 属性

$stateProvider.state(‘news‘, {url: "/news",abstract:true,templateUrl: "templates/news.html"
}).state(‘news.list‘, {url: ‘/list‘,views: {‘news-list‘: {templateUrl: ‘templates/news-list.html‘}}
})

ionic states 抽象状态 abstract一个抽象的状态可以有子状态但不能显式激活，它将被隐性激活当其子状态被激活时。下面是两个最常用的抽象状态的示例：为所有子状态预提供一个基 url在父状态中设置 template 属性，子状态对应的模板将插入到父状态模板中的 ui-view(s)中

Ionic 又来！（摘自网络，做了剪报）

Web移动端混合开发--IonicFramework相关推荐

移动端---混合开发1 + 支付相关操作（手机app支付、网页支付）--支付流程
混合开发 1️⃣ 以前端为主导进行开发(Hybrid app)(即所有的页面部分都是用网页 h5 的技术来做的,Hybrid 是做编辑器的) uniapp.mui 是国内主流的小公司做混合开发的技术. ...
vue项目对接pad端——混合开发总结
近期互动项目的开发接近尾声,完成了pad端的对接工作,在此记录总结对接中遇到的问题与收获. 设备类型的判断因为项目同时需要适配PC.PAD两个端,因此需要通过windows的navigator对象获 ...
【2020年APP-Flutter混合开发之路】01 - Flutter的初步思考和开发部署
为什么选择Flutter 在使用Flutter开发之前,我是一个标准的iOS开发人员.我至今认为苹果的整个体系,甚至整个技术框架都是业内最牛逼,最完善的,你甚至挑不出太多毛病.尤其在苹果发布Swift ...
基于H5的混合开发介绍（一）WebView
转自: https://www.cnblogs.com/sanchang/p/9261461.html 一 WebView到底是什么 1 WebView是一种控件,它基于webkit引擎,因此具 ...
【混合开发】- 1、技术原理
文章目录 1.关于混合开发 1-1. 什么是混合开发 1-2. 流行的混合开发方案 2. 混合开发app 的本质 2-1. Hybrid App 混合开发app 的本质 2-2. 什么叫做JSBrid ...
Qt 5.4正式版发布，支持HTML5混合开发
Qt是一个基于C++.适用于跨平台应用和用户界面(UI)开发的框架,它支持多种桌面.嵌入式和移动操作系统.Qt不但能够开发GUI程序,还能够用于开发非GUI程序.近日,从Qt的官方博客中得知,最新版本 ...
Unity iOS混合开发
我的第一篇博客是写的Unity和Android平台混合开发相关,接触iOS和Object-C也有一段时间了,此次,将讲述下Unity与iOS混合开发的原理,也为Unity高级移动端混合开发做下铺垫.闲 ...
OnsenUI - 专为混合开发/手机 web 应用打造的开源移动端 UI 组件库
具有原生应用外观的组件库,性能表现也非常不错,适合用来开发 App,值得关注和学习使用. 关于 Onsen UI Onsen UI 是一套专为移动应用设计的丰富的 UI 组件库,使用前端开发者熟悉的j ...
移动端H5混合开发设置复盘与总结
此篇接上一篇: 移动端H5混合开发,Touch触控,拖拽,长按, 滑屏实现方案 https://www.cnblogs.com/buoge/p/9346699.html app 场布设置已经上线了, ...
linux里qt画直线_Qt与Web混合开发(一)简单使用
前言 <Qt与Web混合开发>系列文章,主要讨论Qt与Web混合开发相关技术. 这类技术存在适用场景,例如:Qt项目使用Web大量现成的组件/方案做功能扩展, Qt项目中性能无关/频繁更新 ...