APP与页面通信方式(VUE)

APP打开前端页面,与APP进行数据交互方式

APP与VUE的通信

如果没有在webpack中使用VUE,复制了VUE的源码

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
let Vue = function () { }
function toArray(list, start) {
start = start || 0;
var i = list.length - start;
var ret = new Array(i);
while (i--) {
ret[i] = list[i + start];
}
return ret
}
function eventsMixin(Vue) {
Vue.prototype.$on = function (event, fn) {
var this$1 = this;

var vm = this;
if (Array.isArray(event)) {
for (var i = 0, l = event.length; i < l; i++) {
this$1.$on(event[i], fn);
}
} else {
vm._events = Object.create(null);
(vm._events[event] || (vm._events[event] = [])).push(fn);
}
return vm
};

Vue.prototype.$off = function (event, fn) {
var this$1 = this;

var vm = this;
// all
if (!arguments.length) {
vm._events = Object.create(null);
return vm
}
// array of events
if (Array.isArray(event)) {
for (var i = 0, l = event.length; i < l; i++) {
this$1.$off(event[i], fn);
}
return vm
}
// specific event
var cbs = vm._events[event];
if (!cbs) {
return vm
}
if (!fn) {
vm._events[event] = null;
return vm
}
if (fn) {
// specific handler
var cb;
var i$1 = cbs.length;
while (i$1--) {
cb = cbs[i$1];
if (cb === fn || cb.fn === fn) {
cbs.splice(i$1, 1);
break
}
}
}
return vm
};

Vue.prototype.$emit = function (event) {
var vm = this;
var cbs = vm._events[event];
if (cbs) {
cbs = cbs.length > 1 ? toArray(cbs) : cbs;
var args = toArray(arguments, 1);
for (var i = 0, l = cbs.length; i < l; i++) {
try {
cbs[i].apply(vm, args);
} catch (e) {

}
}
}
return vm
};
}

eventsMixin(Vue)
var events = new Vue()

// 通信桥梁
let HandCall = {
pageData: {},
postMessage(uri, data, callback) {
// 通过key确认使用哪个callBack
let reqid = `req-${new Date().getTime()}`
// IOS和Android注入JS,IOS和Android注入的不一样,IOS同学说是只能放webkit里面。。
if (window.kit) {
if (typeof data !== "string") {
data = JSON.stringify(data)
}
window.kit.postMessage(reqid, uri, data);
events.$on(reqid, callback);
} else if (window.webkit && window.webkit.messageHandlers.kit) {
let messageBody = { reqid, uri, data }
window.webkit.messageHandlers.kit.postMessage(JSON.stringify(messageBody));
events.$on(reqid, callback);
}
},
callback(reqid, data) {
events.$emit(reqid, data);
events.$off(reqid);
},
setData(data) {
HandCall.pageData = data
}
}

使用

1
2
3
HandCall.postMessage(val.url, postData, (data) => {
// data就是返回的数据了
})

webpack中使用

  • eventemitter.js

    1
    2
    import Vue from 'vue'
    export default new Vue()
  • main.js

    1
    2
    3
    import events from 'eventemitter'
    //loadUrl调用的方法
    window.onXxxx = (params) => events.$emit('xxxx',...params)
  • x.vue

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    import events from 'eventemitter'
    export default {
    data(){
    return{
    }
    },
    //组件创建时添加监听事件
    created(){
    events.$on('xxxx',() => {
    //do something
    })
    }
    //组件销毁时取消事件监听
    destroyed(){
    events.$off('xxxx')
    }
    }