cordova-plugin-ths-webviewpage
v1.3.0
Published
webview 页面
Downloads
91
Maintainers
Readme
cordova-plugin-ths-webviewpage
自定义webView,运行在独立进程中。
依赖aar包源码地址:http://x.x.x.x:xxxx/svn/Products/环保移动平台/工程/代码/移动门户/ThsWebView
支持平台
Android
安装插件
# 通过npm 安装插件
cordova plugin add cordova-plugin-ths-webviewpage
# 通过github安装
cordova plugin add https://github.com/THS-FE/cordova-plugin-ths-webviewpage
# 通过本地文件路径安装
cordova plugin add 文件路径
说明: ionic 项目命令前加上ionic,即ionic cordova plugin xxxxx
使用方法
启动网页页面(startWebViewPage 方法已废弃,新项目请使用showWebViewPage 方法)
cordova.plugin.thswebviewpage.startWebViewPage(url,title,(success) => {
console.log(success);
}, (error) => {
console.log(error);
});
启动网页页面(新增isLandscapeScreen 参数,控制是否横屏,默认false,如果打开网页需要强制横屏传递true)
cordova.plugin.thswebviewpage.showWebViewPage(url,title,isLandscapeScreen,(success) => {
console.log(success);
}, (error) => {
console.log(error);
});
启动网页页面(新增关闭页面时弹窗参数设置,closePageAlertTitle 关闭弹窗标题,closePageAlertMsg 关闭弹窗内容,isShowPageAlert 是否显示关闭弹窗,默认false)
cordova.plugin.thswebviewpage.showWebViewPageV2(url, title, isLandscapeScreen,closePageAlertTitle, closePageAlertMsg,isShowPageAlert,(success) => { console.log(success); }, (error) => { console.log(error); });
启动网页页面(相比V2版本,新增设置屏幕方向landscapeScreenFlag,比如要横屏参数设置成0,SCREEN_ORIENTATION_UNSET (-2): 未设置屏幕方向,系统将使用默认方向。
SCREEN_ORIENTATION_UNSPECIFIED (-1): 未指定屏幕方向,系统将根据当前的配置选择方向。
SCREEN_ORIENTATION_LANDSCAPE (0): 横屏模式。
SCREEN_ORIENTATION_PORTRAIT (1): 竖屏模式。
SCREEN_ORIENTATION_USER (2): 用户当前选择的方向。
SCREEN_ORIENTATION_BEHIND (3): 与当前Activity之后的Activity的方向相同。
SCREEN_ORIENTATION_SENSOR (4): 根据传感器自动选择横屏或竖屏。
SCREEN_ORIENTATION_NOSENSOR (5): 忽略传感器,使用设备默认方向。
SCREEN_ORIENTATION_SENSOR_LANDSCAPE (6): 根据传感器自动选择横屏。
SCREEN_ORIENTATION_SENSOR_PORTRAIT (7): 根据传感器自动选择竖屏。
SCREEN_ORIENTATION_REVERSE_LANDSCAPE (8): 反向横屏。
SCREEN_ORIENTATION_REVERSE_PORTRAIT (9): 反向竖屏。
SCREEN_ORIENTATION_FULL_SENSOR (10): 全传感器模式,根据四个方向的传感器自动选择。
SCREEN_ORIENTATION_USER_LANDSCAPE (11): 用户选择的横屏模式。
SCREEN_ORIENTATION_USER_PORTRAIT (12): 用户选择的竖屏模式。
SCREEN_ORIENTATION_FULL_USER (13): 用户选择的全方向模式。
SCREEN_ORIENTATION_LOCKED (14): 锁定当前方向,不随传感器变化。)
cordova.plugin.thswebviewpage.showWebViewPageV3(url, title, isLandscapeScreen,closePageAlertTitle, closePageAlertMsg,isShowPageAlert,landscapeScreenFlag,(success) => { console.log(success); }, (error) => { console.log(error); });
发送信息给加载的H5页面
cordova.plugin.thswebviewpage.sendMessageToH5Page(data, (success) => {
console.log(success);
}, (error) => {
console.log(error);
});
监听事件-收到页面中JS的事件-更新数据并关闭页面事件
```java
document.addEventListener('thswebviewpage.updateDataAndClose', data => {
console.log(data);
alert(JSON.stringify(data));
}, false);
监听事件-收到页面中JS的事件-更新数据事件
document.addEventListener('thswebviewpage.updateData', data => {
console.log(data);
alert(JSON.stringify(data));
}, false);
收到页面中JS的事件-关闭页面事件
document.addEventListener('thswebviewpage.closePage', data => {
console.log(data);
alert(JSON.stringify(data));
}, false);
收到来自H5页面的消息事件,比如嵌入的页面要定位
document.addEventListener('thswebviewpage.toMainAppMsg', data => {
console.log(data);
alert(JSON.stringify(data));
}, false);
嵌入的 Html 页面中,接收主应用消息的回调方法 receiveMainAppMsg,与cordova.plugin.thswebviewpage.sendMessageToH5Page 配合使用,可以实现H5页面与主应用的通信。
function receiveMainAppMsg(message) {
console.log('receiveMainAppMsg', message);
alert('receiveMainAppMsg:'+ message);
}
嵌入的 Html 页面中,发送消息给主应用的方法 thsJsBridge.toMainAppMsg,与cordova.plugin.thswebviewpage.sendMessageToH5Page 配合使用,可以实现H5页面与主应用的通信。
function sendMessageToNative(message) {
thsJsBridge.toMainAppMsg(message);
}
说明:使用ts 进行开发时,需要在文件上变声明下declare const cordova,不然会报错;
import { Component, OnInit, Input } from '@angular/core';
import { WebIntent } from '@ionic-native/web-intent/ngx';
declare let cordova;
@Component({
selector: 'app-explore-container',
templateUrl: './explore-container.component.html',
styleUrls: ['./explore-container.component.scss'],
})
常见错误
闪退提示找不到webview并且能看到以下内容
java.lang.RuntimeException Using WebView from more than one process at once with the same data directory is not supported
- 在包名根目录下,新建java文件
public class MyApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
// 修復WebView的多進程加載的bug
initWebView();
}
private void initWebView() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
String processName = getProcessName();
WebView.setDataDirectorySuffix(processName);
}
}
}
- 将 MyApplication 注册到清单文件中
<application
android:name=".MyApplication" //添加这一行
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:usesCleartextTraffic="true"
android:theme="@style/AppTheme">