通过对鸿蒙的学习，我做了一个基于鸿蒙开发的小项目。
中原工学院RB软工移211班 王梦茹 202119144101
案例介绍
开始时间，点击抽奖，Web页面的抽奖转盘会开始转动，结束抽奖后，原生页面会弹出一个提示弹窗，这个页面就涉及到Web页面和原生页面的双向交互
具体实现步骤
以上就是这个案例的开发流程，下面是具体实现
function startDraw() {
// 开始抽奖，转盘转动，详见CodeLabs
...
// 完成抽奖，等待1秒，调用弹窗代码
timer = setTimeout(openDialog, 1000);
}
// 弹窗代码: 传出奖品信息
function openDialog() {
confirm("XXX奖品”)
}核心代码
主要代码
let prizesArr = ["啤酒", "奶茶", "汉堡", "咖啡", "西瓜", "鸡腿", "柠檬", "蛋糕"];
let arrBigImg = ["./img/1-beer.png", "./img/2-milk.png", "./img/3-hamburg.png",
"./img/4-coffee.png", "./img/5-watermelon.png", "./img/6-drumstick.png",
"./img/7-lemon.png", "./img/8-cake.png", "./img/9-prizes.png"];
let allPrizesLi = document.querySelectorAll('.prizes-li');
let prizesImg = document.querySelectorAll('.pic');
let count = 0;
let isClick = true;
let index = 3;
let prizesPosition = 0;
let speed = 500;
for (let j = 0;j < prizesImg.length; j++) {
prizesImg[j].src = arrBigImg[j];
}
function roll() {
speed -= 50;
if (speed <= 10) {
speed = 10;
}
for (let j = 0; j < allPrizesLi.length; j++) {
allPrizesLi[j].classList.remove('active');
}
prizesPosition++;
if (prizesPosition >= allPrizesLi.length - 1) {
prizesPosition = 0;
count++;
}
allPrizesLi[prizesPosition].classList.add('active');
let initSpeed = 500;
let timer;
let totalCount = 5;
if (count >= totalCount && (prizesPosition + 1) === index) {
clearTimeout(timer);
isClick = true;
speed = initSpeed;
timer = setTimeout(openDialog, 1000);
} else {
timer = setTimeout(roll, speed);
if (count >= totalCount - 1 || speed <= 50) {
speed += 100;
}
}
}
function startDraw() {
if (isClick) {
count = 0;
index = Math.floor(Math.random() * prizesArr.length + 1);
roll();
isClick = false;
}
}
function openDialog() {
confirm(prizesArr[prizesPosition]);
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./css/index.css">
<meta charset="UTF-8">
<title>抽奖页面</title>
<style>
#prize {
border-radius: 16px 16px 16px 16px;
background-image: linear-gradient(180deg, #A2DAFF 0%, #EAF5FF 100%);
margin-left: 1.82%;
margin-top: 1.43%;
width: 96.5%;
height: 96.7%;
}
</style>
</head>
<body>
<div class="luckyDraw">
<!-- Use an unordered list to implement a lottery tray -->
<ul id="prize" class="prizes">
<li class="prizes-li active"><img class="pic" src="#"></li>
<li class="prizes-li"><img class="pic" src="#"></li>
<li class="prizes-li"><img class="pic" src="#"></li>
<li class="prizes-li"><img class="pic" src="#"></li>
<li class="prizes-li"><img class="pic" src="#"></li>
<li class="prizes-li"><img class="pic" src="#"></li>
<li class="prizes-li"><img class="pic" src="#"></li>
<li class="prizes-li"><img class="pic" src="#"></li>
<li class="prizes-li"><img class="pic" onclick="startDraw()" src="#"></li>
</ul>
</div>
<script src="./js/index.js"></script>
</body>
</html>* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
img {
width: 100%;
height: 100%;
margin: auto;
display: block;
}
.prizes {
width: 96.5%;
height: 96.7%;
position: absolute;
}
.trigger {
font-size: 22px;
text-align: center;
display:block;
}
.prizes li {
width: 30.6%;
height: 30.6%;
box-sizing: border-box;
position: absolute;
}
.prizes li:nth-of-type(1) {
left: 3.0%;
top: 2.7%;
}
.prizes li:nth-of-type(2) {
left: 34.9%;
top: 2.6%;
}
.prizes li:nth-of-type(3) {
left: 66.8%;
top: 2.7%;
}
.prizes li:nth-of-type(4) {
left: 66.8%;
top: 34.6%;
}
.prizes li:nth-of-type(5) {
left: 66.8%;
top: 66.5%;
}
.prizes li:nth-of-type(6) {
left: 34.9%;
top: 66.5%;
}
.prizes li:nth-of-type(7) {
left: 3.0%;
top: 66.5%;
}
.prizes li:nth-of-type(8) {
left: 3.0%;
top: 34.6%;
}
.prizes li:nth-of-type(9) {
left: 34.9%;
top: 34.6%;
}
.active:after {
top: 0;
left: 0;
width: 100%;
content: "";
height: 100%;
position: absolute;
opacity : 0.6;
background-size: contain;
background-image:url('../img/background.svg');
}总结
在实际体验这个案例就会发现，可以加载本地的资源，也可以加载网络的资源，只不过需要传递不同的src地址，就可以实现本地资源和网络资源的在线切换，而其他的业务代码都是一样的