HarmonyOS 应用开发记录

前言

• 采用 JS + Java 混合开发模式
• 通过 JS、CSS、HML 描述页面
• Java 提供系统能力接口供 JS 调用
• 类似于客户端开发时，JS 通过 JSB 调用 Java 接口

遇到的坑

1. 页面顶部的 TitleBar 去不掉

• 如图：
  

• 官方文档也没提咋去，论坛里得知：

// 在 config.json 中的 module 里如下配置
    "metaData": {
      "customizeData": [
        {
          "name": "hwc-theme",
          "value": "androidhwext:style/Theme.Emui.NoTitleBar"
        }
      ]
    }

2. tab-bar 底部的下划线去不掉

• 如图：

• 查看组件文档，没有看见哪里可以设置去掉这条线
• 查看Tabs组件开发指导的时候，发现如图可以去掉：
  
• 猜测是：通过样式布局将下划线挤出容器，然后被裁剪掉，间接隐藏下划线

3. image组件使用svg格式图片显示不出来

• 通过官方文档得知：
  
• 因为 svg 中指定了长宽，因此只显示了左上角，且恰好左上角透明，看上去就像是没显示出来
• 解决方式：去掉 svg 中指定的长宽，让其长宽以 image 组件为准，如图：
  

4. 动态设置 image 中的 src 属性时显示不出图片

• 问题描述如下：

// 正确显示
<image src="../../common/images/profile-active.svg"></image>
// 显示不出
<image src="{{ '../../common/images/profile-active.svg' }}"></image>

• 解决方法：

// 正确显示
<image src="{{ '/common/images/profile-active.svg' }}"></image>

• 推测：在模板编译时，会将所有相对路径转换成绝对路径，因此使用插值表达式或者JS代码在运行时修改路径相关属性时需要直接设置成绝对路径

5. 不能 for 循环动态加载子组件

• vue 中动态加载子组件示例如下：
  
• 在 HarmonyOS 官方文档没有看到类似用法，但可以通过 for + if else 来替代，如下：

<div for="list">
	// 可复用部分
    <text>{{ $item.text }}</text>
    // 不可复用部分用 if/else 进行差异化
    <comp1 if="{{ $idx==0 }}"></comp1>
    <comp2 elif="{{ $idx==1 }}"></comp2>
    <comp3 else></comp3>
<div>

6. 在 list-item 上绑定的 @click 事件，每次单击会触发两次

• 解决方法：用div把 list-item里面的内容包起来，再将事件绑定在 div 上，如图：
  

7. 使用本地模拟器出现各种问题

• 比如，JS调用PA失败、打印log无法查看、获取deviceType 为 unknowType 等等问题
• 解决方法：使用远程模拟器，如下：
  

8. console.log 跟浏览器中的方法存在差异

• 在浏览器中的 console.log，可以接收多个参数进行输出，如下：
  
• 在Harmony JS 中，只能接收一个参数输出，如下：