鸿蒙适配问题集合

[crazyonebyone]

一个可更改颜色的icon组件

鸿蒙 image 组件支持使用svg图片为路径

<image src="./resource/success.svg"></image>

但是这样展示的 svg 大小是根据 svg 里面预设的宽高显示，我们无法控制大小，所以需要将 svg 文件里面写死的 width ,以及 height 删除，然后设置 image 样式的宽高即可

然后可以利用 image-fill 样式属性配置自定义颜色，需要注意的是，svg图片文件内的fill属性颜色值在渲染时将被替换为 image-fill 所配的颜色值，且仅对 svg 图片内显示声明的 fill 属性生效。所以要检查一下svg是否有fill属性，如果没有便不会生效，可以手动加一个

---

自定义鸿蒙组件data获取props问题

我们在做自定义组件时，会在js中获取 props 值作为 data 的默认值，此时 data 的定义我们需要使用 Function。
错误示范：

export default {
  data: {
    someData: this.type
  },
  props: [
    'type',
    'id',
    'cls',
    'style'
  ]
}

正确示范：

export default {
  data() { 
    return {
      someData: this.type
    }
  },
  props: [
    'type',
    'id',
    'cls',
    'style'
  ]
}

[jiaozitang]

计算属性不能使用箭头函数

由于计算属性依赖 this，因此不能使用箭头函数代替普通函数，否则将导致报错。

button css color/border-radius 不生效

用 text-color 代替 color
如：

button {
  background-color: #f8f8f8;
  text-color: #000;
}

class 属性通过变量赋值，该变量如果是 'class1 class2'，在渲染时只有 class1 会生效。

自定义组件的参数格式是 hover-time 或者 hoverTime 时，组件都无法获取到值，必须是 hovertime 的格式才可以

查阅文档后，发现解决方案是：camelCase (驼峰命名法) 的 prop 名，在外部父组件传递参数时需要使用 kebab-case (短横线分隔命名) 形式

自定义组件 Button 拿不到 value 值

目前只能通过 props 传参 value

自定义组件点击事件无法触发，hover-class有时候会连续触发

鸿蒙不支持宽度自适应，默认宽度就是100%

鸿蒙不支持通过 line-height 撑起高度

[xueshuai]

Cannot read property 'addEntry' of undefined 错误处理

运行 taro build --type harmony --watch 后，出现 Cannot read property 'addEntry' of undefined 错误是由于 taro 命令指向的不是当前 taro 项目下的命令，可能是全局命令，这是只要使用绝对路径明确 build 命令是使用当前 Taro 项目下即可。

/Users/shuaixue/VSCodeProjects/taro/packages/taro-cli/bin/taro build --type harmony --watch

[AdvancedCat]

自定义组件调用 this.$emit 后 Taro 组件读取 e.detail 为空的问题

我在封装video组件时，直接将鸿蒙video组件作为自定义组件的根部，如下：

// hml
<video id="{{id}}" @timeupdate="timeupdateCb"></video>
// js
timeupdateCb(){
  this.$emit('timeupdate', {id: this.id})
}
// Taro Component
<Video onTimeUpdate={this.timeupdate}></Video>

经调试，Taro组件的 this.timeupdate(e) 回调触发后 e.detail 为 undefined

如果遇到类似问题，可以尝试将鸿蒙 video 组件用 div 包裹一下即可，如下：

<div>
  <video id="{{id}}" @timeupdate="timeupdateCb"></video>
</div>

[Chen-jj]

开发组件、API 时请优先采用工具函数

组件

taro-harmony/src/components/components-harmony/utils

• createOption：组件基类，封装 $emit 为 $trigger，调用 $trigger 发射事件不需要再传递 id
• covertHex3ToHex6：把十六进制的颜色值从 3 位解析为 6 位，如 #345 -> #334455

API

@tarojs/shared

• isNumber/isString/isUndefined...：类型判断工具函数

taro-harmony/src/apis/utils

• noop：空函数
• unsupport：打印不支持某方法
• getParameterError：函数参数检测
• upperCaseFirstLetter
• shouleBeObject
• validateOptions
• callAsyncSuccess：调用异步方法的 resolve、success、complete
• callAsyncFail：调用异步方法的 reject、fail、complete

[510774449]

button组件中文本值无法生效的问题

使用Taro编写button组件时，button中的value，即button中的文本值无法生效。
<button type="text" value="ADD"></button>
经过测试，发现是taro-harmony中的标准组件button没有实现value属性。

[xueshuai]

在鸿蒙 IDE DevEco 中，使用 Remote device 设备，运行出现 entry-default build js failed 错误问题处理

此问题先依次检查程序运行环境：

1. 是否使用 feat/harmony 分支下的 taro 命令创建 taro demo

对于能够正常使用 taro 命令 build 的同学来说可以忽略此条。但是有些同学使用的是下面这样的 绝对路径的 taro命令进行 build，
比如 /Users/xxx/VSCodeProjects/taro/packages/taro-cli/bin/taro build --type harmony --watch
则创建 taro 应用的时候也应使用这个类型的命令来创建 demo
/Users/xxx/VSCodeProjects/taro/packages/taro-cli/bin/taro init

2. 是否鸿蒙IDE为最新beta版本。正常的release版本对api v6和api v7支持不友好

在做我们的鸿蒙适配需求的时候，要使用 DevEco Studio 3.0 Beta1 版本的 IDE。不然有些 api 会不支持。下载

3. 鸿蒙IDE中是否下载和配置相应版本的SDK

此项特别是开发 api 适配的同学要注意的。
下载所需要的 sdk 版本

配置 sdk 版本
在 File -> Project Structute -> Module -> entry 中配置自己需要的 Compile SDK version 和 Compile API version

Compile SDK version 7
Compile API version 7

4. 最后需要注意的就是，在 /taro/taro-harmony/src/program.ts 中增加所使用的鸿蒙模块的 external

    this.ctx.modifyWebpackChain(({ chain }) => {
      chain.merge({
        externals: {
          '@system.app': 'commonjs @system.app',
          '@system.router': 'commonjs @system.router',
          '@ohos.data.storage': 'commonjs @ohos.data.storage',
          '@ohos.net.http': 'commonjs @ohos.net.http',
          '@ohos.request': 'commonjs @ohos.request',
          '@ohos.net.webSocket': 'commonjs @ohos.net.webSocket'
        }
      })
    })
  }```

[jiaozitang]

远程真机指向的文档，https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404#section837891802519，直接忽略第一步就行。