课件ionic项目实战课程笔记

1、目录第 1 章 概述11.1课程目标说明11.2项目效果演示11.3ic 开发简介2第 2 章开发环境配置22.1java 环境22.2C+环境22.3Android ADT 环境32.4Node 环境42.5Git 环境52.6安装时常见问题5第 3 章快速开始63.1安装项目依赖63.2快速创建项目73.3项目结构说明83.4打包 app8第 4 章项目结构搭建94.1为什么要从新整理结构？94.2抽取步骤94.3外面四个 js 实现步骤94.4功能模块 js 的整理步骤104.5扩展. 11第 5 章 功能实现115.1路由的实现115.2引导页的实现115.2.1Swiper3115.

2、2.2创建引导页步骤125.2.3使用 swiper 步骤125.3首页的实现135.3.1京东项目布局改造135.3.2-view 的生命周期135.4延迟加载的实现135.5ic 中的页面跳转和参数传递145.5.1ic 中的路由跳转方式145.5.2ic 中的参数传递145.6数据请求155.6.1$http 服务使用155.6.2promise/A+规范175.6.3$q 服务185.6.4-refresher 介绍205.6.5使用介绍205.7上拉加载. 205.7.1-infinite-scroll 介绍205.7.2使用介绍205.8IndexDb215.8.1简介215.8.

3、2和 webSQL 的比较215.9ng-cordova215.9.1官网215.9.2使用步骤215.10白设置225.10.1页面代码225.10.2. 23设置白5.10.3代码实现235.10.4文章资料245.11双击退出应用245.11.1 实现思路245.12app 图标245.13项目优化26第 6 章 插件扩展26第1章概述1.1课程目标说明用前端技术+混合开发框架的东西，开发出来一个app。1.2项目效果演示1.3ic 开发简介配置环境搭建骨架（路由和 MVC）写页面（乱炖）操作（）第2章开发环境配置2.1 java 环境Android ADT 需要1、在上搜索“java

4、jdk”并安装2、配置到全局变量 JAVA_HOME 中http:/article/f96699bb8b38e0894e3c1bef.html2.2C+环境Node 需要1、注意要从新安装一下 vs2016，把 c+环境勾选上。2.3Android ADT 环境打包 android 应用的时候需要1、安装 ADT 并添加到环境变量 ANDROID_HOME中，请参考 2.6中的第一个问题进行配置/2、点击 installer_r24.3.4-windows 进行安装，其他文件只需要解压缩后，放置结构如下图即可。Android 项目结构3、配置到全局变量 ANDROID_HOME中http:/a

5、rticle/22a299b51c59d69e19376af8.html2.4Node 环境一些插件环境需要1、在搜“node”，安装即可，默认已经配置到环境变量中。2.5Git 环境ng-cordova 插件需要，源代码管理1、在搜“git”，安装即可环境安装遇到2、配置到全局变量http:/article/9f7e7ec0b17cac6f2815548d.html2.6安装时常见问题1、在运行ic build android 的时候报错Error:ANDROID_HOME is not setand “android”d not in your PATH. 这个时候要这样设置：ANDROI

6、D_HOME：C:environmentadt-bundle-windows-x86-20130917sdkpath 中写：%ANDROID_HOME%tools;%ANDROID_HOME%platform-tools2、这个是问题是在环境变量配置的 PATH 中要添加上C:WindowsSystem323、一直遇到这个问题，找不到 build-tools解决办法4、cordova 时当命令窗口出现以下错误时，排除非网络问题（一下别的包仍不成功），有可能是你设置了；解决方法：查看.npmrc 文件里是否设置了，如果设置了把其删除即可，这个文件的位置我当时是按老师建议放在了 C 盘用户用户名文

7、件夹下。文件内容删除后剩下这些便可以了，然后再去命令窗口输入：npm install -g cordova5、这个问题是把 c 盘/用户/用户名下的/.gradle 文件夹删掉，然后运行ic buildandroid第3章快速开始3.1 安装项目依赖打开命令窗口,在搜索中输入 cmd输入 npm install -g cordovaic3.2 快速创建项目先找到一个放项目的位置在目录中按住 shift 键右击,在当前文件夹打开命令窗口icstartmyApp(默认是 tab 样式)3.3 项目结构说明3.4 打包 app先找到项目的根目录在目录中按住 shift 键右击,在当前文件夹打开命令窗

8、口icplatformaddandroidicbuildandroid第4章项目结构搭建4.1为什么要从新整理结构？方便运维，结构清晰，方便查找方便的团队开发4.2抽取步骤控制项目启动的 app.js控制路由跳转的 route.js控制全局变量的 global.js控制不同兼容性的 config.js功能模块划分Controller：业务逻辑Factory:数据请求，和服务器进行操作。Html 页面：功能界面Route:子功能路由 js，控制的页面跳转。4.3外面四个 js 实现步骤1、创建四个控制全局功能的 js 文件2、把每个 js 文件变成模块app：runconfig: configg

9、lobal: constantroute: config3、把 js 文件在 html 中引入4、在 app.js 文件中注入其他三个模块的东西（加入功能）4.3.1route.js1、通过 angular.module.config 方法定义路由2、引入$seProvider（）, $urlRoutrovider3、就是根据浏览器 url 地址后面#部分后面你的变化匹配不同的路由，匹配到合适的路由之后，就会把 templateUrl 中写得页面模板渲染到页面中的,如果页面中有很多的组件，他就会根据组件中的name 属性的值进行选择渲染。Controller 属性中的控制器会被自动渲染到模板页

10、面中，变为 ng-controller=”控制器名称”。4.3.2Global.Js1、通过 angular.module.constant 定义成模块，不经常改变的东西放在这里面。2、如果要使用，在其他模块中注入服务就可以了，比如 GlobalVariable，在其他模块中就可以把里面的属性都点出来。4.3.3Config.js1、通过 angular.module.config 定义成模块2、注入$icConfigProvider 服务4.4功能模块 js 的整理步骤1、创建四个文件Controller 文件：控制业务逻辑的Route 文件：功能模块路由Service 文件：数据请求的Ht

11、ml 页面2、把每个 js 文件变成模块Controller: angular.module.controllerroute: angular.moduleconfigservice: angular.modulefactoryroute: angular.moduleconfig3、把 js 文件在 html 中引入4、在模块 js 文件中注入需要的服务和模块4.5扩展/2014/12/ic-javascript-api-icconfigprovider/2014/12/ic-javascript-api-view-%E8%A7%86%E5%9B%BE%E7%9A%84%E7%94%9F%E

12、5%91%BD%E5%91%A8%E6%9C%9F%E5%8F%8A%E4%BA%8B%E4%BB%B6%E9%9B%86%E5%90%88/第5章功能实现5.1 路由功能5.1.1Ui-router 的介绍地址：/angular-ui/ui-routerui-router 他算是 angular 中进行路由跳转的一个第插件，本质是对ng-route 进行了一些封装。1、通过 npm install angular-ui-router2、在 index.html 启动页面中引入 js 文件，引入顺序要注意，因为需要angular 中的 ng-route 的东西，所以要在引入 angular.j

13、s 文件之后引入。3、需要引入 ui-router 模块4、在 html 中的某个加上 ui-view，作用就是在页面中挖了一个坑，之后的模板页面就往这里面填。5、在 js 文件中编写的路由。6、根据浏览器地址栏的变化，匹配不同的路由，然后进行模板页面的渲染和控制器的加载。5.1.2抽象路由的实现为了实现在一个页面中可以出现多个坑（模板页面替换位置），才实现了抽象路由的概念：1、抽象路由是不会被单独匹配渲染的，只有配合子路由的实现才能渲染虚拟路由中的模板2、子路由中的路由名称中的点是有实际意义的，是为了配合虚拟路由，实现父子路由的层级关系。5.1.3ic 中路由实现1、在 index 页面中加

14、入，在ic 中ui-router 的 ui-view 已经被组件封装了，所以不会出现在页面中。2、要写路由模块的配置信息，通过 angular.module.config 配置路由信息（设置路由名称，url 地址，模板页面，controller）3、在 index.html 页面把路由 js 引进来，在 app.js 中注入路由模块的功能4、把页面的功能在-view 或者是-tab中5、根据浏览器中 url 地址的变化，匹配不同的路由6、渲染的模板页面到相应的组件中5.2 引导页的实现5.2.1 创建引导页步骤1、创建四个功能模块文件2、编写模块功能，（这里从之前的代码html 页面和 css

15、 样式）3、在 index.html 页面中引入三个文件(controller,route,service)4、将功能路由在总路由中注入5.2.2 Swiper3 简介官网： 插件结构：5.2.3 使用 swiper 步骤1、在任意一个位置打开开命令窗口，输入 npminstallbowerg2、在项目根目录打开命令窗口，输入 bowerinstallswipersave3、在 index.html 页面引入 swiper.min.css，swiper.min.js4、把页面中的 html 代码加上对应的 class 样式5、在 controller 中初始化 swiper 插件，并设置相应的

16、属性5.3 首页的实现5.3.1 京东项目布局改造1、创建四个首页面功能文件,修改里面的内容2、在 index 页面引入四个文件3、在总路由中注入子功能路由，controller,service 也都要在子功能路由中注入5.1.4Tab 模板改造1、对-tabs 里面变为四个-tab 组件2、对四个-tab 组件的名称，图标，跳转地址进行了修改，-nav-view组件的 name 属性改掉3、把 tabs 的抽象路由给抽取了出来，变为一个功能模块4、在 index 页面中引入 tabs 的相关文件5、在总路由中注入 tabs.route 模块5.1.5动态生成 swiper1、在 contro

17、ller 中模拟请求数据，把请求回来的数据放到$scope 上2、在 html 页面中通过 ng-repeat 指令循环生成 slider 滑动页3、初始化 swiper 对象，注意最好把4、要注意初始化 swiper 的时间，最好放在$icView.afterEnter中置为 true.observeParents，observer 这两个属性设5.2-view 的生命周期5.3ic 中缓存的四种方法 HYPERLINK http:/i/ http:/i/docs/airective/NavView/5.4 延迟加载的实现/cloudgamer/archive/2010/03/03/Imag

18、esLazyLoad.htmljquery.lazyload不能在ic 中使用/yzg1/p/5051554.htmlangular 中实现延迟加载http:/q/1010000002730440?_ea=192608me-lazyimg/Treri/me-lazyimg/blob/master/me-lazyimg.jsangular-imglazyloadhtt/package/angular-imglazyloadic-image-lazy-load（专门的ic延迟加载插件）/paveisistemaic-image-lazy-load5.4.1延迟加载插件使用步骤1、用 bower 进

19、行2、在 index 页面中引入-image-lazy-load.js 文件3、在 app.js 中注入icLazyLoad 服务4、在-content 组件上加上 lazy-scroll 指令，注意 lazy-scroll 指令只能作用于i-content 组件上。5、把滚动容器中所有 img的 src 属性替换为 image-lazy-src5.5ic 中的页面跳转和参数传递5.5.1ic 中的路由跳转方式1、通过代码的方式进行跳转（1） 在 controller 里面注入$se 服务（2）在页面中给单击按钮增加单击事件（3）在事件方法里面调用$se.go(“路由名称”)2、通过 href

20、 属性进行跳转注意：写跳转的锚记，url 地址进行跳转3、通过 ui-sref 属性进行跳转5.5.2ic 中的参数传递1、先修改路由，在路由中加上参数2、将参数进行传递（1）ui-sref：ui-sref=goodsList(typeNumber:1)”（2）跳转到商品详细页面（3）代码跳转3、 在 controller 里面注入$seParams 服务，是一个参数对象4、$se.go(goodsList,typeNumber:666);5、其他：用 LoaclStorage 传递参数。5.6 数据请求5.6.1 Angular 中的 service(父级概念)包含 Service,fact

21、ory,Provider 三个子级概念，都是返回 service（父级概念）对象三种概念定义模块的使用场景Factory:返回一个对象，对象中是方法的集合Service:在一个模块中返回多个服务，适合用 service 创建模块Provider：是 service 的底层实现，angular 本身的东西，提供的服务5.6.2 $http 服务使用$http 使用简介h/kf/201506/405137.html1、在 Factory 中注入$http 服务2、请求使用3、$http 服务的跨域请求5.6.3 Promise/A+规范规范出现的原因1、不知道异步请求什么时候返回数据，所以就需要些

22、回调函数。但是在某些情况下需要知道数据是在什么时候返回的，然后进行一些处理。2、当在异步回调里面处理的操作还是异步操作的时候，这样就形成了异步回调的嵌套3、正是为了杜绝以上两种情况的出现，社区出现了 Promise/a+规范规范的内容是什么1、不管进行什么操作都返回一个 promise 对象，这个对象里面会有一些属性和方法（这个效果类似于 jquery 中的链式编程，返回自己本身）2、这个 promise 有三种状态Unfulfilled（未完成，初始状态）Fulfilled（已完成）Failed（失败、）3、这个 promise 对象的使用时通过 then 方法进行的调用Promise 的实

23、现因为他只是一个规范，所以在不同的框架或者下有不同的实现Angular：$q 服务Node：q 模块，co，thenEs6:Promise,yieldEs7：asyncawait怎么对 promise 对象的状态进行改变那？1、通过$q 服务的 deffer 方法定义出来一个延迟对象。2、这个延迟对象都有三个方法（1） resolved 方法：当数据请求成功的时候调用，参数是成功返回的数据对象，把 promise 对象 Unfulfilled 状态改为 fulfilled 状态。（2） rejected 方法：当数据请求失败的时候调用，参数是失败的原因，把 promise 对象 Unfulfi

24、lled 状态改为 failed 状态。（3） 怎么知道在 promise 中调用哪个回调函数那，就是通过 promise 对象的状态进行判断的。Promise/A+规范简介Promise/A+规范表现形式：1、可以通过链式编程的方式对异步操作进行同步处理2、上一个操作的输出值是下一个操作的输入值$http 配合$q 的使用在 controller 中使用5.6.4 $q 服务$q 服务的使用：$q 服务使用步骤：1、首先要子啊 factoruy 中注入$q 服务2、在 Factory 中使用如下图3、在 controller 中使用4、把异步变为同步的操作，上一个操作的输入时下一个操作的输入

25、5.7 下拉刷新5.7.1-refresher 介绍-refresher:必须在-content里面使用，而且必须紧挨着-content。5.7.2 使用介绍1、添加-refersher，然后配置里面的属性2、实现获取数据触发的方法3、在获取数据完毕后停止广播5.8 上拉加载5.8.1-infinite-scroll 介绍必须在-content里面使用，而且必须紧挨着-content。在底部5.8.2 使用介绍1.添加-infinite-scroll，然后配置里面的属性2.实现获取数据触发的方法3.在获取数据完毕后停止广播5.8.3 生命周期？如果在 enter 时间中执行刷新方报错，数据还没

26、有出来，页面已经渲染，加载的距离大于 1%所以会一直执行所以要放在 beforeEnter 事件中执行$scope.$on($icView.beforeEnter, funct(e) $scope.func_refreshGoodsList(););$scope.$on($icView.enter, funct(e) $scope.func_refreshGoodsList(););5.8.4 没有数据提示问题？要添加没有数据的提示，在刷新和加载的方法里面要对返回来的 result 数据进行非空判断，然后修改 pms_isMoreItemsAvailable 的值5.8.5 循环加载？通过 n

27、g-if 方法来控制加载的无限循环默认 pms_isMoreItemsAvailable=true5.8.6 遮罩层$icLoading.show(在广播完毕之后执行取消遮罩层setTimeout(funct() $icLoading.hide();,1000)template: 正在载入数据，请稍后.);我去，家也没有余粮啊！5.9 IndexDb5.9.1 简介indexedDB 是 HTML5-WebStorage 的重要一环，是一种轻量级 NOSQL 数据库。相比 web sql()更加高效，包括索引、事务处理和健壮的查询功能。5.9.2 和 webSQL 的比较允许快速索引和搜索的对象，所以在 HTML5 的 web 应用程序中， 你可以有效管理你的数据和高效率的读/写操作。W3C 主推的离线数据库类型，逐渐替代 Web SQL 类型数据库，更新效率高并不断完善。工作在异步模式下执行每步操作。让你使用高效率的的 JavaScript 事件驱动模块5.10 ng-cordova5.10.1官网ht/docs/5.10.2使用步骤1、ng-cordova 的 js 文件在项目根目录下面打开命令窗口，输入bower