Fork me on GitHub

移动App学习笔记集锦一

发表于 | 分类于 |

1.现在app开发方类型有几种？

  • 混合app,原生app: android-java ios-objective-c:swift

  • WebApp:就是在浏览器中运行的web应用(比如用angular做的单页应用就叫做webapp,页面功能复杂了，不再是纯粹的展示文字，图片)

  • NativeApp:用java(android)或Object-C(ios),C# 开发window phone(软件太少)等原生语言开发的应用

  • HybridApp:就是外面是原生的壳，里面是webapp应用，兼具2者的优势

    • apk是安卓安装包的后缀

      1.1. 三种开发类型的原理和对比

      三种开发类型优劣对比

      2.流行开发框架介绍

2.1.移动端开发有哪些框架呢？

  • Ionic –, // 重装系统 。

  • Html5+

  • AppCan

  • Framework7

  • Jquery Mobile //

  • React Native

    • 用js写出原生的app。

  • weex 阿里出的

2.2HTML5+

2.2.1首先要认识Html5+联盟是什么？

HTML5中国产业联盟，简称“HTML5+联盟”，是为了更好的推进HTML5的商用、更好的为HTML5开发者服务而由产 业链主流厂商共同组成的一个联盟。
联盟致力于整合产业链资源，建立围绕HTML5开发者的生态系统，通过产业链共同为HTMLl5开发者服务。
W3C中国是联盟的指导单位。
CSDN 和 DCloud 是联盟的秘书处单位。

2.2.2.Dcloud官网

  • 官网地址
  • Emmet语法
  • Dclout4个核心产品
    Dclout4个核心产品
    • HBuilder：是一款web开发工具。它能大幅提升开发效率，对程序员也设计了更人文关怀的UI，它包括最全面的语法库和浏览器兼容性数据。到现在 已经有两年的时间了，到现在大概有几十万的开发者在使用。
    • 5+Runtime：是一个H5的增强引擎。这是一个可以去调用H5的能力和原生操作系统的产 品。
    • MUI框架：是高性能的前端框架，可用开发高性能App，也是目前最接近原生App效果的框架，可以有效解决HTML5原生开发中遇到的部分问题，同 时体积也小。
    • 流应用：会让用户感觉一点开就可以用，这也是颠覆现有的应用方式的主要因素，给最终用户去使用应用有更好的体验。
      • 如果手机上安装用360手机市场的话，html5+开发的移动扫一下二维码,只需要一点点流量就能够使用了。

2.2.3.Html5+的优点

  • 提供了一个自定制的IDE工具，支持非常好，轻量级，甚至不需要安装直接解压缩就可以使用
  • 开发出来的app的性能很好，用户体验很高
  • 丰富的api支持，号称有40万+

2.2.4.Html5+的缺点

  • 打包比较麻烦，需要上传源码，有些公司可以不希望公开源码
  • 从新学习样式

是国产的(爱国)

2.2.5.现在那些公司在用Html5+?

html5+开发的产品

2.3.Ionic介绍

2.3.1.官网地址

2.3.2.首先要认识Ionic框架？

IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定，使用它成为 Web 和移动开发者的共同选择。Ionic是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。Ionic框架的目的是从 web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。

2.3.3.ionic框架构成

  • CSS框架 - 提供原生 App 质感的 CSS 样式模拟。 ionic 这部分的实现使用了 ionicons 图标样式库。
  • JavaScript框架 - 提供移动 Web 应用开发框架。ionic 基于 AngularJS 基础框架开发，遵循 AngularJS 的框架约束；此外 ionic 使用 AngularJS UI Router 实现前端路由。
  • 命令行/CLI - 命令行工具集用来简化应用的开发、构造和仿真运行。ionic 命令行工具使用了 Cordova，依赖于平台 SDK（Android & iOS）实现将移动 Web 项目打包成原生 App。

2.3.4Ionic特点

  • 基于Angular语法，简单易学。
  • 是一个轻量级框架。性能优越，运行速度快。
  • 完美的融合下一代移动框架，支持 Angularjs 的特性， MVC ，代码易维护。
  • 提供了漂亮的设计，通过SASS构建应用程序，它提供了很多UI组件来帮助开发者开发强大的应用。
  • 专注原生，让你看不出混合应用和原生的区别
  • 提供了强大的命令行工具。

2.3.5.ionic开发注意点有哪些？

由于 ionic 使用了 HTML5 和 CSS3 的一些新规范，所以要求 iOS7+ / Android4.1+。
在低于这些版本的手机上使用 ionic 开发的应用，有时会发生莫名其妙的问题。

2.3.6.现在那些公司再用ionic开发？

2.4.1 官网地址

2.4.2.React native原理图

  • 原理图

2.4.3.React Native核心实现是什么？

  • React Native里面没有webview，这货不是Hybrid app，里面执行JS是用的 JavascriptCore。

  • 把Native code十来个最基本核心的类（RCTDeviceEventEmitter、RCTRenderingPerf等）、或组件（RCTView、RCTTextField、RCTTextView、RCTModalFullscreenView等）封装成二十来个基本组件（Popover、Listview等）

  • 实现了一套类似css的子集，用来解决样式问题，相当复杂和强大，靠这个才能将Native的核心组件组成JS层的基本组件再组成业务端的业务组件

  • 在React Native中，写JS的工程师解决的是「将基本组件拼装成可用的React组件」的问题，写Native Code的工程师解决的是「提供核心组件，提供足够的扩展性、灵活性和性能」的问题。

2.4.4.React Native的优点有哪些？

  • 不用Webview，彻底摆脱了Webview让人不爽的交互和性能问题。
  • 有较强的扩展性，这是因为Native端提供的是基本控件，JS可以自由组合使用。
  • 可以直接使用Native原生的「牛逼」动画。
  • 可以通过更新远端JS，直接更新app。

2.4.5.现在那些公司在用React Native

2.5.Jquery Mobile介绍

2.5.1.官网地址

2.5.2.Jquery Mobile是做什么的？

  • jQuery Mobile 是一个为触控优化的web框架，用于创建移动 web 应用程序。
  • jQuery 适用于所有流行的智能手机和平板电脑
  • jQuery Mobile 构建于 jQuery 库之上，这使其更易学习，如果您通晓 jQuery 的话。
  • 它使用 HTML5、CSS3、JavaScript 和 AJAX 通过尽可能少的代码来完成对页面的布局。

2.6.AppCan介绍(国产)

2.6.1官网地址

2.6.2.首先来认识AppCan是什么？

AppCan.cn开发平台是基于HTML5技术的跨平台移动应用快速开发一体化解决方案。开发者利用HTML5+CSS3+JavaScript技术可 以快速地开发与本地应用体验相媲美的移动应用。AppCan.cn平台提供了UI快速开发框架、本地功能调用API接口、应用打包系统、IDE集成开发环 境和本地应用调试模拟器，预置数百套界面模板和数十种应用插件，提供多套应用模板。完善的框架接口，人性化的开发环境，丰富的开发资源，强大的服务支持， 使开发者可以快速迈入移动开发领域。

2.6.3.谁在用AppCan?

3.ionic框架主要技术介绍

3.1.Cordova介绍

3.1.1官网地址

3.1.2.Cordova是什么？

  • Cordova提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。

  • Cordova支持如下移动操作系统：iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。

3.1.3和phonegap的关系？

  • Cordova是贡献给Apache后的开源项目，是从PhoneGap中抽出的核心代码，目前(PhoneGap和Apache Cordova之间的)唯一区别是下载的包的名字，这会持续一段时间。

3.2.Ng-cordova介绍

3.2.1.官网地址

3.2.2.Ng-cordova是什么？

  • ngCordova是在Cordova Api基础上封装的一系列开源的AngularJs服务和指令扩展，让开发者可以方便的在HybridApp开发中调用设备能力，即可以在AngularJs代码中访问设备能力Api。
  • 在cordova插件的sucess和error js回调方法中，是无法使用 angularjs的$scope对象和注入的方法的，只能访问全局的方法和变量，这样会导致很多麻烦，必须使用传统的js方法写很多难看的代码。使用 ngCordova可以解决这个问题。

3.3.Angular介绍

  • 此处省略100字

3.3.4.Angular适用于哪些场景？

1、单页面应用程序
2、Angular更适合于CRUD的管理系统开发。
3、也非常适合模块化，分层化，数据绑定
4、hybrid开发神器

3.3.5.Angular不适用于哪些场景？

1、内容网站，需要SEO的。(SEO目前也有了prerender解决方案)
2、交互频繁的，如游戏之类交互体验网站。（单页面应用程序）
3、太过于简单的页面。（因为要考虑mvc,注入等，就会笨重）

3.4.Angular 2

组件化，移动化

3.5.ES6介绍

3.5.1.ES6历史

1996年11月，JavaScript的创造者Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这种语言能够成 为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript。这个版本就是ECMAScript 1.0版。

3.5.2.ES6是什么？

  • ECMA-262 的第六次变更，所有以前按照惯例称为es6，ES2015
  • ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。
  • 2015年6月，ECMAScript 6正式通过，成为国际标准。
  • Node.js是JavaScript语言的服务器运行环境。它们对ES6的支持度，比浏览器更高。通过它们，可以体验更多ES6的特性。
  • 这个标准的牛逼之处就在于会逐步统一前端，因为新增加的module,异步编程，Generator函数这些东西在angular中和node中都有很好的实现了。

3.5.3.ES6学习地址

http://services.gradle.org/distributions

[TOC]

-------------本文结束感谢您的阅读-------------