前言

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

遇到的坑

1. 页面顶部的 TitleBar 去不掉

  • 如图：

    HarmonyOS 应用开发记录_前端

  • 官方文档也没提咋去，论坛里得知：
// 在 config.json 中的 module 里如下配置
    "metaData": {
      "customizeData": [
        {
          "name": "hwc-theme",
          "value": "androidhwext:style/Theme.Emui.NoTitleBar"
        }
      ]
    }

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

  • 如图：

HarmonyOS 应用开发记录_下划线_02

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

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

  • 通过官方文档得知：
    HarmonyOS 应用开发记录_解决方法_04
  • 因为 svg 中指定了长宽，因此只显示了左上角，且恰好左上角透明，看上去就像是没显示出来
  • 解决方式：去掉 svg 中指定的长宽，让其长宽以 image 组件为准，如图：
    HarmonyOS 应用开发记录_下划线_05

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 应用开发记录_java_06
  • 在 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 上，如图：
    HarmonyOS 应用开发记录_java_07