[Ionic2] Device Interaction in an Ionic App with Cordova Plugins
In this lesson, we are going to learn how to interact with native components through Cordova plugins. We will walk through how to add a Cordova plugin to our application and use it to interact with our native device. In this case, we are going to install a plugin that will allow us to open URLs in a mobile browser from within our Ionic app.
When you use a link to open a webpage in mobile ionic app, you will find there is no way back to the app.
<a href="https://google.fi">Go Google, you cannot come back this app any more</a>
To solve that problem, we need to install a plugin:
npm i --save-dev cordova-plugin-inappbrowser
To check whether the plugin was successfully installed, you can do:
ionic plugin
it will list all the plugins you have installed fot the application.
Now, let's try to open the link in browser instead of from app:
<a href="https://google.fi">Go Google, you cannot come back this app any more</a>
<button ion-button color="secondary" (click)="openInAppBrowser()">Open in browser</button>
openInAppBrowser(){
const url = "https://www.google.fi";
window.open(url, '_system');
}
Now upload the application to ionic view:
ionic upload
From the mobile phone, sync to latest version.
And we can confrim that, when we click the button, this time, mobile will open the browser to display the page.
[Ionic2] Device Interaction in an Ionic App with Cordova Plugins的更多相关文章
- 方法:怎么用ionic命令行调试你的ionic app
官网上有很详细的解说 http://blog.ionic.io/live-reload-all-things-ionic-cli/ 下面说说我自己的调试过程(android版): 首先用命令行进入你 ...
- hybird app(混合式app开发)cordova ionic 创建相应平台的app
hybird app(混合式app开发) 之ionic 框架平台 guide cordova 创建相应平台的app 1. npm install -g cordova //全局安装cordova-cl ...
- ionic app打包和签名
ionic app打包和签名 1.首先在项目根目录执行 ionic platform add android 生成Android平台. 2.配置应用签名:在根目录下执行以下命令 keytool - ...
- Ionic App之国际化(3) json数组的处理
接上一篇Ionic App之国际化(2) json数组的处理 之后,如何处理json数据长度的问题,目前的一个折中方法是翻译长度字段. 多语言文件内容: "MyLa": { &qu ...
- Ionic App之国际化(2) json数组的处理
在Ionic App值国际化(1)中我们实现了对单个参数的多语言处理,下面开始如何进行数组的处理. 1.在我们的多语言文件中设置要访问的json数组,en.json和zh.json,此处就以en.js ...
- Ionic app 上传图片之webApi接口
App上传图片对应的webApi服务端是怎么处理的呢? using System; using System.Collections.Generic; using System.Diagnostics ...
- Ionic app升级插件开发
终于走到了写插件的这个地方了,插件的过程: 1.安装plugman插件,管理我们的程序 npm install -g plugman 2.创建插件项目appUpgrade,cd 到你的目标目录下,执行 ...
- 【ionic App问题总结系列】ionic 如何更新app版本
ionic 如何进行自动更新 ionic App更新有两种方式:第一种是普通的从远程下载apk,安装并覆盖旧版本.另外一种就是采用替换www文件夹的内容,实现应用内更新,而无需下载安装apk. 这篇文 ...
- ionic app 监听网络功能
安装cordova插件: cordova plugin add cordova-plugin-network-information 在app.js 的run()里面的function()注入$cor ...
随机推荐
- yum---rpm软件包管理器
yum命令是在Fedora和RedHat以及SUSE中基于rpm的软件包管理器,它可以使系统管理人员交互和自动化地更细与管理RPM软件包,能够从指定的服务器自动下载RPM包并且安装,可以自动处理依赖性 ...
- 【Hello 2018 D】Too Easy Problems
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 可以考虑把所有的题目按照ai排序. 然后顺序考虑最后做出来的题目个数和第i道题目的ai一样. 则1..i-1这些题目就没有用了. 值 ...
- Android5.0L退出APP横竖屏切换导致的触摸屏输入(Touch Event)无效(冻屏)问题分析(Key Event仍然有效)
.Nexus4和Nexus5在相同的简单測试下没有重现此问题,因没有源代码所以无法Debug和打印log.兴许会尝试获取nexus的源代码以了解它的改动方案. 二.解决方案 通过初步分析.深入分析.对 ...
- 将bat批处理命令文件固定到任务栏
将bat批处理命令文件固定到任务栏第一种方法:使用链接工具http://www.xstui.com/read/3451.在任务栏点击右键,移动到工具栏,勾选链接工具2.你会在通知栏左侧看到链接字样,将 ...
- js09--函数 call apply
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- Java学习笔记三
1.面向过程思想,强调的是过程(即动作,函数):面向对象思想,强调的是对象. 2.类与对象关系:类是对事物的描述(属性和行为-方法),对象是类的实例.对象通过new生成.属性也称成员变量;方法也称成员 ...
- Spring学习总结(9)——Spring AOP总结
spring IOC和AOP是Spring框架的两大核心基石,本文将对Spring AOP做一个系统的总结. 什么是AOP AOP(Aspect-Oriented Programming,面向切面编程 ...
- eclipse git冲突解决
1.工程->Team->同步: 2.从远程pull至本地,就会出现如下内容: 3.使用Merge Tool,执行第二项 4.再手动修改 4.修改后的文件需要添加到Git index中去: ...
- js遍历对象的属性和方法
js遍历对象的属性和方法 一.总结 二.实例 练习1:具有默认值的构造函数 实例描述: 有时候在创建对象时候,我们希望某些属性具有默认值 案例思路: 在构造函数中判断参数值是否为undefined,如 ...
- JS实现拖拽小案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...