Flands Blog HomeArchivesTags
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')
        }
    }
VUE