webview中使用vue2和vue3区别

webview中vue2和vue3对象区别

真正需要操作webview对象如下

1
2
3
4
5
6
7
8
9
10
{
    id: "webviewId1"
    id__: "webviewId1"
    __IDENTITY__: "NWindow"
    __callback_id__: "plus71721700511734"
    __callbacks__: {}
    __uuid__: "NWindow41721700511899"
    __view_array__: []
}

vue2和vue3webview获取方法

1
2
3
4
5
6
7
8
9
10
# vue2用法
const currentWebview =  this.$parent.$scope.$getAppWebview().children()[0];


# vue3用法
let pages = getCurrentPages() // debug不支持
let ws = pages[pages.length - 1].$getAppWebview().children()[0]

vue3的this中有没有$parent

获取操作的webview

每个vue页面，其实都是一个webview，而vue页面里的web-view组件，其实是webview里的一个子webview。这个子webview被append到父webview上。

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
// 这个指向的是vue页面，vue页面也是一个webview
console.log(this.$parent.$scope.$getAppWebview())

{
	id: "1"
	loaded: true
	__IDENTITY__: "NWindow"
	__callback_id__: "plus21721701647408"
	__callbacks__: {pullToRefresh: Array(1), 
	titleNViewSearchInp	utChanged: Array(1), 
    titleNViewSearchInputConfirmed: Array(1),
    titleNViewSearchInputClicked: Array(1), 
    titleNViewSearchInputFocusChanged: Array(1), …}
	__uniapp_route: "pages/index/index"
	__uuid__: "230039705"
	__view_array__: []
}

// 这个是获取到我们操作的webview组件
console.log(this.$parent.$scope.$getAppWebview().children())

[
    {
        id: "webviewId1"
        id__: "webviewId1"
        __IDENTITY__: "NWindow"
        __callback_id__: "plus51721701647763"
        __callbacks__: {}
        __uuid__: "NWindow41721701647940"
        __view_array__: []
    }
]

验证想法

this.$parent.$scope.$getAppWebview()使用evalJS调用函数

1
this.$parent.$scope.$getAppWebview().evalJS(`init(null, null, ${JSON.stringify(opts)})`)

会提示错误init is not defined at __uniappview.html:1

补充说明

getCurrentPages() 函数用于获取当前页面栈的实例

uni-app 在 getCurrentPages()获得的页面里内置了一个方法 $getAppWebview() 可以得到当前webview的对象实例，

其他

1
2
3
4
// 高级用法，使用plus对象
plus.webview.all()[0]
//等同于
this.$parent.$scope.$getAppWebview().children()[0]

通信部分，一般写app使用@message=”onMessage”就可以了

1
2
@onPostMessage="onMessage"
@message="onMessage"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
console.log = function() {
        emit('log', {
          log: arguments,
        })
      }
      
      
function emit(event, data) {
    postMessage({
    event,
    data
    })
    cache = []
}

function postMessage(data) {
    uni.webView.postMessage({
    data
    })
    // window.__uniapp_x_.postMessage(JSON.stringify(data))
};