HarmonyOS 之 JS 的初级入门

HarmonyOS

9月10日，在华为开发者大会上，华为官方宣布将会逐步向大家开源。这次开源分为三个阶段进行，华为鸿蒙系统开源，也意味着华为有成为第五操作系统的决心。

9月10日起，HarmonyOS 将面向智慧屏，可穿戴设备，车机等 RAM 128KB-128MB终端设备开放源代码。12月首先向开发者发布手机华为 HarmonyOS 2.0 开发者 Beta 版本，提供开发环境，工具，模拟器以及开发文档。2021年4月底前，向RAM 在128MB - 4GB终端设备，包括平板，低内存手机等开源，并在适当时候发布商用版本。2021年10月以后面向 4GB 以上所有设备开源。

---

1. 下载与安装软件

根据官方文档来安装即可。安装 Node 环境，下载软件，进行安装。如果无特殊需求，安装成功之后，即可使用。笔者安装开发软件的过程就是如此。

2. 创建应用

点击 Next 即可创建成功。

3. 使用模拟器运行HelloWorld

点击 Tools > HVD Manager。首次使用模拟器，需下载模拟器相关资源，请点击OK，等待资源下载完成。

温馨提示：如果未登录，在浏览器中弹出华为开发者联盟帐号登录界面，请输入已实名认证的华为开发者联盟帐号的用户名和密码进行登录。

在设备列表中，选择Phone设备，并点击按钮，运行模拟器

运行中的模拟器

点击，模拟器开始工作

点击 OK

恭喜你，成功了

---

4. JS UI框架

处在初级菜鸟段位的我，对于 HarmonyOS 提供的 JS UI框架，仅仅停留在入门的初级阶段。给我带来的第一感受是，这个语法和规则有点与微信小程序的开发相似。

官方文档地址

在官方给出的示例代码中，我觉得自己是可以接受这个语法和规则，很熟悉，很亲切

index.hml

<!-- index.hml -->
<div class="container">
  <!-- title area -->
  <div class="title">
    <text class="name">Food</text>
    <text class="sub-title">Choose What You Like</text>
  </div>
  <div class="display-style">
    <!-- display area -->
    <swiper id="swiperImage" class="swiper-style">
      <image src="{{$item}}" class="image-mode" focusable="true" for="{{imageList}}"></image>
    </swiper>
    <!-- product details area -->
    <div class="container">
      <div class="selection-bar-container">
        <div class="selection-bar">
          <image src="{{$item}}" class="option-mode" onfocus="swipeToIndex({{$idx}})" onclick="swipeToIndex({{$idx}})" for="{{imageList}}"></image>
        </div>
      </div>
      <div class="description-first-paragraph">
        <text class="description">{{descriptionFirstParagraph}}</text>
      </div>
      <div class="cart">
        <text class="{{cartStyle}}" onclick="addCart" onfocus="getFocus" onblur="lostFocus" focusable="true">{{cartText}}</text>
      </div>
    </div>
  </div>
</div>

<image src="{{$item}}" class="image-mode" focusable="true" for="{{imageList}}"></image>

index.js

export default {
  data: {
    cartText: 'Add To Cart',
    cartStyle: 'cart-text',
    isCartEmpty: true,
    descriptionFirstParagraph: 'This is a food page containing fresh fruits, snacks and etc. You can pick whatever you like and add it to your cart. Your order will arrive within 48 hours. We guarantee that our food is organic and healthy. Feel free to access our 24h online service for more information about our platform and products.',
    imageList: ['/common/food_000.JPG', '/common/food_001.JPG', '/common/food_002.JPG', '/common/food_003.JPG'],
  },


  swipeToIndex(index) {
    this.$element('swiperImage').swipeTo({index: index});
  },


  addCart() {
    if (this.isCartEmpty) {
      this.cartText = 'Cart + 1';
      this.cartStyle = 'add-cart-text';
      this.isCartEmpty = false;
    }
  },


  getFocus() {
    if (this.isCartEmpty) {
      this.cartStyle = 'cart-text-focus';
    }
  },


  lostFocus() {
    if (this.isCartEmpty) {
      this.cartStyle = 'cart-text';
    }
  },
}

使用过前端框架的小伙伴是不是超级熟悉呢，属性和方法的定义都是与前端框架的相同。

官方文档中给出的组件分类

组件类型	主要组件
基础组件	text、image、progress、rating、span、marquee、image-animator、divider、search、menu、chart
容器组件	div、list、list-item、stack、swiper、tabs、tab-bar、tab-content、list-item-group、refresh、dialog
媒体组件	video
画布组件	canvas

与平常的开发使用的组件几乎无差

---

页面路由

// index.js
import router from '@system.router';
export default {
  launch() {
    router.push ({
      uri: 'pages/detail/detail',
    });
  },
}

// detail.js
import router from '@system.router';
export default {
  launch() {
    router.back();
  },
}

---

自定义组件

<!-- comp.hml -->
 <div class="item"> 
   <text class="title-style">{{title}}</text>
   <text class="text-style" onclick="childClicked" focusable="true">点击这里查看隐藏文本</text>
   <text class="text-style" if="{{showObj}}">hello world</text>
 </div>

// comp.js
 export default {
   props: {
     title: {
       default: 'title',
     },
     showObject: {},
   },
   data() { 
     return {
       showObj: this.showObject,
     };
   }, 
   childClicked () { 
     this.$emit('eventType1', {text: '收到子组件参数'});
     this.showObj = !this.showObj; 
   }, 
 }

调用时

<!-- xxx.hml -->
 <element name='comp' src='../../common/component/comp.hml'></element> 
 <div class="container"> 
   <text>父组件：{{text}}</text>
   <comp title="自定义组件" show-object="{{isShow}}" @event-type1="textClicked"></comp>
 </div>

// xxx.js
 export default { 
   data: {
     text: '开始',
     isShow: false,
   },
   textClicked (e) {
     this.text = e.detail.text;
   },
 }

---

当开发者基于手机（Phone）、平板（Tablet）、智慧屏（TV）或智能穿戴（Wearable）的JS模板进行开发时，请参考手机、平板、智慧屏和智能穿戴开发了解JS接口和组件的支持性。
当开发者基于轻量级智能穿戴（Lite Wearable）的模板进行开发时，请参考轻量级智能穿戴开发了解JS接口和组件的支持性。HarmonyOS JS API 地址

例如，文档中给出的获取地理位置整 API 的使用

1. 在 config.json 中进行权限申请

"module": {
    "package": "com.example.harmonyforjs",
    "name": ".MyApplication",
    "deviceType": [
      "phone"
    ],
    // 权限申请
    "reqPermissions": [
      {
        "name": "ohos.permission.LOCATION"
      }
    ],
    // 权限申请
    "distro": {
      "deliveryWithInstall": true,
      "moduleName": "entry",
      "moduleType": "entry"
    },
}

HarmonyOS根据接口所涉数据的敏感程度或所涉能力的安全威胁影响，定义了不同开放范围与授权方式的权限来保护数据。有关权限问题，文档地址

js 文件

import app from '@system.app';
import gelatin from '@system.geolocation';
export default {
    data: {
        text: '开始',
        isShow: false,
    },
    handleClick() {
        var info = app.getInfo();
        console.log('info' + JSON.stringify(info));
        if (info.appName) {
            gelatin.getLocation({
                success: function(data) {
                    console.log('success get location data. latitude:' + data.latitude);
                },
                fail: function(data, code) {
                    console.log('fail to get location. code:' + code + ', data:' + data);
                },
            });
        }
    }
}

console.log 控制台

info：{"appName":"harmonyForJS","versionName":"1.0","versionCode":1}

运行之前需要打开位置信息按钮

不然就会报错

fail to get location. code:801, data:location switch is close

返回的信息

success get location data. latitude: 31.498564

🥦🍄🥦🍄🥦🍄🥦

---

笔者也是刚刚入门，文中若有错误，望指正