Ionic APP-Web SPA开发进阶(二)Ionic进阶之路由去哪了
Ionic进阶之路由去哪了
项目需求
在查看药品时,从药品列表中可以通过点击药品列表获取某一药品详情。提交订单时,同样可以查看药品详情。两种情形下,从药品详情返回后,应分别返回至原来的页面。如下图所示。
现状是第一次添加的药品从提交订单路由至订单详情,但却不可以从药品详情返回至提交订单页面,而是返回到了药品列表中,但是在第二次点击后,却可以正确返回至订单提交页面。
通过阅读代码发现并没有手动添加返回路由的情况,返回的轨迹应该是Ionic内部实现的。但是两次返回的路由却不一致令人费解。反过来想想,最起码问题是有规律可循的。所以问题还是应该可以得到解决的。
尝试通过监听返回键的方式进行,在相应的条件语句中加入监听语句并进行判断。返回键退出的代码如下:
/*
* Android返回键退出
*/
$scope.listenbackbutton = function() {
document.addEventListener("plusready", onPlusReady, false);
function onPlusReady() {
plus.key.addEventListener("backbutton", function() {
if ($location.path() == '/tab/index') {
if (plus.os.name == "Android") {
$ionicLoading.show({
template: "再次点击返回键退出立马送药"
});
$timeout(function() {
$ionicLoading.hide();
plus.key.removeEventListener("backbutton", function() {
});
return;
}, 1000);
plus.key.addEventListener("backbutton", function() {
localStorage.addrTag = '';
localStorage.addrid = '';
plus.runtime.quit();
});
} else {
outSet("此平台不支持直接退出程序,请按Home键切换应用");
}
} else {
$ionicHistory.goBack();
}
});
}
}
$scope.listenbackbutton();
经过尝试,发现问题。onPlusReady() 方法无法调用。即不可以正常调用扩展API。
故放弃这条路。尝试通过其它方法进行解决(未完待续...)。
美文美图
Ionic APP-Web SPA开发进阶(二)Ionic进阶之路由去哪了的更多相关文章
- 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目
系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目 实战使 ...
- OSGI企业应用开发(十三)OSGI Web应用开发(二)
上篇文章介绍了OSGI Web应用的两种开发模式,并把Jetty应用服务器以Bundle的形式整合到Equinox容器中,已这种模式开发Web应用,所有的应用程序资源,例如Servlet.JSP.HT ...
- 初入码田--ASP.NET MVC4 Web应用开发之二 实现简单的增删改查
初入码田--ASP.NET MVC4 Web应用之创建一个空白的MVC应用程序 初入码田--ASP.NET MVC4 Web应用开发之一 实现简单的登录 2016-07-29 一.创建M002Adm ...
- 2. web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...
- web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践 经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无 从 ...
- Spring Boot 2.X 对 web 的开发支持(二)
Spring Boot 2.X 对 web 的支持开发 上章节的 Spring Boot 的入门案例,我们感受到 Spring Boot 简单的配置即可运行项目. 今天了解 Spring Boot 对 ...
- 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求
系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目 实战使 ...
- 实战使用Axure设计App,使用WebStorm开发(6) – 迈向后端
系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目 实战使 ...
- 实战使用Axure设计App,使用WebStorm开发(5) – 实现页面功能
系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目 实战使 ...
随机推荐
- 关于java的Synchronized,你可能需要知道这些(下)
上一篇文章介绍了synchronized的基本使用方法和实现,在实现部分说明了synchronized的底层实现依赖系统互斥锁mutex,但是这个一个重型锁,竞争导致线程阻塞挂起,后续拿到锁后再恢复线 ...
- 记录一些移动端H5,小程序视觉还原问题及方法
前端,特别是移动端如果对视觉还原要求比较高的时候.功能测试和性能测试完成之后.UI真的是一个像素一个像素的给你抠出来哪里还原不到位 之前项目要求还原度要达到98%以上.所以每到视觉还原的时候真的是挺痛 ...
- Node.js 教程
简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台. Node.js是一个事件驱动I/O服务端Ja ...
- 用豆瓣镜像解决pip安装慢的问题
pip3 install django==1.9 -i http://pypi.douban.com/simple/
- sublime snippet 示例
<snippet> <content><![CDATA[local ${1:M} = {} function ${1:M}.new(cls, self) self = s ...
- Vulkan API基本概念
设备初始化 Instance --> GPU --> Device Instance表示具体的Vulkan应用.在一个应用程序中可以创建多个实例,这些实例之间相互独立,互不干扰. 当调用A ...
- (译)快速指南:用UIViewPropertyAnimator做动画
翻译自:QUICK GUIDE: ANIMATIONS WITH UIVIEWPROPERTYANIMATOR 译者:Haley_Wong iOS 10 带来了一大票有意思的新特性,像 UIViewP ...
- Swift如何取得View所属的ViewController
从VC取得View很容易,但有些情况下我们需要从View反向获取VC. 不过在一些特殊的场合,Cocoa库帮我们想的很周到,比如在自定义View过渡动画的时候: func animateTransit ...
- java之异常处理
异常Exception我们分为 |--RuntimeException运行期异常,我们需要修正代码 |--非RuntimeException 编译期异常,必须处理的,否则程序编译不通过 异常有两种处理 ...
- css模块化及CSS Modules使用详解
什么是css模块化? 为了理解css模块化思想,我们首先了解下,什么是模块化,在百度百科上的解释是,在系统的结构中,模块是可组合.分解和更换的单元.模块化是一种处理复杂系统分解成为更好的可管理模块的方 ...