1.3.1 • Published 4 months ago

cordova-plugin-ths-webviewpage v1.3.1

Weekly downloads
1
License
ISC
Repository
-
Last release
4 months ago

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

  1. 在包名根目录下,新建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);
        }
    }
}
  1. 将 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">
1.3.1

4 months ago

1.2.8

11 months ago

1.3.0

9 months ago

1.2.9

11 months ago

1.2.7

11 months ago

1.2.6

11 months ago

1.2.5

11 months ago

1.2.4

11 months ago

1.2.3

12 months ago

1.2.0

1 year ago

1.1.1

1 year ago

1.2.2

12 months ago

1.2.1

12 months ago

1.1.2

1 year ago

1.1.0

1 year ago

1.0.9

1 year ago

1.0.8

1 year ago

1.0.7

1 year ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago