# Webview 浏览器视图组件

请扫码查看示例

# 介绍

美居webview组件

# 引入

APP内置组件，可直接使用cross-view标签。

# 代码演示

# Minix用法

<div class="wrapper">
  <div class="circleall">
    <button class="buttons" onclick="reloadHandle">刷新</button>
    <button class="buttons" onclick="postMessage">postMessage</button>
    <button class="buttons" onclick="goBack">goBack</button>
    <button class="buttons" onclick="goForward">goForward</button>
  </div>
  <cross-view id="cross-view_webview_1" class="cross-view" type="midea-web-view" crossprops="{{webview1}}" onCallMethod="onCallMethod"></cross-view>
</div>

1
2
3
4
5
6
7
8
9
10

import prompt from '@system.prompt'
export default {
  data: {
    webview1: JSON.stringify({
      src: 'http://10.133.147.209:8080/webView/index.html',
    }),
  },
  reloadHandle() {
    this.callModluleMethods('reload', {})
  },
  postMessage() {
    this.callModluleMethods('postMessage', { msg: 'test webview' })
  },
  goBack() {
    this.callModluleMethods('goBack', {})
  },
  goForward() {
    this.callModluleMethods('goForward', {})
  },
  callModluleMethods(method, params) {
    prompt.showToast({
      duration: 5000,
      message: 'start test',
    })
    this.$element('cross-view_webview_1').call({
      paramsJsonString: JSON.stringify({
        method,
        params,
      }),
      success: function (e) {
        prompt.showToast({
          duration: 5000,
          message: 'lottie success !!',
        })
      },
      fail: function (e) {
        prompt.showToast({
          duration: 5000,
          message: 'lottie fail !!',
        })
      },
      complete: function (e) {
        prompt.showToast({
          duration: 5000,
          message: 'lottie complete !!',
        })
      },
    })
  },
  /**
   * 原生回调方法
   */
  onCallMethod({ method, params }) {
    if (method == 'receivedtitle') {
      prompt.showToast({
        message: JSON.stringify(params),
        duration: 2000,
      });
    } else if (method == 'pagestart') {
      prompt.showToast({
        message: JSON.stringify(params),
        duration: 2000,
      });
    } else if (method == 'pagefinish') {
      prompt.showToast({
        message: JSON.stringify(params),
        duration: 2000,
      });
    } else if (method == 'eror') {
      prompt.showToast({
        message: JSON.stringify(params),
        duration: 2000,
      });
    } else if (method == 'message') {
      prompt.showToast({
        message: JSON.stringify(params),
        duration: 2000,
      });
    }
  },
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

# web用法

<template>
    <div class="x-simulator">
       <span class="x-board-title">{{text}}</span>
    </div>
</template>
<script>

export default {
    data(){
        return {
          text:'测试web-view'
        }
    },
    mounted(){
        window.addEventListener('message',function(e){
            _this.text=e.data     
        },false)
    },
}
</script>
<style lang="less" scoped>
 ....
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# Api

# Prop

字段	说明	类型	默认值	是否必须
`type`	原生组件类型	`String`	`midea-web-view`	`是`
`crossprops`	参数	`String`	`{}附表1`	`是`

# 附表1

字段	说明	类型	默认值	是否必须
`src`	web网页url路径	`String`	-	`是`

# Methods 主动调用

方法名称	说明	备注
`reload`	刷新web页面	-
`goBack`	返回上一页	-
`goForward`	跳转到下一页	-
`postMessage`	发送消息，web端数据获取`附表2`	-

# 附表2 web网页获取数据

方法名称	说明	备注
`addEventListener`	web添加事件监听（事件名称message）	-

# Methods 原生回调参数

方法名称	说明	备注
`receivedtitle`	末尾	-
`pagestart`	页面开始	-
`pagefinish`	页面加载完成	-
`err`	错误	-
`message`	消息	-