混合app开发基础1课件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-infinite-scroll介 使用介 简 和webSQL的比 ng- 官 使用步 白设 页面代 设置白.............................................................................代码实 文章资 双击退出应 实现思 app图 项目优 第6章插件扩 第1章概课程目标说用前端技术+混合开发框架的东西，开发出来一个app项目效果演Ionic开发简配置环操作（第2章开发环境配java环AndroidADT需1、在上搜索“javajdk”并安2、配置到全局变量JAVA_HOME C++环Node需1、注意要从新安装一下vs2016，把c++环境勾选上AndroidADT环打包android应用的时候需1、安装ADT并添加到环境变量 /2、点击installer_r24.3.4-windows进行安装，其他文件只需要解压缩后，放置结构如下图即可。Android项目结构3、配置到全局变量 Node环一些插件环境需1、在搜“node”，安装即可，默认已经配置到环境变量中Git环ng-cordova插件需要，源代码管理1、在搜“git”，安装即可环境安装遇到的问2、配置到全局变 安装时常见问1、在运行ionicbuildandroid的时候报错[Error:ANDROID_HOMEisnotsetand“android”commandnotinyourPATH.这个时候要这样设置： path中写：%ANDROID_HOME%\tools;%ANDROID_HOME%\tform-tools2、这个是问题是在环境变量配置的PATH中要添加3、一直遇到这个问题，找不到build-解决办第3章快速开安装项目依打开命令窗口,在搜索中输入输入npminstallgcordova快速创建项先找到一个放项目的位 中按住shift键右击,在当前文件夹打开命令窗 myApp(默认是tab样式项目结构说先找到项目的 中按住shift键右击,在当前文件夹打开命令窗 第4章项目结构搭为什么要从新整理结抽取步控制项目启动的js控制路由跳转的js控制全局变量的js控制兼容性的js功能模块划Controller：业务逻Factory:数据请求，和服务器进行操作Html页面：功能界Route:路由js，控制我们的页面跳外面四个js实现步1、创建四个控制全局功能的js文2、把每个js文件变成模config:configglobal:constantroute:config3、把js文件在html中引4、在app.js文件中注入我们其他三个模块的东西（加入功能功能模块js的整理步1、创建四个文Controller文件：控制业务逻辑的Route文件：功能模块路由Service文件：数据请求的Html页面2、把每个js文件变成模块Controller:controller3、把js文件在html中引4、在模块js文件中注入需要的服务和模扩/2014/12/ionic-javascript-api-/2014/12/ionic-javascript-api-view-第5章功能实路由的实1、在index页面中加入<ion-vav-view></ion-vav-2、配置路由模块的内容（设置路由名称，url地址，模板页面3、在index.html页面把路由js引进来，在app.js中注入路由模块的功4、把页面的功能包裹在ion-view或者是ion-tab引导页的实官网 Swier3插件结构创建引导页步1、创建四个功能模块文2、编写模块功3、在index.html页面中引入三个文件(controller,route,service)swiper步1、在任意一个位置打开开命令窗口，输入npminstallbower–g2、在项目根打开命令窗口，输入bowerinstallswiper–save3、在index.html页面引入swiper.min.css，swiper.min.js4、去官网把案例代码到项目中使首页的实京东项目布局改2、对ion-tabs进行了改造3、对tab路由进行了改4、对项目进行删减，把没用的东西都给删除Ion-view的生命延迟加载的实 angular中实现延迟加载 me- /package/angular-ionic-image-lazy-load（专门的Ionic延迟加载插件/paveisistemas/ionic-image-lazy-Ionic中的页面跳转和参数传Ionic中的路由跳转方1、通过代码的方式进行跳controller里面注入$state服在页面中给单击按钮增加单2、通过href属性进行跳转写我们跳转的锚记，url地址进行跳3、通过ui-sref属性进行跳转Ionic中的参数1、先修改路由，在路由中加上参2、将参数进行传（1）ui-sref：（1）ui-sref：ui-（2）<ahref="#/goodsList/34"><ahref="#/goodsList/34">跳转到商品详细页面（3）代码跳3、在controller里面注入$stateParams服务，是一个参数对4、其他：用LoaclStorage传递参数数据请$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、在controller中使4、把异步变为同步的操作，上一个操作的输入时下一个操作的输下拉刷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',$scope.$on('$ionicView.beforeEnter',function(e)没有数据提示问<divng-hide="pms_isMoreItemsAvailable"style="text-align:<span>我去 家也没有余粮啊要添加没有数据的提示，在刷新和加载的方法里面要对返回来的result数据进行非空判断，然<divng-hide="pms_isMoreItemsAvailable"style="text-align:<span>我去 家也没有余粮啊循环加载的问<ion-infinite-scrollng-if="pms_isMoreItemsAvailable"on-infinite="func_loadMoreGoodsList()"</ion-infinite-通过ng-if方法来控制加载的无限循环默认<ion-infinite-scrollng-if="pms_isMoreItemsAvailable"on-infinite="func_loadMoreGoodsList()"</ion-infinite-遮罩 te:在广播完毕之后执行取消遮罩简indexedDB是HTML5-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、在$ionictform.ready中使用插件功5、相应功能的插在项目 下面打开命令窗cordovapluginadd白设页面<a<a ephone" 设置白代码实方法方法二文章资 双击退出应实现思 app图1、在项目的 下创建resources文件夹2、在文件夹中都放入icon.png（应用图标，最小192x192px，不带角），ssh.png（启动屏幕，最小2208x2208px，中间区域1200x1200px）(可以是png、psd、ai)3、在cmd中进入项目所在文件夹执行 - -- 4、项目中的config文件中是这<tform src="resources\android\icon\drawable-ldpi-icon.png" src="resources\android\icon\drawable-mdpi-icon.png" src="resources\android\icon\drawable-hdpi-icon.png" icon.png"density="xhdp