鸿蒙2.0系统初次开发体验
鸿蒙2.0开发初次通过JSUI展示效果
初次体验![选择空的JS](https://i-blog.csdnimg.cn/blog_migrate/81bf6f3c1052bd5ef7b0cc222ffece3b.png)
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.图片路径的问题:(主要图片的后缀和图片的和路径)