[Ionic2] Device Interaction in an Ionic App with Cordova Plugins
2016-10-28 22:44
417 查看
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.
To solve that problem, we need to install a plugin:
To check whether the plugin was successfully installed, you can do:
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:
Now upload the application to ionic view:
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.
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.
相关文章推荐
- 在Ionic 2中使用TypeScript使用第三方cordova插件(Using a third-party cordova plugin in Ionic 2 with TypeScript)
- Please sign in with an app-specific password
- Initalizing 'AppDelegate * __strong' with an expression of incompatible type ''id<UIApplicatioinDele
- Creating an Audio Calling App with Ionic and PhoneRTC
- ApplicationLoader登录失败. Please sign in with an app-specific password.
- iOS- Please sign in with an app-specific password. You can create one at applied.apple.com.
- 警告:Initalizing 'AppDelegate * __strong' with an expression of incompatible type ''id<UIApplication..
- Xcode添加账号提示Please sign in with an app-specific password. You can create one at appleid.
- App doesn't auto-start an app when booting the device in Android
- An App ID with Identifier 'XXX.XXX.XXX’ is not available. Please enter a different string
- Creating a Web Control with an Expandable Property in the Designer by Using C#.
- “:Choose a destination with a supported architecture in order to run on this device.”
- Implement a TextView with an animation in its left side
- How to Make an iOS VoIP App With Pjsip: Part 5
- I;P : Debug the app with Google Play Service SDK in Eclipse
- 使用cordova+Ionic+AngularJs进行Hybird App开发的环境搭建手册
- ionic创建项目报错:Couldn't find ionic.config.json file. Are you in an Ionic project?
- iOS开发——An App ID with identifier "*****" is not avaliable
- Debug COM dll with .Net app in VS.Net
- iOS 真机测试错误解决"An App ID with Identifier ...is not available"