原生移动app框架inoic功能研究

本篇只侧重框架提供的功能和能力的研究,请关注后续实际部署使用体验。

一、inoic是什么?

inoic是一个可以使用Web技术以hybird方式开发移动app的前端开源框架。

二、inoic框架特点

1.
利用web技术开发移动app。

ionic提供了一套HTML、CSS、JS的类库。我们可以使用其提供的CSS组件和工具构建具有良好交互性的app。

2.
关注性能

ionic框架以更少的DOM操作,零JQuery和硬件加速过度,在现代最新的移动设备上性能表现优越。

3.Angular

ionic基于Angular创建了一套最合开发丰富健壮的app的强大SDK。ionic与Angular完美融合,提供了适合专业化app开发的核心架构。

4.关注原生

ionic对当下流行的原生移动开发SDKs进行抽象,并利用Apache
Cordova或者Phonegap编译,使开发人员只关注自己的代码,而不用针对IOS和Android开发多套原生app。可以实现开发一次,任意部署。

5.UI设计精美

UI干净、简单、实用。其提供了流行的移动组件、结构、交互规范、漂亮的皮肤。

6.功能强大的CLI

一个命令可以完成创建、构建、测试、部署ionic
app到任意平台。

7.学习有趣

只需要学习HTML、CSS、JS、AngularJS。

8.提供专业原型工具

使用Creator可以通过简单的拖拽创建真正的ionic
app。其可以导出干净、立即可用的ionic代码,甚至是IOS和Android二进制文件。网站提供了在线体验,但是可能是国内网络的原因,登录后无法进行操作。

9.提供了启动、构建、测试和部署的专业化工具Lab,但是打开页面无法进行下载。

10.提供了一个应用市场,可以上传app和插件,但是市场页面没有东西,没有活力。

三、ionic依赖的底层技术

ionic仅仅是开发hibrid移动app的前端框架,其依赖一些底层的技术框架

1.
其依赖apache
Cordova或者Phonegap提供的原生SDK访问能力,并依赖其将ionic
app编译部署。

2.Sass,其核心css是使用Sass编写,可以利用Sass对Css功能的增强能力,以及灵活易于维护的能力,

同时保障了ionic框架的css扩展能力。

3.Angularjs,其通过angularjs对apache
Cordova提供的原生SDK接口进行封装(称为ngAngular),同时其也依赖angularjs提供的动画、触控系统、ui交互功能,同时angularjs的核心架构也是基于angularjs的MVC模式构建的。

四、浏览器兼容性

ionic重点关注原生或者hibird移动app,而不是移动web站点。其更关注特定平台提供的Web
View控件的兼容性。对于1.2.4版本的ionic支持IOS7+和Android4.1+的UIWebView。

五、开源协议

基于MIT协议,可以免费用于个人和商业项目。

六、技术支撑

ionic是一个叫Drifty公司的三个人员开发的,该公司还有CodiqaJetstrap两个移动产品。哦盖过了

七、ionic提供的CSS组件

框架提供了丰富多样的CSS组件包括Header、Content、Footer、Buttons、List、Cards、Forms、Toggle、CheckBox、RadioButton、Grid等

八、平台相关定制

1.平台相关类

ionic提供了平台设备类和平台OS版本类以方便我们修改或者扩展现有样式。ionic会在app启动的时候在body里添加相关的平台类。

平台设备相关类如下

平台OS版本类如下

2.使用CSS直接自定义平台相关样式

针对android自定义bar-header的文本样式。

.platform-android .bar-header {
  text-transform: uppercase;
}
3.使用angular直接自定义平台相关样式
ionic通过ionic.Platform暴露平台相关类,我们可以在控制器中获取平台类
.controller(‘AppCtrl‘, function($scope) {
  $scope.platform = ionic.Platform.platform();
})
我们也可以在html元素中使用平台类控制元素的样式,比如控制标签在android的时候显示一种样式,其他系统的时候显示另外一种样式。
<ion-tabs class="tabs-stable" ng-class="{‘tabs-positive‘: platform == ‘android‘, ‘tabs-icon-top‘: platform != ‘android‘}">
  <!-- ion-tab directives go here -->
</ion-tabs>
根据平台加载不同模板
.state(‘tab‘, {
  url: "/tab",
  abstract: true,
  controller: ‘AppCtrl‘,
  templateUrl: function() {
    if (ionic.Platform.isAndroid()) {
        return  "templates/home-android.html";
    }
    return "templates/home.html";
  }
})
4.使用merge文件夹加载不同的文件
merges/
    ios/
        index.html
        css/
            platform.css
        js/
            app.js
    android/
        index.html
        css/
            platform.css
        js/
            app.js

九、JS组件

ionic提供的css组件是通过基于angular实现的control实现用户交互功能的。可以简单看下list的用法



<ion-list ng-controller="MyCtrl"
          show-delete="shouldShowDelete"
          show-reorder="shouldShowReorder"
          can-swipe="listCanSwipe">
  <ion-item ng-repeat="item in items"
            class="item-thumbnail-left">

    <img ng-src="{{item.img}}">
    <h2>{{item.title}}</h2>
    <p>{{item.description}}</p>
    <ion-option-button class="button-positive"
                       ng-click="share(item)">
      Share
    </ion-option-button>
    <ion-option-button class="button-assertive"
                       ng-click="edit(item)">
      Edit
    </ion-option-button>
    <ion-delete-button class="ion-minus-circled"
                       ng-click="items.splice($index, 1)">
    </ion-delete-button>
    <ion-reorder-button class="ion-navicon"
                        on-reorder="reorderItem(item, $fromIndex, $toIndex)">
    </ion-reorder-button>

  </ion-item>
</ion-list>


app.controller(‘MyCtrl‘, function($scope) {
 $scope.shouldShowDelete = false;
 $scope.shouldShowReorder = false;
 $scope.listCanSwipe = true
});

十、开发流程

1.创建项目

--创建

$ ionic start todo blank
--添加平台
$ ionic platform add ios
$ ionic platform add android
--测试
$ ionic build ios
$ ionic emulate ios
2.创建简单的html页面
3.测试程序
浏览器中测试
$ ionic serve
模拟器测试
$ ionic build ios
$ ionic emulate ios
手机浏览器测试
物理设备原生测试
$ ionic run android
4.重复进行功能开发和测试
5.发布app
--生成
$ cordova build --release android
--签名
$ keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000
$ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-unsigned.apk alias_name
$ zipalign -v 4 HelloWorld-release-unsigned.apk HelloWorld.apk
时间: 2024-11-03 03:28:21

原生移动app框架inoic功能研究的相关文章

混合App 框架选型

个人一直想做个App,但是学习 IOS 的过程发现 原生的做界面还是听麻烦的就放弃了.后来就转到混合式App阵营了 混合式App 定义 Hybrid App(混合模式移动应用)是指介于web-app.native-app这两者之间的app,兼具"Native App良好用户交互体验的优势"和"Web App跨平台开发的优势" 平台框架选择 APICloud Dcloud Ionic 平台对比 Dcloud 平台 大量使用H5接口 提供一些原生Api(官方号称40万A

手机教育APP开发,功能和难点详解

从2016年下半年开始,有关内容的创业逐渐多了起来.付费内容成为了焦点话题,应运而生的各类教育APP层出不穷.那么,教育APP的开发难点在哪里?如何开发出一款高质量的教育APP呢? 一. 教育APP开发难点 英语学习和面向K12市场的APP最受关注,孩子的教育是永恒的话题.而一款日常学习.作业,习题等考试的APP开发有以下难点: 1.       更新难点: 众所周知,教育APP的内容量巨大,且繁杂.尤其是针对学生使用的APP,既有数学公式,也有化学图形:既有语文古文,又是外语习题,而且还要分年

用web技术开发出原生的App应用的体会(1)

本人是是个前端小白,学前端已经有半年的时间了,前几天开了个博客,希望记录自己学习历程的点滴. 今天要写的是关于用html,css,javascript等web技术开发原生的app应用. 总所周知,web所写出东西的性能一直被人饱受诟病,这个也是做web开发会一直被轻视的原因之一,那么怎么用web技术开发出较好的有原生一般体验的应用呢?原生的应用开发成本高,而且更新周期短,这就需要用户不断的更新才能使用到原生App的一些新的功能和特性,试想一下,一般的我们的手机安装的应用都在10个以上,那么每隔一

第二章App框架设计与重构

response标准格式: { "isError":false, "errorType": 0, "errorMessage": "网络异常", "result": "" } { "errorMessage" : "网络异常", "errorType" : 0, "isError" : false, &quo

一起来搭App框架(侧滑与toolbar联动+选项卡(viewpager+fragment+radiogruop)+optionMenu)

1.概述 最近在学车,抽着空写了一个常用的App框架,可惜不会制作gif图片,请忽略录屏软件的那个浮动窗口,要是有更好的方式制作gif麻烦告知下提前感谢,效果图如下,凑合着看下吧. 主要实现了 [1]使用RadioGroup处理选项卡优化布局 [2]使用ToolBar跟侧滑图表联动,效果更好 [3]集合了viewerPager+fragment,drawerlayout+toolbar,optionmenu以及circleImageView处理头像等功能 一般app项目应该可以应付了.下面说下实

Android App框架设计之编写基类BaseActivity

Android App框架设计之编写基类BaseActivity 编写基类BaseActivity - OOP里面子类里面能够共享父类的方法,提高代码的可复用性 - 基类的编写要根据实际项目的情况,有的可能很简单 比如只是显示 "关于" 信息, 业务功能非常少 你可以不用继承基类进行扩展 BaseActivity继承Activity 还是 FragmentActivity 还是其它? 也是根据你的技术要求,因为解决问题的方法有很多种,或者你根本不用写基类也能完成工作. 我们的目的是编写

20 行代码极速为 App 加上聊天功能

现在很多 App 都需要集成 IM 功能,今天就为大家分享一下集成 IM 基本功能的步骤.本文内容以 JMessage 为例.极光 IM ( JMessage ) = 极光推送 ( JPush ) + IM,本篇只论述其中的 IM 部分,为大家快速集成 IM 功能提供一个简明的范例. 我们先来看一下 IM 的基本功能与本文内容的对应关系: line 0:准备工作 下载 SDK 集成 SDK line 1:引入头文件 #import <JMessage/JMessage.h> JMessage

超酷的计步器APP——炫酷功能实现,自定义水波纹特效、自定义炫酷开始按钮、属性动画的综合体验

超酷的计步器APP--炫酷功能实现,自定义水波纹特效.自定义炫酷开始按钮.属性动画的综合体验 好久没写博客了,没给大家分享技术了,真是有些惭愧.这段时间我在找工作,今年Android的行情也不怎么好,再加上我又是一个应届生,所以呢,更是不好找了.但是我没有放弃,经过自己的不懈努力,还是找到了自己喜欢的Android工作,心里的一块石头终于落下了.但是迎接我来的是更多的挑战,我喜欢那种不断的挑战自我,在困难中让自己变得更强大的感觉.相信阳光总在风雨后,因为每一个你不满意的现在,都有一个你没有努力的

利用jsp和Servlet实现自己的原生JavaEE MVC框架

MVC是什么我就不多说了,我们平时做JavaWeb项目时,大都会用SSH框架的不同组合,那能不能不用SSH框架来实现一个原生的MVC框架呢? 下面就让我们来实现一个自己的javaWeb MVC框架. 项目结构如下: Controler的实现: package com.shu.controler; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServ