<web-view>

<web-view> 是一个网页容器。

子组件

无

示例代码

  1. <template>
  2.     <div class="app">
  4.         <web-view ref="reflectName" class="webview"> </web-view>
  6.     </div>
  7. </template>
  9. <style>
  10.     .app {
  11.         width: 750px;
  12.         flex: 1;
  13.     }
  15.     .webview {
  16.         flex: 1;
  17.     }
  18. </style>
  20. <script>
  21.     export default {
  22.         mounted() {
  23.             this.$refs.reflectName.setUrl('https://eeui.app');
  24.         }
  25.     };
  26. </script>

配置参数

属性名 类型 描述 默认值
url String 网页地址 -
content String 网页内容 -
progressbarVisibility Boolean 是否显示进度条 true
scrollEnabled Boolean 是否可以滚动 true
enableApi Boolean 开启eeui等原生交互模块，详见：注① true
userAgent String 自定义浏览器userAgent（保留原有的UA） -
customUserAgent String 完全自定义浏览器userAgent（去除原有的UA） -
transparency Boolean 设置背景透明（前提是网页背景也是透明，否则无效） false

例如：

  1. //示例1
  2. <web-view
  3.     ref="reflectName"
  4.     url="https://eeui.app"></web-view>
  6. //示例2
  7. <web-view
  8.     ref="reflectName2"
  9.     content="网页内容....."></web-view>

注①：

JS支持调用的原生模块如下：（另注：插件市场内的插件是否支持web-view调用且看每个插件开发而异。）

  1. //综合模块
  2. let eeui = requireModuleJs("eeui");
  4. //路由模块
  5. let navigator = requireModuleJs("navigator");
  7. //导航标题栏模块
  8. let navigationBar = requireModuleJs("navigationBar");
  10. //浏览器调用方法
  11. let webview = requireModuleJs("webview");
  13. //【插件市场】城市选择器
  14. let citypicker = requireModuleJs("eeui/citypicker");
  16. //【插件市场】图片选择模块
  17. let picture = requireModuleJs("eeui/picture");
  19. //【插件市场】支付模块
  20. let pay = requireModuleJs("eeui/pay");

例如：

  1. let eeui = requireModuleJs("eeui");
  2. eeui.adDialog("http://..../xxx.png", function(res) {
  3.     eeui.toast("状态：" + res.status);
  4. });

JS调用原生API示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>demo</title>
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  7.     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  8.     <style type="text/css">
  9.         .scan {
  10.             font-size: 14px;
  11.             margin: 32px;
  12.             text-align: center;
  13.         }
  14.     </style>
  15.     <script type="text/javascript">
  16.         function openScan() {
  17.             let eeui = requireModuleJs("eeui");
  18.             eeui.openScaner({}, function(res) {
  19.                 switch (res.status) {
  20.                     case "success":
  21.                         eeui.toast("识别成功：" + res.text);
  22.                         break;
  24.                     case "failed":
  25.                         eeui.toast("识别失败");
  26.                         break;
  27.                 }
  28.             });
  29.         }
  30.         function $ready() {
  31.             //网页加载完成时组件会自动执行此方法
  32.         }
  33.     </script>
  34. </head>
  35. <body>
  36.     <div class="scan" onclick="openScan()">打开扫一扫</div>
  37. </body>
  38. </html>

事件回调 callback

  1. /**
  2.  * 组件加载完成
  3.  */
  4. @ready = function() { ... }
  6. /**
  7.  * 监听状态发生改变
  8.  * 返回参数：data = {
  9.                     status:'success',       //状态，注②
  11.                     title: '网页标题',       //仅【status=title】存在
  12.                     url: 'http://....',     //仅【status=url】存在
  14.                     errCode: '',            //仅【status=error】存在
  15.                     errMsg: '',             //仅【status=error】存在
  16.                     errUrl: '',             //仅【status=error】存在
  17.                 }
  18.  */
  19. @stateChanged = function(data) { ... }
  21. /**
  22.  * 监听网页高度发生改变
  23.  * 返回参数：data = {
  24.                     height:100,             //变化的高度
  25.                 }
  26.  */
  27. @heightChanged = function(data) { ... }
  29. /**
  30.  * 监听网页向组件发送消息
  31.  * 返回参数：data = {
  32.                     message:123456,             //详细消息
  33.                 }
  34.  */
  35. @receiveMessage = function(data) { ... }

注②：

  • start开始加载
  • success加载完毕
  • error加载错误
  • title标题发生改变
  • url网页地址发生改变

调用方法 methods

  1. /**
  2.  * 设置浏览器内容
  3.  * 参数一：详细内容
  4.  */
  5. this.$refs.reflectName.setContent(string);
  7. /**
  8.  * 设置浏览器地址
  9.  * 参数一：地址，如：https://eeui.app
  10.  */
  11. this.$refs.reflectName.setUrl(url);
  13. /**
  14.  * 向浏览器内发送js代码
  15.  * 参数一：js代码，如：alert('demo');
  16.  */
  17. this.$refs.reflectName.setJavaScript(javascript);
  19. /**
  20.  * 是否可以后退
  21.  * 
  22.  * 回调 result: true|false
  23.  */
  24. this.$refs.reflectName.canGoBack(callback(result));
  26. /**
  27.  * 后退并返回是否后退成功
  28.  * 
  29.  * 回调 result: true|false
  30.  */
  31. this.$refs.reflectName.goBack(callback(result));
  33. /**
  34.  * 是否可以前进
  35.  * 
  36.  * 回调 result: true|false
  37.  */
  38. this.$refs.reflectName.canGoForward(callback(result));
  40. /**
  41.  * 前进并返回是否前进成功
  42.  * 
  43.  * 回调 result: true|false
  44.  */
  45. this.$refs.reflectName.goForward(callback(result));
  47. /**
  48.  * 设置是否显示进度条
  49.  * 参数一：true|false
  50.  */
  51. this.$refs.reflectName.setProgressbarVisibility(true);
  53. /**
  54.  * 设置是否可以滚动
  55.  * 参数一：true|false
  56.  */
  57. this.$refs.reflectName.setScrollEnabled(true);

浏览器内js调用原生api方法

  1. let webview = requireModuleJs("webview");
  3. /**
  4.  * 设置浏览器内容
  5.  * 参数一：详细内容
  6.  */
  7. webview.setContent(string);
  9. /**
  10.  * 设置浏览器地址
  11.  * 参数一：地址，如：https://eeui.app
  12.  */
  13. webview.setUrl(url);
  15. /**
  16.  * 向组件发送信息，组件通过receiveMessage事件获取信息
  17.  * 参数一：要发送的数据，如：123456
  18.  */
  19. webview.sendMessage(url);
  21. /**
  22.  * 是否可以后退
  23.  * 
  24.  * 回调 result: true|false
  25.  */
  26. webview.canGoBack(callback(result));
  28. /**
  29.  * 后退并返回是否后退成功
  30.  * 
  31.  * 回调 result: true|false
  32.  */
  33. webview.goBack(callback(result));
  35. /**
  36.  * 是否可以前进
  37.  * 
  38.  * 回调 result: true|false
  39.  */
  40. webview.canGoForward(callback(result));
  42. /**
  43.  * 前进并返回是否前进成功
  44.  * 
  45.  * 回调 result: true|false
  46.  */
  47. webview.goForward(callback(result));
  49. /**
  50.  * 设置是否显示进度条
  51.  * 参数一：true|false
  52.  */
  53. webview.setProgressbarVisibility(true);
  55. /**
  56.  * 设置是否可以滚动
  57.  * 参数一：true|false
  58.  */
  59. webview.setScrollEnabled(true);