HarmonyOS鸿蒙Next中关于JS UI应用开发的几个问题求助

HarmonyOS鸿蒙Next中关于JS UI应用开发的几个问题求助 在文档中https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-framework-syntax-js-0000000000611432,将应用开发分为轻量级智能穿戴开发(Lite Wearable)和常规JS UI开发(我的理解是包括智能穿戴Wearable,TV,以及后续可能出现的Phone之类)。在开发过程中,发现Lite Wearable的语法支持更少(可能是处理器、内存等因素的限制,比如在Lite Wearable的开发指南中,只有10个,常规开发中则有21个。)现在我的问题是,canvas的API,虽然在编辑器和文档中,都不支持Lite Wearable。但在开发的过程中,发现实际上canvas的API,Lite Wearable也能支持(或者是支持一部分),这种区别的来源是什么,也就是说更精确的语法支持在哪能找到?比如canvas中哪些API是支持Lite Wearable的,哪些是不支持的?最初决定canvas API哪些支持,哪些不支持的人可以给个说明吗。甚至有没有其他文档中没有提到、编辑器提示不支持的组件,实际上Lite Wearable是支持的呢?会不会出现在previewer和模拟上Lite Wearable可以使用canvas,但是实际设备中并不支持的情况呢?

JS 中CSS的动态绑定只支持行内style属性的绑定,那么动画的@keyframe里面用到的参数需要进行动态绑定,目前能做到吗?

export default {
  data: {
    show: true,
  },
  onShow() {
    const cv = this.$refs.canvas;
    const ctx = cv.getContext('2d');
    this.drawPoint(ctx, this.color.red);
  },
  drawPoint(ctx, color) {
    ctx.fillStyle = color;
    ctx.fillRect(223, 8, 3, 3);
    ctx.fillRect(223, 449, 3, 3);
    ctx.fillRect(4, 228, 2, 2);
    ctx.fillRect(444, 228, 3, 3);
  }
}

但是并没有渲染这个div,因为没有背景色。但是如果去掉if语句就能正常显示yellow背景。这是什么原因呢?

还有我发现屏幕的previewer以及模拟器,实际圆形屏幕的圆心位置在225,220处,实际屏幕宽度和高度只有444像素,并不是css中的上下和左右长度都是454。请问这是previewer和模拟器的误差,还是说实际设备也是一样的?

还有目前支持async和await语法吗,我在网上找到的例子,在node里可以正常运行,但是在js UI中没有反应。

async function test() {
  console.log('Hello')
  await sleep(1000)
  console.log('world!')
}

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms))
}

test()

更多关于HarmonyOS鸿蒙Next中关于JS UI应用开发的几个问题求助的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

开发者你好,

  1. 开发指南中明确说明支持表示支持度已经成熟,明确不支持的表示不能确保正常使用,不承诺可用。请参看开发指南和API

  2. 目前还不支持动态绑定。

  3. 不要在根组件上使用if="{{show}}",可以在子组件上使用。

  4. 直接在227,227坐标处画矩形,刚好就在中心位置,模拟器没有问题。

ctx.fillStyle = "#ff0000";
ctx.fillRect(227, 227,30, 30);
  1. 支持asyncawait语法,使用时需要在js文件头部加入
const injectRef = Object.getPrototypeOf(global) || global;
injectRef.regeneratorRuntime = require('@babel/runtime/regenerator');

更多关于HarmonyOS鸿蒙Next中关于JS UI应用开发的几个问题求助的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


赞,

基本信息

  • 项目名称: 示例项目
  • 项目状态: 进行中
  • 负责人: 张三
  • 开始时间: 2023-01-01
  • 结束时间: 2023-12-31

项目简介:这是一个示例项目,用于演示如何将HTML内容转换为Markdown格式。

你好,请问这两行代码是什么意思?虚心求教

const injectRef = Object.getPrototypeOf(global) || global;
injectRef.regeneratorRuntime = require('@babel/runtime/regenerator');

如果我现在想让js支持commonjs的语法是不是也可以类似这样引用一个babel的插件支持下,

亲爱滴开发者 ,这个问题已经在处理中啦,稍后答复你哟 ,么么哒

HarmonyOS鸿蒙Next中,JS UI应用开发主要基于ArkUI框架,使用JavaScript或TypeScript进行开发。以下是几个常见问题的解答:

  1. JS UI框架与ArkUI的关系:JS UI框架是ArkUI的一部分,ArkUI是HarmonyOS的UI开发框架,支持JS和TS语言。JS UI框架提供了声明式UI开发方式,开发者可以通过组件化方式构建界面。

  2. JS UI应用的生命周期:JS UI应用的生命周期包括onCreateonDestroyonShowonHide等。onCreate在应用创建时调用,onDestroy在应用销毁时调用,onShowonHide分别在应用显示和隐藏时调用。

  3. JS UI中的组件使用:JS UI提供了丰富的组件,如TextButtonImage等。开发者可以通过声明式语法使用这些组件,例如<Text>Hello World</Text>

  4. JS UI中的事件处理:JS UI支持事件绑定,如onClickonTouch等。开发者可以通过@符号绑定事件,例如<Button @click="handleClick">Click Me</Button>

  5. JS UI中的状态管理:JS UI支持状态管理,开发者可以通过@State@Prop@Link等装饰器管理组件状态。例如,@State用于管理组件内部状态,@Prop用于父组件向子组件传递状态。

  6. JS UI中的路由管理:JS UI支持路由管理,开发者可以通过router模块进行页面跳转。例如,router.push({ uri: 'pages/PageA' })用于跳转到PageA页面。

  7. JS UI中的样式管理:JS UI支持样式管理,开发者可以通过classstyle属性设置组件样式。例如,<Text class="textStyle">Hello World</Text>

  8. JS UI中的网络请求:JS UI支持网络请求,开发者可以通过fetchaxios进行网络请求。例如,fetch('https://api.example.com/data')

  9. JS UI中的本地存储:JS UI支持本地存储,开发者可以通过Storage模块进行数据存储。例如,Storage.set({ key: 'name', value: 'HarmonyOS' })

  10. JS UI中的调试工具:JS UI支持使用DevEco Studio进行调试,开发者可以通过DevEco Studio的调试工具进行代码调试和性能分析。

以上是HarmonyOS鸿蒙Next中JS UI应用开发的几个常见问题解答。

在HarmonyOS鸿蒙Next中进行JS UI应用开发时,常见问题包括:

  1. UI布局:使用hmlcss文件进行布局,确保组件层级和样式正确。
  2. 数据绑定:通过{{}}语法实现数据与UI的绑定,确保数据更新时UI同步刷新。
  3. 事件处理:在js文件中定义事件处理函数,确保事件绑定正确。
  4. 组件使用:熟悉常用组件如<text><image>等,确保组件属性和事件使用正确。
  5. 生命周期:理解onInitonReady等生命周期函数,确保在合适时机执行逻辑。
  6. 调试工具:使用DevEco Studio的调试工具,确保问题定位和解决效率。

建议参考官方文档和示例代码,确保开发顺利进行。

回到顶部