feat: add plugin

Author: w-xuefeng

.eslintrc.js

@@ -3,12 +3,18 @@ module.exports = {
   env: {
     node: true
   },
-  extends: ["plugin:vue/essential", "@vue/prettier"],
+  extends: ['plugin:vue/essential', '@vue/prettier'],
   rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
   },
   parserOptions: {
-    parser: "babel-eslint"
+    parser: 'babel-eslint'
+  },
+  globals: {
+    api: 'readonly',
+    'window.api': 'readonly',
+    apiready: true,
+    'window.apiready': true
   }
 };

public/res/css/api.css

@@ -6,6 +6,7 @@ html,body,header,section,footer,div,ul,ol,li,img,a,span,em,del,legend,center,str
 	border:0;
 	padding:0;
 	font-style:normal;
+	overflow: hidden;
 }
 html,body {
 	-webkit-touch-callout:none;

src/assets/logo.png

@@ -1,6 +1,9 @@
 <template>
   <div class="bottomNav">
-    13245879
+    <span>lala</span>
+    <span>haha</span>
+    <span>dada</span>
+    <span>kaka</span>
   </div>
 </template>
 
@@ -18,9 +21,20 @@ export default {
 .bottomNav {
   height: 60px;
   width: 100%;
-  padding-bottom: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 10px;
   position: absolute;
   bottom: 0;
   left: 0;
+  border-top: 1px solid #666666;
+  background: dodgerblue;
+  span {
+    width: 25%;
+    height: 40px;
+    text-align: center;
+    line-height: 50px;
+  }
 }
 </style>

src/components/BottomNav.vue

@@ -1,10 +1,4 @@
 import App from './app';
-import Vue from 'vue';
-import apicloud from '@/utils/common';
+import { initApp } from '@/plugins';
 
-Vue.use(apicloud);
-Vue.config.productionTip = false;
-
-new Vue({
-  render: h => h(App)
-}).$mount('#app');
+initApp(App);

src/main.js

@@ -1,12 +1,15 @@
 <template>
-  <div>
-    bottomframe
-  </div>
+  <bottom-nav />
 </template>
 
 <script>
+import BottomNav from '@/components/BottomNav';
+
 export default {
-  name: 'bottomframe'
+  name: 'bottomframe',
+  components: {
+    BottomNav
+  }
 };
 </script>
 

src/pages/bottomframe/index.vue

@@ -3,7 +3,7 @@
     <com-header :title="title" />
     <button
       style="height:100px; width: 100%; background: deepskyblue"
-      @click="$openPage({ name: 'login', url: 'loginindex.html' })"
+      @click="$page.open('loginindex', { name: 'login' })"
     >
       123456
     </button>
@@ -23,6 +23,18 @@ export default {
       title: '首页'
     };
   },
+  onReady() {
+    this.$frame.open({
+      name: 'bottomframe',
+      rect: {
+        x: 0,
+        y: Number(document.body.getRect().height) - 60,
+        w: 'auto',
+        h: 60
+      },
+      url: 'bottomframeindex'
+    });
+  },
   mounted() {}
 };
 </script>

src/pages/index/index.vue

@@ -0,0 +1,2 @@
+import initApp from './init.vue';
+export { initApp };

src/plugins/index.js

@@ -0,0 +1,87 @@
+import Vue from 'vue';
+import ReadyPlugin from './ready.plugin';
+
+Vue.config.productionTip = false;
+
+Vue.use(ReadyPlugin);
+
+Object.defineProperty(Vue.prototype, 'api', {
+  get: function() {
+    return window.api;
+  }
+});
+
+Object.defineProperty(Vue.prototype, '$api', {
+  get: function() {
+    return window.$api;
+  }
+});
+
+var _openw = null;
+Vue.prototype.$page = {
+  open(url, { pageParam, animation, winOpts } = {}) {
+    if (_openw) {
+      return;
+    }
+    url = url.endsWith('.html') ? url : url + '.html';
+    var api = window.api;
+    if (!api) {
+      window.location.href = url;
+      return;
+    }
+    var name = `win_${url}`;
+    var params = {
+      name,
+      url,
+      pageParam,
+      animation,
+      ...(winOpts || {})
+    };
+    api.openWin(params);
+  },
+  close() {
+    if (!window.api) {
+      window.history.back();
+      return;
+    }
+    window.api.closeWin();
+  }
+};
+
+Vue.prototype.$frame = {
+  open(params) {
+    let { url } = params;
+    url = url.endsWith('.html') ? url : url + '.html';
+    if (typeof api !== 'undefined') {
+      api.openFrame({ ...params, url });
+    } else {
+      const { name, rect } = params;
+      const iframe = document.createElement('iframe');
+      iframe.setAttribute('frameborder', 0);
+      iframe.setAttribute('name', name);
+      iframe.src = url;
+      iframe.style.position = 'absolute';
+      if (rect.x) {
+        iframe.style.left = `${rect.x}px`;
+      }
+      if (rect.y) {
+        iframe.style.top = `${rect.y}px`;
+      }
+      if (rect.w) {
+        iframe.style.width = rect.w === 'auto' ? '100%' : `${rect.w}px`;
+      }
+      if (rect.h) {
+        iframe.style.height = rect.h === 'auto' ? '100%' : `${rect.h}px`;
+      }
+      document.body.appendChild(iframe);
+    }
+  }
+};
+
+const initApp = (App, opts = {}) => {
+  new Vue({
+    ...opts,
+    render: h => h(App)
+  }).$mount('#app');
+};
+export default initApp;

src/plugins/init.vue.js

@@ -0,0 +1,53 @@
+const install = Vue => {
+  if (install.installed) return;
+  install.installed = true;
+  Vue.mixin({
+    beforeCreate() {
+      this._isApiready = false;
+      document.addEventListener('apiready', () => {
+        if ('apiEvent' in this.$options) {
+          const apiEvent = this.$options.apiEvent;
+          for (const key in apiEvent) {
+            if (apiEvent.hasOwnProperty(key)) {
+              const eventListener = apiEvent[key];
+              if (typeof eventListener === 'function') {
+                window.api.addEventListener({ name: key }, (ret, err) => {
+                  eventListener.bind(this).call(this, ret, err);
+                });
+              }
+            }
+          }
+        }
+        this._isApiready = true;
+        if (this._isMounted) {
+          this.__ready();
+        }
+      });
+      document.addEventListener('updateOrientation', () => {
+        this.$options.onWindowChange &&
+          this.$options.onWindowChange.bind(this).call();
+      });
+    },
+    mounted() {
+      if (this._isApiready) {
+        this.__ready();
+      } else {
+        setTimeout(() => {
+          this.__ready();
+        }, 200);
+      }
+    },
+    methods: {
+      __ready() {
+        if (this.__readyed) {
+          return;
+        }
+        this.__readyed = true;
+        this.$options.onReady && this.$options.onReady.bind(this).call();
+      }
+    }
+  });
+};
+export default {
+  install
+};