{{message}} '});
15 | this.$eventHub = Vue.prototype.$eventHub;
16 |
17 | Vue.myGlobalMethod = function () { // 1. 添加全局方法或属性，如: vue-custom-element
18 | // 逻辑...
19 | console.log('我是全局的方法');
20 | };
21 | Vue.directive('my-directive', { // 2. 添加全局资源：指令/过滤器/过渡等，如 vue-touch
22 | bind (el, binding, vnode, oldVnode) {
23 | // 逻辑...
24 | console.log('我是全局的指令');
25 | el.style.color = binding.value.color;
26 | el.innerHTML = binding.value.text;
27 | },
28 | update (el, binding) {
29 | el.style.color = binding.value.color;
30 | el.innerHTML = binding.value.text;
31 | }
32 | });
33 | Vue.mixin({
34 | created: function () { // 3. 通过全局 mixin方法添加一些组件选项，如: vuex
35 | // 逻辑...
36 | // 合并一些东西到引入的组件内
37 | this.message = "我在封装的类内声明的变量";
38 | }
39 | });
40 | Vue.prototype.$myMethod = function (options) { // 4. 添加实例方法，通过把它们添加到 Vue.prototype 上实现
41 | // 逻辑...
42 | console.log('我是实例上的一个方法');
43 | }
44 | },
45 | // 主要用户初始化信息
46 | initType (params) {
47 | if (params == 'ios') {
48 | hybrid.type = "ios";
49 | }
50 | console.log(hybrid.type);
51 | },
52 | // 发送给原生的方法,...params : 这个参数就是一个数组
53 | send (...params) {
54 | console.log(params);
55 | },
56 | // 注册原生发过来的方法,name需要注册的方法的名字
57 | registerHandler (name, callBack) {
58 | console.log(name + "js 处理原生发送的数据");
59 | try {
60 | // eval(this.native.callBack) 必须指定清楚那个对象的函数名字
61 | if (typeof(eval(this.native.callBack)) == "function") {
62 | eval("this.native." + callBack + "('js处理完成之后的结果回传给原生客户端');");
63 | } else {
64 | // 函数不存在, 抛出异常提示函数不存在
65 | alert(callBack);
66 | }
67 | }catch(err){
68 | alert(err) // 可执行
69 | }
70 | },
71 | appGoBack(index) {
72 | console.log("原生调用封装类" + index);
73 | //调用$emit 方法, 来发送全局的函数
74 | this.$eventHub.$emit('goBack', index);
75 | }
76 | }
77 | // 把vue中绑定的对象挂载到window上
78 | window.Hybrid = hybrid;
79 | // if (window.Vue) { // 自动绑定
80 | // window.Vue.use(hybrid);
81 | // }
82 | // 导出共给vue组件中引入使用
83 | export default hybrid
--------------------------------------------------------------------------------
/src/common/optimizeApp.js:
--------------------------------------------------------------------------------
1 | /**
2 | * 对app.js做优化处理
3 | * 自执行匿名函数
4 | * 常见格式：(function(){ code })();
5 | 解释：包围函数(function(){ code })的第一对括号向脚本返回未命名的函数，随后一对空括号立即执行返回的未命名函数，括号内为匿名函数的参数。
6 | 作用：可以用它创建命名空间，只要把自己的所有代码都写在这个特殊的函数包装内，那么外部就不能访问，除非你允许（变量前加上window，这样该函数后变量就成为全局）。各JavaScript库的代码也基本上是这种组织形式。
7 | 总结一下，执行函数的作用主要为匿名和自动执行，代码在被解释时就已经在运行了。
8 |
9 | 写法总结：
10 | (function(){ code }());
11 | !function(){ code }();
12 | ~function(){ code }();
13 | -function(){ code }();
14 | +function(){ code }();
15 |
16 | * 到处一个自调用函数，让一个函数声明语句变成了一个表达式。
17 | * 优点 ：()和加减号在chrome表现惊人，而且在其他浏览器下也普遍很快，相比感叹号效果更好。
18 | */
19 | export default (() => {
20 | window.$Hybrid = {}; // 声明一个window上的对象
21 | +function (global) {
22 | // 默认是安卓，主要用于判断是安卓还是ios
23 | global.$type = 'android';
24 | // 区分安卓和ios的不同调用方式
25 | global.$native = window.app;
26 | // 用于vue安装这个插件 这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象:
27 | global.install = function (Vue, options) {
28 | // 把当前的对象挂载到vue的全局
29 | Vue.prototype.$hybrid = this;
30 | Vue.prototype.$eventHub= Vue.prototype.$eventHub || new Vue({data:{'message':''}, template:'
{{message}} '});
31 | this.$eventHub = Vue.prototype.$eventHub;
32 |
33 | Vue.myGlobalMethod = function () { // 1. 添加全局方法或属性，如: vue-custom-element
34 | // 逻辑...
35 | console.log('我是全局的方法');
36 | };
37 | Vue.directive('my-directive', { // 2. 添加全局资源：指令/过滤器/过渡等，如 vue-touch
38 | bind (el, binding, vnode, oldVnode) {
39 | // 逻辑...
40 | console.log('我是全局的指令');
41 | el.style.color = binding.value.color;
42 | el.innerHTML = binding.value.text;
43 | },
44 | update (el, binding) {
45 | el.style.color = binding.value.color;
46 | el.innerHTML = binding.value.text;
47 | }
48 | });
49 | Vue.mixin({
50 | created: function () { // 3. 通过全局 mixin方法添加一些组件选项，如: vuex
51 | // 逻辑...
52 | // 合并一些东西到引入的组件内
53 | this.message = "我在封装的类内声明的变量";
54 | }
55 | });
56 | Vue.prototype.$myMethod = function (options) { // 4. 添加实例方法，通过把它们添加到 Vue.prototype 上实现
57 | // 逻辑...
58 | console.log('我是实例上的一个方法');
59 | }
60 | };
61 | // 主要用户初始化信息
62 | global.initType = function (params) {
63 | if (params == 'ios') {
64 | this.type = "ios";
65 | }
66 | console.log(this.type);
67 | };
68 | // 发送给原生的方法,...params : 这个参数就是一个数组
69 | global.send = function (...params) {
70 | console.log(params);
71 | };
72 | // 注册原生发过来的方法,name需要注册的方法的名字
73 | global.registerHandler = function (name, callBack) {
74 | console.log(name + "js 处理原生发送的数据");
75 | try {
76 | // eval(this.native.callBack) 必须指定清楚那个对象的函数名字
77 | if (typeof(eval(this.native.callBack)) == "function") {
78 | eval("this.native." + callBack + "('js处理完成之后的结果回传给原生客户端');");
79 | } else {
80 | // 函数不存在, 抛出异常提示函数不存在
81 | alert(callBack);
82 | }
83 | }catch(err){
84 | alert(err) // 可执行
85 | }
86 | };
87 | global.appGoBack = function (index) {
88 | console.log("原生调用封装类" + index);
89 | //调用$emit 方法, 来发送全局的函数
90 | this.$eventHub.$emit('goBack', index);
91 | }
92 | }(window.$Hybrid);
93 | })();
94 |
--------------------------------------------------------------------------------
4 | 
25 |
26 | ## 回掉原生事件演示
27 | 
28 |
29 |
30 |
31 | ## 项目运行
32 |
33 | ``` bash
34 | # install dependencies
35 | npm install
36 |
37 | # serve with hot reload at localhost:8080
38 | npm run dev
39 |
40 | # build for production with minification
41 | npm run build
42 |
43 | # build for production and view the bundle analyzer report
44 | npm run build --report
45 | ```
--------------------------------------------------------------------------------
/src/components/Sec.vue:
--------------------------------------------------------------------------------
1 |
2 |