1、处理启动页显示异常的问题

2、新增首页部分页面

quickapp/src/assets/styles/mixins.less

@@ -2,4 +2,5 @@
   flex-direction: @column;
   justify-content: @justify;
   align-items: @align;
+  height: 100%;
 }

quickapp/src/manifest.json

@@ -35,7 +35,8 @@
         "component": "index"
       },
       "pages/Home": {
-        "component": "index"
+        "component": "index",
+        "launchMode":"singleTask"
       }
     }
   },
@@ -43,11 +44,8 @@
     "titleBarBackgroundColor": "#f2f2f2",
     "titleBarTextColor": "#414141",
     "pages": {
-      "pages/Demo": {
+      "pages": {
-        "titleBarText": "PushDeer"
+        "titleBar": false
-      },
-      "pages/DemoDetail": {
-        "titleBarText": "详情页"
       }
     }
   }

quickapp/src/pages/Home/device.ux

@@ -0,0 +1,29 @@
+<template>
+  <div class="wrapper">
+    <text class="title">{{ title }}</text>
+  </div>
+</template>
+
+<script>
+export default {
+  data: {
+    title: "Hello World. Quickapp Component."
+  },
+  
+  props: [],
+  
+  onInit() {}
+}
+</script>
+
+<style>
+.wrapper {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.title {
+  text-align: center;
+  color: #212121;
+}
+</style>

quickapp/src/pages/Home/index.ux

@@ -1,57 +1,77 @@
+<import name="my-tabbar" src="./tabbar"></import>
+<import name="device" src="./device"></import>
+<import name="key" src="./device"></import>
+<import name="message" src="./device"></import>
+<import name="settings" src="./device"></import>
 <template>
-  <!-- template里只能有一个根节点 -->
   <div class="wrapper">
-    <text class="title">{{ text }}</text>
+    <div>
-    <text class="desc"
+      <component is="{{ tabbarData[currentPageIndex].compName }}"></component>
-      >快应用是移动互联网新型应用生态，与手机系统深度整合，为用户提供更加场景化的体验。具备传统APP完整的应用体验，但无需安装、即点即用。
+    </div>
-    </text>
+    <my-tabbar tabbar="{{tabbarData}}" onemit-evt="emitEvt"></my-tabbar>
-    <text class="desc"
-      >标准是由主流手机厂商组成的快应用联盟联合制定。其标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台，以平台化的生态模式对个人开发者和企业开发者全品类开放
-    </text>
-    <input
-      class="btn"
-      type="button"
-      value="欢迎使用"
-      onclick="onWelcomeBtnClick"
-    />
   </div>
 </template>
 
 <script>
 export default {
   private: {
-    text: '快应用是什么？',
+    currentPageIndex: 0,
+    tabbarData: [
+      {
+        iconPath: '/assets/images/tabbar-device.png',
+        selectedIconPath: '/assets/images/tabbar-device-active.png',
+        active: true,
+        compName: 'device',
+        title: '设备'
+      },
+      {
+        iconPath: '/assets/images/tabbar-device.png',
+        selectedIconPath: '/assets/images/tabbar-device-active.png',
+        active: false,
+        compName: 'key',
+        title: 'Key'
+      },
+      {
+        iconPath: '/assets/images/tabbar-device.png',
+        selectedIconPath: '/assets/images/tabbar-device-active.png',
+        active: false,
+        compName: 'message',
+        title: '消息'
+      },
+      {
+        iconPath: '/assets/images/tabbar-device.png',
+        selectedIconPath: '/assets/images/tabbar-device-active.png',
+        active: false,
+        compName: 'settings',
+        title: '设置'
+      }
+    ]
   },
-
+  onRefresh() {
-  onWelcomeBtnClick() {
+    console.log('home page refreshed!!!')
-    $utils.showToast('快应用：复杂生活的简单答案，让生活更顺畅')
+  },
+  onShow() {
+    console.log('home page shown!!!')
+    this.$page.setTitleBar({ text: this.tabbarData[this.currentPageIndex].title })
+  },
+  emitEvt({ detail: { idx: newIdx } } = evt) {
+    // console.log('home', 'emitEvt', 'newIdx', newIdx)
+    // console.log('home', 'emitEvt', 'tabbarData', this.tabbarData)
+    this.tabbarData[this.currentPageIndex].active = false;
+    this.tabbarData[newIdx].active = true;
+    this.currentPageIndex = newIdx
+    this.$page.setTitleBar({ text: this.tabbarData[newIdx].title })
   },
 }
 </script>
-
 <style lang="less">
 @import './../../assets/styles/style.less';
 
 .wrapper {
   .flex-box-mixins(column, center, center);
-  margin: 0 10 * @size-factor;
+
-  .title {
+  .container {
-    font-size: 8 * @size-factor;
+    height: 100%;
-    text-align: center;
-    color: @black;
-  }
-  .desc {
-    margin-top: 10 * @size-factor;
-    color: @grey;
-  }
-  .btn {
-    width: 90 * @size-factor;
-    height: 16 * @size-factor;
-    border-radius: 8 * @size-factor;
-    background-color: @brand;
-    color: @white;
-    font-size: 30px;
-    margin-top: 16 * @size-factor;
   }
 }
 </style>

quickapp/src/pages/Home/tabbar.ux

@@ -0,0 +1,91 @@
+<template>
+  <div class="{{tabbar.length !== 0 ? 'wrap' : ''}}">
+    <slot content="content"></slot>
+    <div class="tab-bar" if="{{tabbar.length !== 0}}">
+      <div class="shadow"></div>
+      <div class="tab tab-recommend">
+        <div for="{{tab in tabbar}}">
+          <image
+            @click="changePage($idx)"
+            src="{{tab.active?tab.selectedIconPath:tab.iconPath}}"
+            if="{{tab.iconPath}}"
+          ></image>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  props: {
+    tabbar: { default: [] }
+  },
+  changePage(idx) {
+    console.log('tabbar', 'changePage', idx)
+    this.$emit('emitEvt', {
+      idx
+    });
+    // router.push({
+    //   uri: e.target.dataset.path,
+    //   params: {
+    //     ___PARAM_LAUNCH_FLAG___: "clearTask"
+    //   }
+    // });
+  }
+};
+</script>
+
+
+<style lang="less">
+.wrap {
+  padding-bottom: 108px;
+}
+
+.tab-bar {
+  .shadow {
+    position: fixed;
+    bottom: 108px;
+    height: 9px;
+    width: 100%;
+    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.09));
+  }
+
+  .tab {
+    background-color: rgba(255, 255, 255, 0.98);
+    position: fixed;
+    bottom: 0;
+    flex-direction: row;
+    height: 108px;
+    width: 100%;
+    justify-content: space-around;
+
+    div {
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+
+    image {
+      width: 58px;
+      height: 80px;
+    }
+
+    text {
+      font-size: 30px;
+    }
+  }
+
+  .selected {
+    color: #0091ff;
+  }
+
+  .tab-recommend {
+    left: 0;
+  }
+
+  .tab-mine {
+    right: 0;
+  }
+}
+</style>

quickapp/src/pages/index.ux

@@ -1,18 +1,16 @@
-
+<!-- <import name="button" src="apex-ui/components/button/index"></import> -->
 <template>
   <!-- template里只能有一个根节点 -->
-  <div class="container">
+  <div class="wrapper">
-    <div style="height: 50%">
+    <div class="logo">
-      <img class="logo" src="/assets/images/launch-logo.png" />
+      <img src="/assets/images/index-logo.png" />
     </div>
     <div class="btn-group">
-      <input
+      <text class="btn-wx" @click="onWxSignBtnClick">Sign in with WeChat</text>
-        class="btn-wx"
+        <!-- class="btn-wx"
-        type="button"
-        title="mn"
         value="Sign in with WeChat"
-        onclick="onSignWxBtnClick"
+        onclick="onWxSignBtnClick"
-      />
+      /> -->
     </div>
   </div>
 </template>
@@ -23,11 +21,10 @@ import router from '@system.router'
 export default {
   // 页面级组件的数据模型，影响传入数据的覆盖机制：private内定义的属性不允许被覆盖
   private: {
-    title: '欢迎体验快应用开发',
   },
 
-  onSignWxBtnClick() {
+  onWxSignBtnClick() {
-    router.push({
+    router.replace({
       uri: '/pages/Home',
     })
   },
@@ -37,32 +34,36 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
-.container {
+.wrapper {
   flex-direction: column;
+  align-items: center;
   height: 100%;
-}
 
-.logo {
+  .logo {
-  margin: 0 auto;
+    flex-direction: column;
-}
+    justify-content: center;
-
+    height: 60%;
-.btn-group {
+    width: 50%;
-  flex-direction: column;
-  width: 50%;
-  margin: 0 auto;
-
-  input {
-    margin: 16px 0;
-    padding: 24px;
-    border-width: 3px;
-    border-radius: 8px;
-    background-color: transparent;
-    font-size: 32px;
   }
-  .btn-wx {
+
-    color: #296c05;
+  .btn-group {
-    border-color: #296c05;
+    flex-direction: column;
+    width: 50%;
+    /* margin: 0 auto; */
+
+    text {
+      margin: 16px 0;
+      padding: 24px;
+      border-width: 3px;
+      border-radius: 8px;
+      text-align: center;
+      font-size: 32px;
+    }
+    .btn-wx {
+      color: #296c05;
+      border-color: #296c05;
+    }
   }
 }
 </style>