#Cordova篇#--使用cordova-plugin-inappbrowser插件打包WebAPP

user

雨橙

中国.四川.成都

世界之上、唯有远见、惟爱不变。

IDE工具: Visual Studio 2017
 
一、Inappbrowser功能
Inappbrowser可以使用新的窗口实例打开连接,提供了地址栏的显示隐藏,一些窗口操作。
不能设置地址栏内容、按钮、样式等，如果想更好的操作需要使用cordova-plugin-themeablebrowser插件
官网API：http://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/
 
命令：
cordova plugin add cordova-plugin-inappbrowser
 
 
二：添加Cordova项目
首先添加一个Cordova项目：如下图
 
然后打开config.xml,在插件配置中添加“InAppBrowser”
如下图：


 
三：添加cordova-plugin-inappbrowser跳转代码
index.js代码如下：
(function () {
    "use strict";

    document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );

    function onDeviceReady() {
        window.open = cordova.InAppBrowser.open('http://4g.029xianerke.com/sphz/', '_self', 'location=no');
    };

    function onPause() {
    };

    function onResume() {
    };
} )();
 
 
这里使用Cordova inappbrowser插件封装的webview来实现一个第三方网站的嵌入跳转。
window.open = cordova.InAppBrowser.open('http://4g.029xianerke.com/sphz/', '_self', 'location=no');
 
四： 打包真机运行Android APP
配置App通用信息,然后选择设备。如下图：





 
效果如下：







 
posted at