今天小编就带大家来学习鸿蒙JavaScript demo,不需要Java和Android基础,相信大家都能跟着我一起把demo看懂看透。首先还是下载安装 DevEco Studio 2.0,然后New Project,选择一个较为复杂的Refresh Feature Ability(JS)模板。
JS模板
工程建好后,先看看目录结构,全部代码只有两个Java文件(MainAbility.java,MyApplication.java),这两个文件里面没什么实质内容,只是一个程序入口点而已,没有任何界面和业务逻辑。再看看与java目录平级的js目录,里面多了很多js文件,我们只用在这里去继续写代码即可。
目录结构
首先看看app.js代码,它是JS程序的入口点,从Java入口点调到这里来,然后由这里再去调用更多index.js文件。从这段js代码来看,有没有很熟悉的感觉?跟谁很像?对!跟微信小程序很像。微信小程序也不是独创的,一些常用前端框架都类似,采用了node.js的编码风格,采用了Vue.js的MVC架构。微信小程序,快应用,React Native等都是类似的语法和机制。
export default {
onCreate() {
console.info('AceApplication onCreate');
},
onDestroy() {
console.info('AceApplication onDestroy');
}
};
然后看看default/index.js,data:{}里面定义了页面里要用到的变量,onInit()是初始化函数。refresh()函数是进行页面刷新,里面调用了showResult()进行了setTimeout()延时器来requestData(),目的是让定时去刷新messageNum值。这个文件里的代码学过前端开发的网友们应该都能看懂,就不一一去解释了。
const injectRef = Object.getPrototypeOf(global) || global;
injectRef.regeneratorRuntime = require('@babel/runtime/regenerator');
/**
* data request duration (ms)
*/
const TASK_DURATION = 2000;
/**
* refresh result duration (ms)
*/
const REFRESH_RESULT_DURATION = 500;
/**
* refresh succeed background color
*/
const REFRESH_SUCCEED_COLOR = '#0A59F7';
/**
* refresh failed background color
*/
const REFRESH_FAILED_COLOR = '#E84026';
export default {
data: {
isRefreshing: null,
refreshResultIsVisibility: '',
refreshResultColor: '',
refreshResult: '',
hideResult: ''
},
onInit() {
this.refreshResultIsVisibility = 'hidden';
},
/*
* which simulates a long running data request task, developer customization
*/
requestData(delay) {
return new Promise((resolve) => {
setTimeout(() => {
this.isRefreshing = false;
// Simulate refresh results
const messageNum = Math.round(Math.random());
resolve(messageNum);
}, delay);
});
},
async showResult() {
const refreshSucceed = this.$t('strings.refresh_bar.refreshSucceed');
const refreshFailed = this.$t('strings.refresh_bar.refreshFailed');
var that = this;
try {
const messageNum = await this.requestData(TASK_DURATION);
if (messageNum != 0) {
// Set the number of current refresh data
this.refreshResult = refreshSucceed.replace('{count}', messageNum);
this.refreshResultColor = REFRESH_SUCCEED_COLOR;
} else {
this.refreshResult = refreshFailed;
this.refreshResultColor = REFRESH_FAILED_COLOR;
}
this.refreshResultIsVisibility = 'visible';
that.hideResult = '';
setTimeout(function () {
that.hideResult = 'hide-result';
}, REFRESH_RESULT_DURATION);
} catch (e) {
console.error('requestData caught exception' + e);
}
},
refresh: function (refreshingValue) {
this.showResult();
this.isRefreshing = refreshingValue.refreshing;
}
};
我们再看看与index.js对应的index.html,用一个div来显示标题,用一个stack来显示三个图片,布局比较好理解,关键点在这里,例如 onrefresh="refresh",这是绑定事件响应函数,表示刷新事件发生时,会调用对应js文件里的 refresh()函数。我们在介绍index.js代码时知道有个refresh()函数,但没有调用的地方,实际上就是在html这里调用。而 refreshing="{{this.isRefreshing}}" 需要特别说明一下,没学过Vue.js等前端框架的网友可能很难看懂,这里其实就是MVC思想的精髓,{{xxx}} 双大括号里面可以直接引用js文件里的变量,当js变量值被改变时,页面能够自动刷新,而无需重刷整个页面。而双括号里带t的,类似这个main-text="{{ $t('strings.content_bar.mainText') }},是表示返回值以字符串的形式显示。
<element name='image_description' src='../../common/component/image_description.hml'></element>
<div class="container">
<div class="app-bar">
<text class="title">{{ $t('strings.app_bar.title') }}
</text>
</div>
<stack>
<refresh lasttime="true" onrefresh="refresh" refreshing="{{this.isRefreshing}}" type="pulldown" friction="42">
<div class="content-show">
<image_description image-description-position="flex-start" image-path="/common/image.png"
main-text="{{ $t('strings.content_bar.mainText') }}"
auxiliary-text="{{ $t('strings.content_bar.auxiliaryText') }}"></image_description>
<image_description image-description-position="center" image-path="/common/image.png"
main-text="{{ $t('strings.content_bar.mainText') }}"
auxiliary-text="{{ $t('strings.content_bar.auxiliaryText') }}"></image_description>
<image_description image-description-position="flex-end" image-path="/common/image.png"
main-text="{{ $t('strings.content_bar.mainText') }}"
auxiliary-text="{{ $t('strings.content_bar.auxiliaryText') }}"></image_description>
</div>
</refresh>
<div class="refresh-result-outer {{hideResult}}" style="visibility: {{refreshResultIsVisibility}}">
<div class="refresh-result-inner" style="background-color: {{refreshResultColor}}">
<text class="result"> {{refreshResult}}
</text>
</div>
</div>
</stack>
</div>
index.css文件自不必多说,就是H5里的样式表文件,这里摘取一部分代码,完全遵守H5的样式表规范。而js要引用的界面字符串存放在 i18n目录下,en-US.json表示英文,zh-CN.json表示中文,它可以让app在手机系统语言设置发生变化时,自动变更界面语言。
.container {
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
/*
* app bar
*/
.app-bar {
height: 56px;
width: 100%;
margin-left: 24px;
margin-right: 24px;
flex-direction: column;
justify-content: center;
background-color: #f2ffffff;
}
JS版本的代码是不是很容易理解呢?小编曾说过鸿蒙支持JS,等于开启了前端开发者的春天,因为以前前端开发者只能在web或h5网站,如今可以直接做app了。最后我们运行一下这个JS版的app吧,运行之前需要到File->Settings->HarmonyOS SDK里勾选js,安装node.js依赖包,安装完后就可以正常运行啦。
安装js sdk
运行后,下拉图片列表触发刷新动作,可以看到界面上显示了刷新次数和刷新结果,至此我第一个鸿蒙js demo就讲解完毕了。如果光看文章还是觉得难懂,那就赶紧动手练一练吧
来源:
https://www.toutiao.com/i6927242763096293899/