一文读懂在 OpenHarmony 轻量设备开发应用

作者：蔡奇
2022-04-12
701
1
原文

 分享

（以下内容来自开发者分享，不代表 OpenHarmony 项目群工作委员会观点）

本文档旨在讲解新建 Helloworld 项目步骤、固件包烧录到 BES2600WM 开发板、实现 js 和 C 代码的通讯。该 Demo 重点体现的是 OpenAtom OpenHarmony（以下简称“OpenHarmony”） 3.1 Beta 系统轻量设备 js 和 C 的交互能力，

效果如图

（注：BES2600WM 是 V200Z-R 开发板核心芯片，欧智通是 V200Z-R 开发板厂商，BES2600WM 开发板为轻量设备，移植 OpenHarmony 3.1 Beta 版本系统）

欧智通 V200Z-R 是一款可带一块 480*480 显示屏的开发板，其特点如下：

① V200Z-R 是高度集成的无线模块，具有语音和音频功能。基于 BES2600WM 解决方案实现，具有 Cortex-M33 Star 双核 MCU 子系统和 Cortex-A7 双核 AP 子系统；

② 该模块支持低功耗 Wi-Fi4（1T1R 802.11a/b/g/n 双频段）和蓝牙 5.2 双模（支持 BT/BLE、LE 音频）。此外，它还提供了一个高性能的板载天线，从而降低了硬件设计的复杂性；

③ V200Z-R 还提供了一个语音和音频编解码器子系统和一个显示 2D 图形引擎子系统。它支持 MIPI DSI 高清显示 (720P@ 60fps)，支持高达 2MPixel 的 MIPICSI 摄像头，并支持最多 3 个模拟麦克风或 6 个数字麦克风用于远场语音应用的麦克风阵列。单片机子系统运行蓝牙协议栈，AP 子系统和 2D 硬件图形引擎可以加速 GUI 和 VUI、语音和音频处理以及人工智能任务。如图：

1、新建工程、选择模板

由于 BES2600WM 开发板为轻量设备，移植的是 OpenHarmony 3.1 Beta 版本系统，且该系统版本支持在轻设备开发 js 应用，故这里选择代表轻设备的: "[Lite]Empty Ability"模板，如图：

2、填写工程信息

依次完成如下信息填写：

①：填好工程名称（Project name） ②：选择工程类型 Application ③：填写包名 ④：修改保存路径 ⑤：选择开发语言 JS ⑥：选择API版本 Version 7 ⑦：选择设备类型

选择 “Finish”，至此，新建工程完毕，如图：

此时，该新建的工程结构，如下图：

其中：

a) .hml 结尾的 HML 模板文件，这个文件用来描述当前页面的文件布局结构； b) .css 结尾的 CSS 样式文件，这个文件用于描述页面样； c) .js 结尾的 JS 文件，这个文件用于处理页面和用户的交互。

3、添加js和C代码之间的交互

3.1 js如何传数据给C

首先，在hml 文件中添加按钮 button，如图：

在 index.css 文件中定义中该按钮大小、文字颜色、字体等，如图：

然后，在 index.js 文件中定义按钮响应事件：onButtonClick() ，它调用 SetKey() 能将 key 为 “JSAction“，value 为 “Hello World” 的字符串发送给 C 端，如图：

SetKey 函数的详细写法如下：

SetKey(key1, value1) {
    CommunicationKit.set({
        key: key1,
        value: value1,
        success: function() {
            console.log('call storage.set success.');
        },
        fail: function(data, code) {
            console.log('call storage.set fail, code: ' + code + ', data: ' + data);
        },
    });
},

注：SetKey 函数中的 CommunicationKit 模块声明文件需要拷贝到 DevEcoStudio 所安装的：“/DevEcoToolSdk/js/3.0.0/api/common/” 目录下面，如图：

该 CommunicationKit 模块声明文件在和本 README.md 文件同级目录的文件夹“CommunicationKit_Tool/”，如图：

最后，点击该按钮，如图：

此时，C 端通过 JsSetClang 方法获取 JS 端发送过来的 key 为: “JSAction“，value 为: “Hello World” 的字符串数据，如图：

并且，该函数添加了 LOG_I 打印 JS 端发过来的数据，如图：

该函数定义如下：

static int JsSetClang(const char *key, char *value)
{
    if (NULL == key || NULL == value) {
        return -1;
    }
    if ((0 == strcmp(key, "JsAction")) && (0 == strcmp(value, "Hello World"))) {
        g_recvJsDataFlag = !g_recvJsDataFlag;
        LOG_I("Get JS string information -> %s.\r\n", value);
    }
    return 0;
}

C 端收到 JS 端数据后，该 LOG_I 所打印信息如图所示：

(注：C端的代码路径(Https://Gitee.Com/Openharmony-Sig/Knowledge_demo_smart_home/Tree/Master/Dev/Team_x/Smart_door_bell/Demo_smart_door_bell))

3.2 C如何传数据给js

首先，轻量设备端的 C 程序通过 JsGetClang 方法向 JS 发送 key 为 ”ResponseFromC“ ,value 为 “Hello World from BES2600!” 的字符串，如图：

该函数定义如下：

static int JsGetClang(const char *key, char *value)
{
    char buf[1024] = {0};
    memset(buf, 0, sizeof(buf));

    if(0 != g_recvJsDataFlag) {
        memcpy(buf, "{\"ResponseFromC\":\"Hello World from BES2600!\"}",
            strlen("{\"ResponseFromC\":\"Hello World from BES2600!\"}") + 1);
        buf[strlen("{\"ResponseFromC\":\"Hello World from BES2600!\"}")] = '\0';
    }
    memcpy(value, buf, strlen(buf) + 1);
    return 0;
}

然后，JS 页面初始化的时候，JS 已经通过设置定时器来轮询 GetKey() 方法，不断获取 C 程序传过来的数据，当收到数据后，在界面显示出来，如图：

GetKey() 方法的详细写法如下，如图：

GetKey() {
    CommunicationKit.get({
        key: 'storage_key',
        success: (data)=> {
            console.log('call storage.get success: ' + data);
            let res = JSON.parse(data)
            if (res.ResponseFromC) {
                this.title = res.ResponseFromC;
            }
        },
        fail: function(data, code) {
            console.log('call storage.get fail, code: ' + code + ', data: ' + data);
        },
        complete: function() {
            console.log('call complete');
        },
    });
},

最后，C 端发送过来的数据 “Hello World from BES2600!” 在界面显示如下：