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的更多相关文章

  1. 方法:怎么用ionic命令行调试你的ionic app

    官网上有很详细的解说  http://blog.ionic.io/live-reload-all-things-ionic-cli/ 下面说说我自己的调试过程(android版): 首先用命令行进入你 ...

  2. hybird app(混合式app开发)cordova ionic 创建相应平台的app

    hybird app(混合式app开发) 之ionic 框架平台 guide cordova 创建相应平台的app 1. npm install -g cordova //全局安装cordova-cl ...

  3. ionic app打包和签名

    ionic app打包和签名 1.首先在项目根目录执行  ionic platform add android  生成Android平台. 2.配置应用签名:在根目录下执行以下命令 keytool - ...

  4. Ionic App之国际化(3) json数组的处理

    接上一篇Ionic App之国际化(2) json数组的处理 之后,如何处理json数据长度的问题,目前的一个折中方法是翻译长度字段. 多语言文件内容: "MyLa": { &qu ...

  5. Ionic App之国际化(2) json数组的处理

    在Ionic App值国际化(1)中我们实现了对单个参数的多语言处理,下面开始如何进行数组的处理. 1.在我们的多语言文件中设置要访问的json数组,en.json和zh.json,此处就以en.js ...

  6. Ionic app 上传图片之webApi接口

    App上传图片对应的webApi服务端是怎么处理的呢? using System; using System.Collections.Generic; using System.Diagnostics ...

  7. Ionic app升级插件开发

    终于走到了写插件的这个地方了,插件的过程: 1.安装plugman插件,管理我们的程序 npm install -g plugman 2.创建插件项目appUpgrade,cd 到你的目标目录下,执行 ...

  8. 【ionic App问题总结系列】ionic 如何更新app版本

    ionic 如何进行自动更新 ionic App更新有两种方式:第一种是普通的从远程下载apk,安装并覆盖旧版本.另外一种就是采用替换www文件夹的内容,实现应用内更新,而无需下载安装apk. 这篇文 ...

  9. ionic app 监听网络功能

    安装cordova插件: cordova plugin add cordova-plugin-network-information 在app.js 的run()里面的function()注入$cor ...

随机推荐

  1. HDU 4107 Gangster

    Gangster Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on HDU. Original ID: 4 ...

  2. 关于multiprocessing,我也来聊几句

    起因:近期须要从hbase中向 ES中导一批数据.使用multiprocessing 启动多个程序同一时候向ES导数据.能够大大提高效率.由于导数的任务是能够依照时间切割的. 一段简单的代码例如以下: ...

  3. web前端响应式布局,自适应全部分辨率

    写phpd的我. 近期公司要弄个app关键是没有web开发,而我有比較闲,那就扛枪上阵吧. 响应式布局,web端的?php我一直都是用tp框架,对于web首先想到的是bootstrap框架.仅仅是简单 ...

  4. POJ 1426 Find The Multiple (DFS / BFS)

    题目链接:id=1426">Find The Multiple 解析:直接从前往后搜.设当前数为k用long long保存,则下一个数不是k*10就是k*10+1 AC代码: /* D ...

  5. js--07 编解码,eval

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  6. Zabbix 监控搭建

    Zabbix官网地址:https://www.zabbix.com/download 1.服务端 1.操作前安装好Mysql数据库 配置yum源,安装部署Zabbix rpm -i http://re ...

  7. Android 开发之锁屏弹窗

    尝试利用 WindowManager 添加浮窗的方式实现 想在锁屏上面实现弹窗,第一个想法就是利用 WindowManager 设置 Window 的 Flag,通过设置 Flag 的显示优先级来让窗 ...

  8. solr/lucence和关系数据库的混合使用

    我们知道solr提供了一个DIHandler,提供将关系数据库中的数据导成索引,然后使用solr查询. 对于一个大表中关联数个小表的查询,这非常耗费时间. 我的思路是: 1. 将一个大表做成索引,使用 ...

  9. ospp.vbs是什么文件?激活过程cscript ospp.vbs命令详解

    ospp.vbs是什么文件?激活过程cscript ospp.vbs命令详解 在Office 2013激活过程中我们经常会用到cscript ospp.vbs这个命令.那么,很有必要来了解一下,osp ...

  10. [python]两种编程思维--面向过程和面向对象

    例如:eg:炒一份西红柿鸡蛋 一.面向过程 面向过程的编程思维,如下 二.面向对象 制作一台炒菜机器人,然后告诉机器人做一道西红柿炒鸡蛋.在这里,我们直接面对的是机器人,而非炒菜的过程,所以这里机器人 ...