HarmonyOS初尝试

抱着凑热闹的心态4月30号赶上了harmony开发者一轮公测报名的末班车，经过漫长的等待终于5月12号晚上收到了短信，十几分钟后系统就给推送了。当时收到推送还是很激动的，马上就更新了。总的来说挺好、没发现什么bug太严重的bug。

官方文档

UI框架主要分为java和js,js应用所用到的东西和原生js、html、css没有太大差别，有的语法和vue有些相似，上手应该是比较容易的。主要是这个开发工具用的不太熟悉。
主要问题是 previewer 的时候可以进行热更新但是不能进行网络请求。我不知道是我操作的问题还是本来就不允许。看了官方文档是说的部分接口不能请求。

主要目录结构

主要是在 entry/main/js 下进行编写

各个文件夹的作用：

• app.js文件用于全局JavaScript逻辑和应用生命周期管理。
• pages目录用于存放所有组件页面。
• common目录用于存放公共资源文件，比如：媒体资源，自定义组件和JS文件。
• resources目录用于存放资源配置文件，比如：全局样式、多分辨率加载等配置文件。
• i18n目录用于配置不同语言场景资源内容，比如：应用文本词条，图片路径等资源。
• share目录用于配置多个实例共享的资源内容，比如：share中的图片和JSON文件可被default1和default2实例共享。

pages

一个文件夹对应一个页面。并且要在config.json文件下对路由进行配置

// pages数组内排在首位的 代表展示的首页
"js": [
  {
    "pages": [
      "pages/demo/demo",    // 对应demo.hml 
      "pages/index/index"
    ],
    "name": "default",
  }
]

i18n

内部存放的是.json文件，在页面中使用的时候直接通过 $t('...') 来获取

// zh-CN.json
{
  "strings": {
    "app_bar": {
      "title": "标题"
    },
}

// index.hml
<text>
 {{ $t('strings.app_bar.title') }}  
 <!-- 标题 -->
</text>

组件相关

例如在 common 中创建 component 文件夹，存放公共组件。以tabbar组件为例

组件使用

通过element标签进行获取、使用

<!-- tabbar.hml -->
<toolbar>....</toolbar>


<!-- home.hml -->
<!-- 在页面的顶部通过element引入组件所在的地址 并且通过name属性取名 -->
<element name='tab-bar-com' src='../../common/component/tabbar/tabbar.hml'>
</element>

...

<div>
  ...
  <!-- 把组件放在页面需要的位置 -->
  <tab-bar-com></tab-bar-com>
</div>

父子组件传值

与vue类似，子组件通过props接收父组件的数据，父组件通过@获取子组件传递的数据

子组件tabbar

<!-- tabbar.hml -->
<toolbar style="position : fixed; bottom : 0px;" data='hello'>
    <toolbar-item icon='{{ iconurl }}' value='我的' on:click="handleClick"></toolbar-item>
</toolbar>

// tabbar.js
export default {
    props: ['iconurl'],   // 接收父组件传来的数据

    handleClick(e){
      // emit来广播给父组件 传递给父组件数据
      this.$emit('getItem', {
            title: e.target.attr.value
        })
    }

}

父组件

<!-- home.hml -->

<div>
<!-- 通过绑定属性的方式把数据传递给子组件 -->
<!-- 通过 @..='fn' 的方式获取子组件传递的数据 -->
  <tab-bar-com iconurl='https://....' @get-item='getTabbarItem'></tab-bar-com>
</div>

// home.js
export.default{
  // 获取子组件传来的数据
  getTabbarItem(item) {
    // 还有一层 detail
        console.log(item.detail.title) // 我的
    },
}