【开发样例】基于 OpenHarmony 开发的JS灯控应用

一、使用的开发板：BearPi-HM Micro

一、使用的开发板：BearPi-HM Micro

BearPi-HM Micro开发板是一块高度集成并可运行Openharmony系统的开发板，板载高性能的工业级处理器STM32MP157芯片，搭配4.3寸LCD电容式触摸屏，并板载wifi威廉希尔官方网站及标准的E53接口，标准的E53接口可扩展多种智能应用案例。

二、开发环境搭建

1.下载DevEco Studio开发工具包

(1).直接进入[OpenHarmony](https://gitee.com/link?target=https%3A%2F%2Fdeveloper.harmonyos.com%2Fcn%2Fdevelop%2Fdeveco-studio%23download)产品下载页选择需要的产品进行下载，这里我们选择最新3.0版本的Windows平台版。

2.安装DevEco Studio开发工具包

(1).找到刚刚下载的压缩包，解压直接双击里面的deveco-studio-xxxx.exe程序，进入DevEco

Studio安装向导，在如下安装选项界面勾选64-bit launcher后（Add launchers dir to the
PATH可以不勾选），点击Next，直至安装完成。

(2).安装完成后，点击Finish完成安装。

3.安装OpenHarmony开发插件

(1).安装完成后创建一个empty ability项目，如未安装SDK系统会提示安装相应的SDK插件。

(2).点击Install SDK根据提示安装相应的SDK即可

三、如何烧录系统并启动

请参考[点击链接](https://gitee.com/openharmony-sig/knowledge_demo_temp/blob/master/docs/JS_SmartLampCtrl/docs/%E5%A6%82%E4%BD%95%E7%83%A7%E5%BD%95%E5%9B%BA%E4%BB%B6%E5%B9%B6%E5%90%AF%E5%8A%A8.md)

四、代码介绍

**通常我们做OpenHarmony应用开发的时候是没法调用开发环境中未提供的接口的，本篇我们将介绍如何自定义接口，并于开发板进行交互。**

1.相关概念

JS自定义接口： 在我们需要使用一些开发环境未提供给我们的能力时，我们可以自定义一些接口。

系统定义接口： 我们定义完JS接口后也是不能直接使用的，必须在系统代码中完成定义的接口才行。

2.代码详解

(1) 添加接口定义

首先我们想要调用系统未提供的接口时需要现在系统接口文件中定义一个JS接口，这里我们就在 **@system.app.d.ts** 文件中定义该接口。该文件在OpenHarmony的SDK目录下一般是在 ***SDK目录\js\SDK版本目录\api\[smartVision@system.app.d.ts](mailto:smartVision@system.app.d.ts)*** 这个路径下。找到后在其中添加你需要定义的接口，该接口必须是在系统代码中你所实现的接口（需要参考系统接口开发），添加完成后就可以在代码中调用了。


  这里以我们的led为例，我们在 **@system.app.d.ts** 文件中的 `export default class App {}` 类里添加了这样一个接口。

export default class App {
  /**
   * Obtains the declared information in the config.json file of an application.
   */
  static getInfo(): AppResponse;

  /**
   * Destroys the current ability.
   */
  static terminate(): void;
  //自定义接口
  static ledcontrol(options: {
	  code: number;
	  success?: (res: string) => void;
	  fail?: (res: string, code: number) => void;
	  complete?: () => void;
  }): void;
}

该接口就是请求系统操作LED，code为指令代码, 0：关闭led，1：打开led，2：led状态翻转，success，fail为该请求的回复，会返回当前led状态，0：关闭状态，1：打开状态。 这样我们的自定义接口就写好了，接下来就是如何使用它。

(2) 编写页面代码与JS代码

我们在页面添加代码，添加之前先准备好我们需要的图片资源，然后再在index.hml中添加以下代码：

<div class="container">
    <div class="title-view">
        <div class="back-view" onclick="exit">
            <image class="back-img" src="../../common/back.png"/>
            <text class="back-btn"> 退出 </text>
        </div>
        <text class="title">
            {{ title }}
        </text>
    </div>
    <image class="ledImg" if="{{statu == '0'}}" src="../../common/led_off.png" />
    <image class="ledImg" if="{{statu == '1'}}" src="../../common/led_on.png" />
    <div class="ledAction">
        <div class="ledAction-view" onclick="open">
            <image class="ledAction-img" src="../../common/open.png"/>
            <text class="ledAction-btn">
                开灯
            </text>
        </div>
        <div class="ledAction-view" onclick="change">
            <image class="ledAction-img" src="../../common/change.png"/>
            <text class="ledAction-btn">
                转换
            </text>
        </div>
        <div class="ledAction-view" onclick="close">
            <image class="ledAction-img" src="../../common/close.png"/>
            <text class="ledAction-btn">
                关灯
            </text>
        </div>
    </div>
</div>

然后我们再添加样式代码：

.container {
    width: 800px;
    height: 480px;
    flex-direction: column;
    align-items: center;
}

.title {
    width: 800px;
    font-size: 40px;
    text-align: center;
}

.ledImg{
    width: 200px;
    height: 200px;
    margin-top: 10px;
}

.ledAction{
    padding: 10px;
    margin-top: 20px;
    height: 130px;
    width: 800px;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.ledAction-view{
    width: 120px;
    height: 120px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.ledAction-img{
    width: 60px;
    height: 60px;
}

.ledAction-btn{
    width: 120px;
    margin-top: 10px;
    font-size: 25px;
    text-align: center;
}

.title-view{
    width: 800px;
    height: 110px;
    flex-direction: column;
}

.back-view{
    height: 60px;
    width: 200px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.back-img{
    height: 30px;
    width: 30px;
    margin-left: 10px;
}

.back-btn{
    font-size: 30px;
}

接下来我们再来编写JS代码：

//灯状态 0是关闭 1是开启
var led = {open:1,close:0,change:2}
import app from '@system.app';
export default {
    data: {
        title: 'BearPi-HM Micro',
        statu:'0'
    },
    exit(e){
        app.terminate()
    },
    open(e){
        let that = this
        app.ledcontrol({
            code:led.open,
            success(res){
                that.statu = res.led_status
            },
            fail(res,code){

            },
            complete(){

            }
        })
    },
    close(e){
        let that = this
        app.ledcontrol({
            code:led.close,
            success(res){
                that.statu = res.led_status
            },
            fail(res,code){

            },
            complete(){

            }
        })
    },
    change(e){
        let that = this
        app.ledcontrol({
            code:led.change,
            success(res){
                that.statu = res.led_status
            },
            fail(res,code){

            },
            complete(){

            }
        })
    }
}