# 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 方法)

```java
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的事件-更新数据事件
```java
document.addEventListener('thswebviewpage.updateData', data => {
      console.log(data);
      alert(JSON.stringify(data));
}, false);
```

收到页面中JS的事件-关闭页面事件
```java
document.addEventListener('thswebviewpage.closePage', data => {
      console.log(data);
      alert(JSON.stringify(data));
}, false);
```

收到来自H5页面的消息事件，比如嵌入的页面要定位
```java
document.addEventListener('thswebviewpage.toMainAppMsg', data => {
      console.log(data);
      alert(JSON.stringify(data));
}, false);
```


 嵌入的 Html 页面中，接收主应用消息的回调方法 receiveMainAppMsg,与cordova.plugin.thswebviewpage.sendMessageToH5Page 配合使用，可以实现H5页面与主应用的通信。
 ```javascript
  function receiveMainAppMsg(message) {
            console.log('receiveMainAppMsg', message);
            alert('receiveMainAppMsg:'+ message);
   }
 ```

  嵌入的 Html 页面中，发送消息给主应用的方法 thsJsBridge.toMainAppMsg,与cordova.plugin.thswebviewpage.sendMessageToH5Page 配合使用，可以实现H5页面与主应用的通信。
 ```javascript
  function sendMessageToNative(message) {
      thsJsBridge.toMainAppMsg(message);
   }
 ```



**说明：使用ts 进行开发时，需要在文件上变声明下declare const cordova，不然会报错;**

```typescript
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);
        }
    }
}
```
2. 将 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">
```