混合app开发基础-课件ionic项目实战课程笔记

Ionic项目实第1章概 课程目标说 项目效果演 Ionic开发简 第2章开发环境配 java环 C++环 AndroidADT环 Node环 Git环 安装时常见问 第3章快速开 安装项目依 快速创建项 项目结构说 打包 第4章项目结构搭 为什么要从新整理结构 抽取步 外面四个js实现步 功能模块js的整理步 扩展..........................................................................................第5章功能实 路由的实 引导页的实 创建引导页步 使用swiper步 首页的实 京东项目布局改 Ion-view的生命周 延迟加载的实 Ionic中的页面跳转和参数传 Ionic中的路由跳转方 Ionic中的参数传 数据请 $http服务使 promise/A+规 $q服 Ion-refresher介 使用介 上拉加载..................................................................................ion-infinite-scroll介 使用介 简 和webSQL的比 ng- 官 使用步 白设 页面代 设置白..........................................................................代码实 文章资 双击退出应 实现思 app图 项目优 第6章插件扩 第1章概用前端技术+混合开发框架的东西，开发出来一个appIonic配置环操作（第2章开发环境配javaAndroidADT需1、在上搜索“javajdk”并安2、配置到全局变量JAVA_HOME Node需1、注意要从新安装一下vs2016，把c++环境勾AndroidADT打包android应用的时候需1、安装ADT并添加到环境变量 中，请参考中的第一个问题进行/2、点击installer_r24.3.4-windows进行安装，其他文件只需要解压缩后，放置结构如下图即可。Android项目结构3、配置到全局变量 Node一些插件环境需1、在搜“node”，安装即可，默认已经配置到环境变量中Gitng-cordova插件需要，源代码管理1、在搜“git”，安装即可环境安装遇到的问2、配置到全局 1、在运行ionicbuildandroid的时候报错[Error:ANDROID_HOMEisnotsetand“android”commandnotinyourPATH.这个时候要这样设置： path中写：%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools2、这个是问题是在环境变量配置的PATH中要添加3、一直遇到这个问题，找不到build-解决办4、这个问题是大家在配置npm的时候用了，要把的代码去5、这个问题是把c盘/用户/用户名下的/.gradle文件夹删掉，然后ionicbuildandroid第3章快速开打开命令窗口,在搜索中输入输入npminstallgcordova先找到一个放项目的 中按住shift键右击,在当前文件夹打开命令窗 myApp(默认是tab样式先找到项目的 中按住shift键右击,在当前文件夹打开命令窗 第4章项目结构搭控制项目启动的app.js控制路由跳转的route.js控制全局变量的控制不同平台兼容性的功能模块划Controller：业务逻Factory:数据请求，和服务器进行操作Html页面：功能Route:子功能路由js，控制我们的页js1、创建四个控制全局功能的js文2、把每个js文件变成模config:configglobal:constantroute:config3、把js文件在html中引4、在app.js文件中注入我们其他三个模块的东西（加入功能1、通过angular.module.config方法定义路2、引入$stateProvider（）,3、就是根据浏览器url地址后面#部分后面你的变化匹配不同的路由，匹配到合适的路由之后，就会把templateUrl中写得页面模板渲染到我们页面中name属性的值进行选择渲染。Controller属性中的控制器会被自动渲染到模板页面中，变为ng-controller=”控制器名称”。1angular.module.constant2GlobalVariable，在其他模块1、通过angular.module.config定义成模2、注入$ionicConfigProvider服js1、创建四个文Controller文件：控制业务逻Route文件：功能模块路由Service文件：数据请求的Html页面2、把每个js文件变成模块route:angular.moduleconfigservice:angular.modulefactoryroute:angular.moduleconfig3、把js文件在html中引4、在模块js文件中注入需要的服务和模/2014/12/ionic-javascript-api-/2014/12/ionic-javascript-api-view-第5章功能实Ui-router的介地址： /angular-ui/ui-ui-router他算是angular中进行路由跳转的一个第插件，本质是对ng-route进行了一些封装。1、通过npminstallangular-ui-router2、index.html启动页面中引入js文件，引入顺序要注意，因为需要angular中的ng-route的东西，所以要在引入angular.js文件之后引3、需要引入ui-router模4、在html中的某个加上ui-view，作用就是在页面中挖了一5、js文件中编写我们的路由6、根据浏览器地址栏的变化，匹配不同的路由，然后进行模板页面的为了实现在一个页面中可以出现多个坑（模板页面替换位置）抽象路由的概念：1路由中的模板2父子路由的层级关系。Ionic1、在index页面中加入<ion-nav-view></ion-nav-view>，在ionic中ui-routerui-view已经被<ion-nav-view>组件封装了，所以不会出现在页面中。2、要写路由模块的配置信息，通过angular.module.config配置路由信（设置路由名称，url地址，模板页3、在index.html页面把路由jsapp.js中注入路由模块的功4、把页面的功能包裹在ion-view或者是ion-tab5、根据浏览器中url地址的变化，匹配不同的6、渲染我们的模板页面到相应的<ion-nav-view></ion-nav-view>1、创建四个功能模块2、编写模块功能，（这里从之前的代码html页面和css样式3、在index.html页面中引入三个文件(controller,route,service)Swiper3简官网 Swier3插件结构swiper步1、在任意一个位置打开开命令窗口，输npminstallbower–g2、在项目根打开命令窗口，输入bowerinstallswiper–save3、在index.html页面引入swiper.min.css，swiper.min.js4、把页面中的html代码加上对应的class样5、在controller中初始化swiper插件，并设置相应的京东项目布局改2、在index页面引入四个文件3、在总路由中注入子功能路由，controller,service也都要在子功能路由中Tab模板改1、对ion-tabs里面变为四个ion-tab组2、对四个ion-tab组件的名称，图标，跳转地址进行了修改，ion-nav-view组件的name属性改掉3、把tabs的抽象路由给抽取了出来，变为一个功能4、在index页面中引入tabs的相关文5、在总路由中注入tabs.route模动态生成1、在controller中模拟请求数据，把请求回来的数据放到$scope2、在html页面中通过ng-repeat指令循环生成slider3、初始化swiper对象，注意最好把observeParents，observer这两个设置为4、要注意初始化swiper的时间，最好放中Ion-viewIonic 不能在ionic angular中实现延迟加载 me- /package/angular-ionic-image-lazy-load（专门的Ionic延迟加载插件/paveisistemas/ionic-image-lazy-1、用bower进行2、在index页面中引入ion-image-lazy-load.js文4、在ion-content组件上加上lazy-scroll指令，注意lazy-scroll指令只能作用Ioni-content组件上5、把滚动容器中所有img的src属性替换为image-lazy-IonicIonic中的路由跳转方1、通过代码的方式进行controller里面注入$state服在页面中给单击按钮增加单击在事件方法里面调用$state.go(“路由名称2、通过href属性进行注意：写我们跳转的锚记，url地址进行跳3、通过ui-sref属性进行跳Ionic中的参数传1、先修改路由，在路由中加上2、将参数进行传（1）ui-sref：（1）ui-sref：ui-（2）<a<ahref="#/goodsList/34">跳转到商品详细页面（3）代码跳3、controller里面注入$stateParams服务，是一个参数45、其他：用LoaclStorage传递参数Angular中的service(父级概念包含Service,factory,Provider三个子级概念，都是返回service（父级概念对三种概念定义模块的使用场Factory:返回一个对象，对象中是方法的集Service:在一个模块中返回多个服务，适合用service创建模Provider：是service的底层实现，angular本身的东西，提供的$http服务使1、在Factory中注入$http服2、请求3、$http服务可以进行链式写法的原 4、$http服务的跨域请求promise/A+规Promise/A+规范简Promise/A+规范表现1、可以通过链式编程的方式对异步操作进行同步处2、上一个操作的输出值是下一个操作的输入$q服$q服务的使用$q服务使用步骤1、首先注入$q服2、在Factory中使用如下3、在controller4、把异步变为同步的操作，上一个操作的输入时下一个操作的输Ion-refresher介Ion-refresher:必须在ion-content里面使用，而且必须紧挨着ion-。使用介1、添加ion-refersher，然后配置里面的属2、实现获取数据触发的3、在获取数据完毕后停止广ion-infinite-scroll介必须在ion-content里面使用，而且必须紧挨着ion-content。在部使用介添加ion-infinite-scroll，然后配置里面的属实现获取数据触发的在获取数据完毕后停止广$scope.$on('$ionicView.enter',function(e)如果在enter时间中执行刷新方法，会报错，数据还没有出来，可是页面已经渲染，加载的距离大于1%$scope.$on('$ionicView.enter',function(e)所以我们要放在beforeEnter事件中执$scope.$on('$ionicView.beforeEnter',function(e)<divng-hide="pms_isMoreItemsAvailable"style="text-align: 要添加没有数据的提示，在刷新和加载的方法里面要对返回来的result数据进行<divng-hide="pms_isMoreItemsAvailable"style="text-align: <ion-infinite-scrollng-if="pms_isMoreItemsAvailable"on-infinite="func_loadMoreGoodsList()"通过ng-if方法来控制加载的无限循<ion-infinite-scrollng-if="pms_isMoreItemsAvailable"on-infinite="func_loadMoreGoodsList()"遮罩template:在广播完毕之后执行取消遮简indexedDBHTML5-WebStorage的重要一环，是一种轻量级NOSQL数据库。相比websql()更加高效，包括索引、事务处理和健壮的查询功能。webSQL的比允许快速索引和搜索的对象，所以在HTML5web应用程序中可W3C主推的离线数据库类型，逐渐WebSQL类型数据库，更新效率工作在异步模式下执行每步操作。让你使用高效率的的JavaScript事件驱官 使用步1、ng-cordova的js文在项目 下面打开命令窗口，输 -2、index.html文件中引入ng-cordova.js文3、在app.js(项目中)引入依angular.module('myApp',4、在$ionicPlatform.ready事件中使用插件功5、相应功能的插在项目 下面打开命令窗cordovapluginadd白设页面代<a<a ephone" 设置白代码实方法方法二文章资 实现思app1、在项目的 下创建resources文件夹2、在文件夹中都放入icon.png（应用图标，最小192x192px，不角），splash.png（启动屏幕，最小2208x2208px，中间区域1200x1200px）(可以是png、psd、ai)3、在cmd中进入项目所在文件夹执ionicresources--ionicresources--4、项目中的config文件中是这<platform<iconsrc="resources\android\icon\drawable-ldpi-icon.png"<iconsr