鸿蒙2.0系统初次开发体验

鸿蒙2.0系统初次开发体验

鸿蒙2.0开发初次通过JSUI展示效果

初次体验

index.css

/* index.css */
.container {
    flex-direction: column;
}


.title-section {
    flex-direction: row;
    height: 60px;
    margin-bottom: 5px;
    margin-top: 10px;
}


.title {
    align-items: flex-start;
    flex-direction: column;
    padding-left: 60px;
    padding-right: 160px;
}


.name {
    font-size: 20px;
}


.sub-title {
    font-size: 15px;
    color: #7a787d;
    margin-top: 10px;
}


.swiper-style {
    height: 250px;
    width: 350px;
    indicator-color: #4682b4;
    indicator-selected-color: #f0e68c;
    indicator-size: 10px;
    margin-left: 50px;
}


.image-mode {
    object-fit: contain;
}


.color-column {
    flex-direction: row;
    align-content: center;
    margin-top: 20px;
}


.color-item {
    height: 50px;
    width: 50px;
    margin-left: 50px;
    padding-left: 10px;
}


.color-item:focus {
    background-color: white;
}


.description-first-paragraph {
    padding-left: 60px;
    padding-right: 60px;
    padding-top: 30px;
}


.description {
    color: #7a787d;
    font-size: 15px;
}


.cart {
    justify-content: center;
    margin-top: 20px;
}


.cart-text {
    font-size: 20px;
    text-align: center;
    width: 300px;
    height: 50px;
    background-color: #6495ed;
    color: white;
}


.cart-text-focus {
    font-size: 20px;
    text-align: center;
    width: 300px;
    height: 50px;
    background-color: #4169e1;
    color: white;
}


.add-cart-text {
    font-size: 20px;
    text-align: center;
    width: 300px;
    height: 50px;
    background-color: #ffd700;
    color: white;
}

index.html

<!-- index.hml -->
<div class="container">
    <div class="title-section">
        <div class="title">
            <text class="name">食品</text>
            <text class="sub-title">选择你喜欢的食物</text>
        </div>
    </div>
    <div>
        <swiper id="swiperImage" class="swiper-style">
            <image src="{{$item}}" class="image-mode" focusable="true" for="{{imageList}}"></image>
        </swiper>
        <div class="container">
            <div class="description-first-paragraph">
                <text class="description">{{descriptionFirstParagraph}}</text>
            </div>
            <div class="color-column">
                <canvas id="{{$item.id}}" onfocus="swipeToIndex({{$item.index}})" class="color-item" focusable="true"
                        for="{{canvasList}}"></canvas>
            </div>
        </div>
    </div>
    <div class="cart">
        <text class="{{cartStyle}}" onclick="addCart" onfocus="getFocus" onblur="lostFocus" focusable="true">
            {{cartText}}</text>
    </div>
</div>

index.js

// index.js
export default {
    data: {
        cartText: '添加到购物车',
        cartStyle: 'cart-text',
        isCartEmpty: true,
        descriptionFirstParagraph: '这是食品页面，包括新鲜水果、肉类、零食等。您可以随意挑选并添加到购物车中。您的订单将在48小时内到达。我们保证我们的食物是有机和健康的。请随时向我们的24小时在线服务咨询更多关于我们平台和产品的信息。',
        imageList: ['/common/images/food_000.jpg', '/common/images/food_001.jpg', '/common/images/food_002.jpg', '/common/images/food_003.jpg'],
        canvasList: [{
                         id: 'cycle0',
                         index: 0,
                         color: '#f0b400',
                     }, {
                            id: 'cycle1',
                            index: 1,
                            color: '#e86063',
                        }, {
                               id: 'cycle2',
                               index: 2,
                               color: '#597a43',
                           }, {
                                  id: 'cycle3',
                                  index: 3,
                                  color: '#e97d4c',
                              }],
    },


    onShow() {
        this.canvasList.forEach(element => {
            this.drawCycle(element.id, element.color);
        });
    },


    swipeToIndex(index) {
        this.$element('swiperImage').swipeTo({index: index});
    },


    drawCycle(id, color) {
        var greenCycle = this.$element(id);
        var ctx = greenCycle.getContext("2d");
        ctx.strokeStyle = color;
        ctx.fillStyle = color;
        ctx.beginPath();
        ctx.arc(15, 25, 10, 0, 2 * 3.14);
        ctx.closePath();
        ctx.stroke();
        ctx.fill();
    },


    addCart() {
        if (this.isCartEmpty) {
            this.cartText = '已添加到购物车';
            this.cartStyle = 'add-cart-text';
            this.isCartEmpty = false;
        }
    },


    getFocus() {
        if (this.isCartEmpty) {
            this.cartStyle = 'cart-text-focus';
        }
    },


    lostFocus() {
        if (this.isCartEmpty) {
            this.cartStyle = 'cart-text';
        }
    },
}

运行步骤：顶部区域找到 Tools>>选择device Manager >> 未登录过，需要扫码登录华为账户，没有的可以注册一个>>展示页面如下：

点击TV后面Actions所对应的图标，即可开始


运行结果展示：

注意的几点（避坑）：

**1.**悬浮窗口如何开启：


2.利用adb查看当前链接的设备（会安卓开发的自然懂）：

3.初次下载编译器需要加载好多好多的包：华为开发文档中的安装的视频讲解中提到，有些包在国外，所以能（fan墙）的最好不过了，我是那样操作的，其次就是build中可查看运行的信息的展示。

4.鸿蒙兼容安卓的apk，通过adb直接可以导入到模拟器中，方便快速的适配。

5.图片路径的问题：（主要图片的后缀和图片的和路径）