feat: modify initAPIReady

Author: w-xuefeng

package-lock.json

@@ -9,7 +9,6 @@
     "lint": "vue-cli-service lint --fix -C .eslintrc.js --ext .js,.vue ./src"
   },
   "dependencies": {
-    "axios": "^0.19.0",
     "core-js": "^3.3.2",
     "vant": "^2.2.15",
     "vue": "^2.6.10"
@@ -26,7 +25,7 @@
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-vue": "^5.0.0",
     "glob": "^7.1.1",
-    "node-sass": "^4.12.0",
+    "node-sass": "^4.13.0",
     "prettier": "^1.18.2",
     "sass-loader": "^8.0.0",
     "vue-template-compiler": "^2.6.10"

package.json

@@ -5,6 +5,9 @@
       <span>返回</span>
     </div>
     <span>{{ title }}</span>
+    <div v-if="right" class="right" @click="rightClick()">
+      <slot name="right" />
+    </div>
   </div>
 </template>
 
@@ -18,9 +21,24 @@ export default {
   },
   props: {
     title: String,
+    framePathName: {
+      type: String,
+      required: true
+    },
     back: {
       type: Boolean,
       default: false
+    },
+    right: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    rightClick() {
+      this.api.sendEvent({
+        name: `${this.framePathName}HeaderRightClick`
+      });
     }
   },
   onReady() {
@@ -54,5 +72,12 @@ export default {
     display: flex;
     align-items: center;
   }
+  .right {
+    position: absolute;
+    right: 15px;
+    font-size: 1em;
+    display: flex;
+    align-items: center;
+  }
 }
 </style>

src/components/ComHeader.vue

@@ -39,6 +39,11 @@ const pages = [
     name: 'headwin',
     path: 'headwin/index'
   },
+  {
+    title: '哒哒',
+    name: 'dada',
+    path: 'dada/index'
+  }
 ];
 
 module.exports = pages

src/config/page.js

@@ -37,6 +37,12 @@ export const frameGroupOpts = {
     {
       name: 'frameGroup-clock',
       pathName: 'clock',
+      options: {
+        right: true,
+        rightOptions: {
+          icon: 'clock-o'
+        }
+      }
     },
     {
       name: 'frameGroup-myhome2',
@@ -51,9 +57,15 @@ export const frameGroupOpts = {
 
 export const homeGridPane = [
   {
-    text: '啦啦',
+    text: '哒哒',
     icon: 'records',
-    pathName: 'leave'
+    pathName: 'dada',
+    options: {
+      right: true,
+      rightOpts: {
+        icon: 'notes-o'
+      }
+    }
   }, 
   {
     text: '文字',

src/config/ui.js

@@ -9,6 +9,11 @@
 <script>
 export default {
   name: 'home1',
+  apiEvent: {
+    clockHeaderRightClick() {
+      alert('点击了头部右侧按钮');
+    }
+  },
   onReady() {
     this.$bindKeyBackExitApp();
   }

src/pages/clock/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="dada">
+    <h1>哒哒</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'dada',
+  data() {
+    return {};
+  },
+  apiEvent: {
+    tap() {
+      alert('点击了页面');
+      api.setScreenOrientation({
+        orientation: 'auto'
+      });
+    },
+    dadaHeaderRightClick() {
+      alert('点击了头部右侧按钮');
+    }
+  },
+  methods: {},
+  onReady() {}
+};
+</script>
+
+<style lang="scss" scoped>
+.dada {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

src/pages/dada/index.vue

@@ -1,22 +1,36 @@
 <template>
   <div class="head-window">
-    <com-header :title="title" :back="back" />
+    <com-header
+      :title="title"
+      :back="back"
+      :right="right"
+      :framePathName="framePathName"
+    >
+      <template v-slot:right>
+        <Icon :name="rightIcon" />
+      </template>
+    </com-header>
   </div>
 </template>
 
 <script>
 import ComHeader from '@/components/ComHeader';
 import { frameTabChange } from '@/config/eventName';
+import { Icon } from 'vant';
 
 export default {
-  name: 'index',
+  name: 'headWin',
   components: {
-    ComHeader
+    ComHeader,
+    Icon
   },
   data() {
     return {
       title: '',
-      back: false
+      back: false,
+      right: false,
+      rightIcon: '',
+      framePathName: ''
     };
   },
   methods: {
@@ -44,9 +58,12 @@ export default {
         rect = {},
         title,
         back,
+        right,
+        rightOpts,
         tab,
         tabsFrameName,
         tabOpts,
+        name,
         frameGroup,
         frameGroupOpts = {},
         bindKeyBackExitApp
@@ -62,6 +79,10 @@ export default {
       }
       this.title = title || '标题';
       this.back = back;
+      this.right = right;
+      if (right) {
+        this.rightIcon = rightOpts.icon;
+      }
       if (frameGroup) {
         const { name, rect = {}, frames } = frameGroupOpts;
         frames.forEach(e => {
@@ -82,15 +103,25 @@ export default {
             if (tab && tabOpts) {
               this.title = tabOpts.tabs[ret.index].text;
             }
+            this.framePathName = frames[ret.index].pathName;
+            if (frames[ret.index].options) {
+              const { right, rightOptions } = frames[ret.index].options;
+              this.right = right;
+              this.rightIcon = rightOptions.icon;
+            } else {
+              this.right = false;
+              this.rightIcon = '';
+            }
             this.api.sendEvent({
               name: frameTabChange,
               extra: { ...ret }
             });
           }
         );
       } else {
+        this.framePathName = name;
         this.$frame.open({
-          name: pageParam.name,
+          name,
           rect: {
             x: rect.x || 0,
             y: rect.y || headerRH,

src/pages/headwin/index.vue

@@ -5,7 +5,7 @@
         src="res/img/logo.png"
         width="50%"
         style="margin: 80px auto 30px auto;display: block;"
-        alt=""
+        alt="logo"
       />
     </div>
     <div class="content">
@@ -15,7 +15,13 @@
           :key="i"
           :icon="g.icon"
           :text="g.text"
-          @click="gotoSomeWhere(g.pathName, g.text)"
+          @click="
+            gotoSomeWhere({
+              pathName: g.pathName,
+              title: g.text,
+              options: g.options
+            })
+          "
         />
       </Grid>
     </div>
@@ -38,31 +44,29 @@ export default {
     };
   },
   methods: {
-    gotoSomeWhere(pathname, title) {
-      if (!pathname) return;
+    gotoSomeWhere({ pathName, title, options }) {
+      if (!pathName) return;
       this.$pageWithHead({
         title,
-        name: pathname,
-        back: true
+        name: pathName,
+        back: true,
+        ...options
       });
     }
   },
   apiEvent: {
-    tap() {
-      alert('点击了页面');
-      api.setScreenOrientation({
-        orientation: 'auto'
-      });
-    },
     scrolltobottom() {
       alert('已滚动到底部');
+    },
+    swipeup() {
+      api.refreshHeaderLoadDone();
     }
   },
   onWindowChange() {
     alert('lalala');
   },
   onReady() {
-    this.$setPullDownRefresh().then(() => {
+    this.$setPullDownRefresh(() => {
       api.refreshHeaderLoadDone();
     });
     this.$bindKeyBackExitApp();

src/pages/home/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="home2" :style="{ paddingBottom: $tabRH() + 'px' }">
     <div class="content">
-      oooo
+      这里是哈哈
     </div>
   </div>
 </template>
@@ -20,5 +20,12 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
+  .content {
+    width: 100%;
+    height: calc(100vh - 120px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }
 </style>