社区首页 >专栏 >鸿蒙HarmonyOS官方JavaScript demo解析

鸿蒙HarmonyOS官方JavaScript demo解析

肉眼品世界

发布于 2021-03-09 06:57:36

1.2K00

代码可运行

文章被收录于专栏：肉眼品世界肉眼品世界

运行总次数：0

代码可运行

今天小编就带大家来学习鸿蒙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依赖包，安装完后就可以正常运行啦。