init

build.gradle

@@ -3,6 +3,26 @@ apply plugin: 'com.huawei.ohos.app'
 
 //For instructions on signature configuration, see https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/ide_debug_device-0000001053822404-V3#section1112183053510
 ohos {
+    signingConfigs {
+        debug {
+            storeFile file('E:\\AndroidConfig\\huawei\\key-huawei.p12')
+            storePassword '0000001C66E05ED22CCD99242BBCA86819077A6F6E82981C4019B05ACCA9C7346DBBA8C877B7D0716AC3ECA4'
+            keyAlias = 'xuqm'
+            keyPassword '0000001C5649FF5C8797C5ED434C08F14DA00F8266105AC313CDFDF65DAAAB37D51743B2637E42C87FFB0988'
+            signAlg = 'SHA256withECDSA'
+            profile file('E:\\AndroidConfig\\huawei\\元服务体验Debug.p7b')
+            certpath file('E:\\AndroidConfig\\huawei\\xuqm的调试证书.cer')
+        }
+        release {
+            storeFile file('E:\\AndroidConfig\\huawei\\key-huawei.p12')
+            storePassword '0000001C861687F2361AA54B6389639B93CF7DF1015ED199627F9199C8D4F36DD551CAF533F88B368033DBE1'
+            keyAlias = 'xuqm'
+            keyPassword '0000001CA72F0A95B5E98AE0B0765E985897A3696CDEC57D2F425100B97E52DFA826E6114689EFB574978078'
+            signAlg = 'SHA256withECDSA'
+            profile file('E:\\AndroidConfig\\huawei\\元服务体验-发布Release.p7b')
+            certpath file('E:\\AndroidConfig\\huawei\\xuqm的发布证书.cer')
+        }
+    }
     compileSdkVersion 6
 }
 

entry/src/main/config.json

@@ -1,7 +1,7 @@
 {
   "app": {
     "vendor": "example",
-    "bundleName": "com.example.demo",
+    "bundleName": "cn.org.bjca.trust.hm.demo",
     "version": {
       "code": 1000000,
       "name": "1.0.0"
@@ -66,12 +66,13 @@
     "js": [
       {
         "pages": [
-          "pages/index/index"
+          "pages/index/index",
+          "pages/location/location"
         ],
         "name": "default",
         "window": {
           "designWidth": 720,
-          "autoDesignWidth": true
+          "autoDesignWidth": false
         }
       },
       {
@@ -81,7 +82,7 @@
         "name": "widget",
         "window": {
           "designWidth": 720,
-          "autoDesignWidth": true
+          "autoDesignWidth": false
         },
         "type": "form"
       }

entry/src/main/js/default/common/indexData.js

@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var tabbarData = [
+        {
+            i: 0,
+            title: '基础',
+            color:'#515151',
+            selectedColor:'#EEB174',
+            img: '/common/Icon/home.png',
+            selectedImg: '/common/Icon/selected_home.png',
+            show: true,
+        },
+        {
+            i: 1,
+            title: '三方',
+            color:'#515151',
+            selectedColor:'#EEB174',
+            img: '/common/Icon/classification.png',
+            selectedImg: '/common/Icon/selecteds.png',
+            show: false,
+        },
+        {
+            i: 2,
+            title: '自定义',
+            color:'#515151',
+            selectedColor:'#EEB174',
+            img: '/common/Icon/find.png',
+            selectedImg: '/common/Icon/selected_find.png',
+            show: false,
+        },
+]
+
+export default tabbarData;

entry/src/main/js/default/pages/home/home.css

@@ -0,0 +1,17 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    left: 0px;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+}
+
+.title {
+    font-size: 38px;
+    text-align: center;
+    width: 100%;
+    margin: 10px;
+}

entry/src/main/js/default/pages/home/home.hml

@@ -0,0 +1,5 @@
+<div class="container">
+    <text class="title">
+        {{ title }}
+    </text>
+</div>

entry/src/main/js/default/pages/home/home.js

@@ -0,0 +1,8 @@
+export default {
+    data: {
+        title: ""
+    },
+    onInit() {
+        this.title = "home";
+    }
+}

entry/src/main/js/default/pages/index/index.css

@@ -1,47 +1,22 @@
+
 .container {
-    display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
-    left: 0px;
-    top: 0px;
-    width: 100%;
-    height: 100%;
 }
-
-.title {
-    font-size: 40px;
-    text-align: center;
+.tab-bar {
+    justify-content: space-between;
+    height: 6%;
+}
+.tab-item {
     width: 100%;
-    height: 40%;
-    margin: 10px;
+    height: 100px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 }
 
-@media screen and (device-type: tablet) and (orientation: landscape) {
-    .title {
-        font-size: 100px;
-    }
-}
-@media screen and (device-type: wearable) {
-    .title {
-        font-size: 28px;
-        color: #FFFFFF;
-    }
-}
-@media screen and (device-type: tv) {
-    .container {
-        background-image: url("/common/images/Wallpaper.png");
-        background-size: cover;
-        background-repeat: no-repeat;
-        background-position: center;
-    }
-    .title {
-        font-size: 100px;
-        color: #FFFFFF;
-    }
-}
-@media screen and (device-type: phone) and (orientation: landscape) {
-    .title {
-        font-size: 60px;
-    }
-}
+.tab-item-image {
+    width: 80%;
+    height: 60%;
+    object-fit: contain;
+}

entry/src/main/js/default/pages/index/index.hml

@@ -1,5 +1,24 @@
+<element name="pageHome" src="../home/home.hml"></element>
+<element name="pageMore" src="../more/more.hml"></element>
+<element name="pageMine" src="../mine/mine.hml"></element>
 <div class="container">
-    <text class="title">
-        {{ $t('strings.hello') }} {{ title }}
-    </text>
-</div>
+    <tabs class="tabs" onchange="changeTabIndex">
+        <tab-content>
+            <div>
+                <pageHome></pageHome>
+            </div>
+            <div>
+                <pageMore></pageMore>
+            </div>
+            <div>
+                <pageMine></pageMine>
+            </div>
+        </tab-content>
+        <tab-bar class="tab-bar" mode="fixed">
+            <div class="tab-item" for="{{ tabbardata }}">
+                <image class="tab-item-image" src="{{ $item.show ? $item.selectedImg : $item.img }}"></image>
+                <text style="color: {{ $item.show ? $item.selectedColor : $item.color }}">{{ $item.title }}</text>
+            </div>
+        </tab-bar>
+    </tabs>
+</div>

entry/src/main/js/default/pages/index/index.js

@@ -1,8 +1,20 @@
+import tabbarData from '../../common/indexData.js'
+
 export default {
-    data: {
-        title: ""
+    data() {
+        return {
+            tabbardata: tabbarData
+        }
     },
     onInit() {
-        this.title = this.$t('strings.world');
+    },
+    changeTabIndex(e) {
+        for (let i = 0; i < this.tabbardata.length; i++) {
+            let element = this.tabbardata[i];
+            element.show = false;
+            if (i === e.index) {
+                element.show = true;
+            }
+        }
     }
 }

entry/src/main/js/default/pages/location/location.css

@@ -0,0 +1,17 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    left: 0px;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+}
+
+.title {
+    font-size: 38px;
+    text-align: center;
+    width: 100%;
+    margin: 10px;
+}

entry/src/main/js/default/pages/location/location.hml

@@ -0,0 +1,5 @@
+<div class="container">
+    <text class="title">
+        {{ title }}
+    </text>
+</div>

entry/src/main/js/default/pages/location/location.js

@@ -0,0 +1,8 @@
+export default {
+    data: {
+        title: ""
+    },
+    onInit() {
+        this.title = "location";
+    }
+}

entry/src/main/js/default/pages/mine/mine.css

@@ -0,0 +1,17 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    left: 0px;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+}
+
+.title {
+    font-size: 38px;
+    text-align: center;
+    width: 100%;
+    margin: 10px;
+}

entry/src/main/js/default/pages/mine/mine.hml

@@ -0,0 +1,5 @@
+<div class="container">
+    <text class="title">
+        {{ title }}
+    </text>
+</div>

entry/src/main/js/default/pages/mine/mine.js

@@ -0,0 +1,8 @@
+export default {
+    data: {
+        title: ""
+    },
+    onInit() {
+        this.title = "mine";
+    }
+}

entry/src/main/js/default/pages/more/more.css

@@ -0,0 +1,32 @@
+.container {
+    flex-direction: column;
+    width: 100%;
+    margin-top: 10px;
+}
+.listG{
+    height: 400px;
+}
+.listItem{
+    width: 100%;
+    height: 60px;
+    line-height: 60px;
+    border-bottom: 1px solid #DEDEDE;
+    align-items: center;
+    font-size: 20px;
+}
+.group{
+    width: 96%;
+    height: 60px;
+    padding-left: 3%;
+    margin-left: 6%;
+    border-bottom: 1px solid #DEDEDE;
+    font-size: 20px;
+    font-weight:500;
+}
+.groupValue{
+    font-size: 16px;
+    width: 95%;
+    height: 60px;
+    margin-left: 15%;
+    border-bottom: 1px solid  #DEDEDE;
+}

entry/src/main/js/default/pages/more/more.hml

@@ -0,0 +1,27 @@
+<div class="container">
+    <list class="listG">
+        <list-item-group>
+            <list-item><text class="group">定位相关</text></list-item>
+            <list-item><text class="groupValue" onclick="toLocation">实时定位</text></list-item>
+            <list-item><text class="groupValue">地图</text></list-item>
+        </list-item-group>
+        <list-item-group>
+            <list-item><text class="group">广告位招租</text></list-item>
+            <list-item><text class="groupValue">文本内容</text></list-item>
+            <list-item><text class="groupValue">文本内容</text></list-item>
+            <list-item><text class="groupValue">文本内容</text></list-item>
+        </list-item-group>
+        <list-item-group>
+            <list-item><text class="group">分组列表</text></list-item>
+            <list-item><text class="groupValue">文本内容</text></list-item>
+            <list-item><text class="groupValue">文本内容</text></list-item>
+            <list-item><text class="groupValue">文本内容</text></list-item>
+        </list-item-group>
+        <list-item-group>
+            <list-item><text class="group">分组列表</text></list-item>
+            <list-item><text class="groupValue">文本内容</text></list-item>
+            <list-item><text class="groupValue">文本内容</text></list-item>
+            <list-item><text class="groupValue">文本内容</text></list-item>
+        </list-item-group>
+    </list>
+</div>

entry/src/main/js/default/pages/more/more.js

@@ -0,0 +1,16 @@
+import router from '@system.router'
+
+export default {
+    data: {
+        title: ""
+    },
+    onInit() {
+        this.title = "more";
+    },
+    toLocation() {
+        console.log('>>>>>>>>>>>>>>>>>>>')
+        router.push({
+            uri: 'pages/location/location'
+        })
+    }
+}