混合app开发
Posted webcyh
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了混合app开发相关的知识，希望对你有一定的参考价值。
学习目标： 了解目前移动app开发的三种模式 了解mvc和mvvm架构模式 熟悉混合app的开发应用场景 掌握混合app开发的概念 掌握angularjs、ionic、和cordova在混合app开发中的作用、 目前移动app开发主要分为三种模式 Native App 、 Web App 、Hybrid App 原生ap是使用相应平台特有的开发工具进开发 外观和性能极佳 但开发成本高 因为每一种移动操作系统都需要独立开发项目 web App 网页应用程序 需要依赖于移动端浏览器 主要使用htmlo5 javascript css但是有局限性 比如没有访问原生设备api的功能 hybird App 混合模式移动应用 混合app依赖于原生容器 通过该容器里边可以编写网页程序以及调用设备api 原理 在原生app当中嵌入轻量级的浏览器 html5开发部分原生功能 这样里边的web app也有访问设备api的功能 使用混合app更加的经济 而且节约成本 集成了原生app和 webapp的优点 web编写的代码兼容不同移动平台 使用混合app能够封装大量的原生插件 降低开发成本和时间成本 目前 资讯类app 和视频app普遍采用native框架中嵌入web内容的混合 比如美团 爱奇艺微信等均采用混合App开发模式 目前流行的混合开发模式 AngularJS+ionic+Cordora 使用基于MVC的MVVM模式开发模式 M 数据来源 V 数据渲染 C事件处理 MVVM（采用数据的双向绑定 视图的变动自反映在视图模型上 MVC当中视图依赖于模型 但模型不依赖于视图 而且视图可以直接访问模型） 比如 表单提交 讲请求转交给模型视图 模型视图操作模型 数据更新 模型处理完数据后通知视图模型数据发生变化 视图模型更新视图数据 视图讲数据变化展示给用户 AngularJS框架采用了接近MVVM模式的实现方式 angular特征：模型师徒 自动化双向数据绑定 模板 指令 服务 依赖注入 路由等 提供简介的方式创建单页面应用 单页面应用： 简单的讲就是只在一个页面内完成整个网站的复杂页面交互二不刷新页面的应用 要实现单页面需要哪些技术 数据来源 数据渲染 事件处理 优点： 相应速度快 无需加载整个页面 前后端分离 后端不再负责模板输出 后端API通用化 Cordora是一个免费开源移动框架 提供了一组设备相关的api 通过这组api 移动应用能够通过JavaScript技术访问原生的设备功能 比如摄像头 麦克风等 基于web标准创建的因此应用程序的移植性很好 通过Cordora的应用通过SDK打包成为应用程序 可以从每种设备的应用程序商店下载 Cordora作用是将完成编码的移动app打包成原生app 部署到特定的移动和平台 ionic是目前最有用签了的一款混合式html5移动开发框架 通过sass构建应用程序 使用标准的html css JavaScript目前支持android和ios 提供了大量的UI组件 ionic最大的亮点是集成了angular Cordora 目前用于ios7+ Android4.1+ ionic主要为混合app提供一个原始容器 后边初次认识angular需要熟悉的知识点 了解angular指令 环境配置 模块和控制器 （重点知识） 作用域 表达式 （重点知识） 双向绑定 （重点知识） angular1 （基于ES5） angular2（基于ES6 需要熟悉ts） 两个版本区别很大 第二个版本可能需要一如第三方库用于解决有些浏览器不支持ES6 的问题 AngularJS 是通过模块来组织、实例化、启动应用程序的 angularjs 当中模块module 的作用是存储一组angularjs功能组件 如类 含税 变量等 病可以与其他模块产生互相依赖的关系 只通过公开的借口与其他模块合作 使用者只需要关注公开的借口 模块声明的方式 var app = angular.module(‘main.demo‘,[]); 第二个数字用于保存该模块所以来的其他模块的名称 如果数组为空说明模块没有依赖 定义模块后 可以在html标签上用ng-app指令做绑定操作 比如为某个div使用该模块 // <div ng-app="main.demo"></div> 这个操作的作用： 让angular框架在指定的标签上面启动 并载入模块 载入该模块后 在标签内部就可以使用该模块上的各种angular功能组件 比如控制器 控制器与ng-controller angular控制器是常规的JavaScript对象 最大作用时间作用域和模板上的html标签绑定在一起 然后html上面的angular表达式就可以依赖于该作用域执行 通常一个控制器对应一个模板 一个模板可以有多个控制器 创建控制器 app.controller("maincontroller",function($cope)//$cope为孔子器的回调函数 参数$cope表示模块的作用域 该cope是应用在视图和控制器之间的纽带 在回调函数当中可以为该模块准备各种数据 ); 为某个div绑定该控制器 // <div ng-controller="maincontroller"></div> 这样在该便签上面中可以使用控制器maincontroller所指定的所有数据 当一个控制器被定义的时候就产生一个作用域 <h1>welcome</h1> <button ng-click="say()">点击我出发angular回会话</button> $scope.say = function() $scope.welcome = "我是被注入的模块当中的函数"; ; 控制器当中使用函数 angular所有的应用都有一个根作用域$rootScope 他可以作用在ng-app绑定的所有html以及子元素上面 根作用域上面的值可以在任何控制器上面使用 app.controller(‘myCtrl‘,function($scope,$rootScope) 作用域的嵌套 angular利用JavaScript的原型链实现作用域的嵌套关系当在当前作用域找不到相关的属性的时候将上一级寻找 但无法到下一级作用域寻找 表达式的使用 可以包含 数字 字符串 运算符 函数调用等等 angular当中不会使用eval函数调用执行表达式 而是将表达式卸载插值语法中或者在指令当中输入 例如 value = value+1 例如 例如在这里寻找myCtrl2作用域上的值t 这是一个数组arr[0] 字符串拼接t+‘hello‘ 1+2 t<br/> 属性表达式 angular的属性表达式对应的全局变量是当前作用域的 JavaScript属性表达式对应的全局变量是window $window 指向window 因此在angular当中 使用$window.alert();实现 JavaScript当中的alert()效果 $是angular的专属符号用于区分开开发人员自定义的属性的符号 在表达式执行时 angular 允许其值为undefined 和null同时允许为定义的函数 （不会触发异常） 大多时候表达式用于数据绑定的例如 a.b 在angular当中 不允许使用 条件判断 循环 抛出异常 等循环控制语句 逻辑代码都应该写在控制器当中 通过过滤器链来传递表达式的结果 例如将日期对象转换为用户本地的时间格式或者将英文字母转换为大写 name|uppercase|filter 链式调用过滤器 123|number:2 小数点位数 angularjs 指令 angular是结合模板和指令来向用户呈现html视图的 模板是现在的基本的html 指令用于输出或者绑定表达式 ng-model="" ng-bind="" 这些大量的ng前缀的指令 用于处理dom操作功能 指令的实质是绑定在dom元素上的函数 函数内部可以实现调用dom 调用方法 定义行为 绑定控制器和对象等 、指令会在浏览器解析dom元素时和元素的其他属性一样被解析 自动化双向数据绑定 单向绑定即任何对数据模型或者相关内容的概念都不会自动化反映带视图上面 双向数据 是当视图发生改变的时候 数据模型也会发生变化 数据模型发生变化 视图也会发生变化 angular指令 学习目标： 熟悉常用的内置命令 如何自定义命令 掌握ng-repeat 指令的使用方法 自定义指令的约束 指令的作用域 根据使用场景和作用可以将指令分为装饰器型指令deractor和组件型指令component 装饰器指令：为dom添加行为 ng-click ng-hide ng-show 控制dom的显示和隐藏 负责搜索页面数据的bi8anhua 然后利用脏检查机制 保持数据视图与作用域数据的同步 组件型： 包含业务需要的视图和交互逻辑 例如弹出框 上拉菜单 组件型指令具有高内聚（组件内部实现了他应该包含的功能） 低耦合（与外部组件之间尽量少地互相依赖）的特点 内置指令大致分为： 程序控制类指令、 ng-app 初始化一个应用程序 该元素也是跟作用域的起始点 初始化 ng-init="h=‘root‘" ng-controller 在控制器当中编写属性和方法 数据绑定类指令、 ng-model 将某个作用域内的数据绑定到表单控件上 ng-bind 使用给定的变量或者表达式的值替换html的内容 h<br/> 替换<span ng-bind="h">替换掉这里边的值</span><br/> 状态设置指令、 用于改变元素的显示状态 为元素绑定样式 设置元素只读和禁用 设置显示和隐藏等 ng-style ng-class ng-readonly 只读 会被提交 ng-disabled 无效 不会被提交 ng-hide ng-show 事件绑定类指令、 ng-click ng-dbclick ng-focus 支持a input select textarea window对象 ng-blur 支持a input select textarea window对象 ng-change 支持input select textarea 访问流程类指令 ng-if 如果里边的值为真则 往html当中添加元素 否则不添加元素 bg-switch 分支判断 该指令根据表达式显示或隐藏对应的部分 ng-repeat 循环集合 输出指定次数的html元素 这里的集合必须为数组或者对象 遍历数组 item in collection 遍历对象 (key,value) in collection 同时 输出key 和加载处理类指令等 为了因为数组出现重复值无法正确输出的问题这里可以这样写 item in goods track by $index 加载处理类指令 用于解决angularjs应用在加载时代码未加载完的问题 ng-cloak 防止angular代码因为代码为完成加载而出现闪烁的问题angular 解决方法在需要防止闪烁的地方添加 ng-cloak以及引入angular-csp.js文件 实现理论 这个css文件作用在设置了ng-cloak的元素在angular未加载的时候不显示该元素 ng-src 防止src值为angular代码 此时使用ng-src 中的值 确保在angular代码执行之前不显示图片 ng-href 自定义指令 属性： template String：如果为字符串类型此时可以是一段html function 返回值为html而且接受两个参数 tElement 使用该函数的指令 tAttrs 使用该指令的元素的属性的集合 为一个对象 replace false 不替换使用该指令的元素的元素 而是追加到这个元素的内部 true 直接替换子元素 templateUrl function 接受两个参数 tElement tAttrs transclude boolean 是否保留原来的元素的子元素 还可设置自定义指令的约束 E html元素形式标记 C css 类名形式 M 注释的方式 A html属性的方式 app.directive(‘myDerective‘,function() return template:"<span>算法分析</span>", replace:true,//直接替换掉原来的元素 restrict:"ECMA" //默认为A );//自定义指令 angular相关原理 了解angular中国MVVM实现方式 熟悉angular启动流程 脏检查机制的实现原理 $waich()函数和$apply()函数的作用 熟悉依赖注入和控制反转 掌握angular的三种依赖注入方式 view 转注界面的显示和渲染 包含声名指令和html标签的视图模板 viewModel $scope充当了viewModel角色 负责view和Model的交互和协助 view利用用户界面的交互操作model model为view提供数据 Mode是与程序的业务逻辑相关的数据的封装载体 controller 负责viewModel的初始化 组合多个服务来获取业务领域Model的数据 将数据放在viewModel上面 对于Model的变化也会反映在viewModel上面切通过脏检查机制 $digest来更新到view上面 首先考虑数据结构 然后设计数据交换和逻辑 最后实现视图 启动流程 在angular启动时 带有指令的html 模板会被解析器解析渲染成视图
以上是关于混合app开发的主要内容，如果未能解决你的问题，请参考以下文章