83 Star 466 Fork 155

OpenHarmony / ace_lite_jsfwk

关于Lite_wearable、Wearable和TV的兼容问题

Requirement
Done
yunlongYoung  Opened this issue

该问题是怎么引起的?

Lite_wearable中判断方向使用的是onSwipe事件,但移植到Wearable上时,不存在onSwipe事件,只有onTouch的4个事件,这样导致开发出的应用,无法移植到Wearable上。

虽然Lite Wearable和Wearable的定位本就不同,但其实这种移植应该非常简单。直接在Wearable的框架中封装一个类似的onSwipe事件就行。

当然这不是个好的方法,因为不兼容的地方很多,都用这种方法会让wearable变得混乱。

所以我建议,做一个兼容方面的检查,对某些能兼容的,做自动转换的处理,例如对onswipe自动转换成onTouchStart和onTouchEnd。

目前的紧急性比较低,不是很重要,后续有时间的话再完善。

重现步骤

报错信息

Attachments
8122337 tujie harmonyos 1607610654 total 3 participants

Comments (13)

8122337 tujie harmonyos 1607610654
张荣超 2020-11-02 21:44

@yunlongYoung
onSwipe 应该是支持的哈

@piggyguy_jdx 请问一下,我在LiteWearable平台上使用JS编写的应用,是不是只要在config.json中的deviceType里添加"wearable"或"tv",就可以在智能手表或智慧屏上运行了呢?

piggyguy_jdx 2020-11-02 21:45 member

swipe 事件轻富目前没有统一吗?@cyz-hw

piggyguy_jdx 2020-11-02 21:50 member

@piggyguy_jdx 请问一下,我在LiteWearable平台上使用JS编写的应用,是不是只要在config.json中的deviceType里添加"wearable"或"tv",就可以在智能手表或智慧屏上运行了呢?

@zhang-rongchao
不行,轻富在工程配置上目前是不统一的,比如富目前需要有java的shell,而瘦是没有的,所以DevEco工程不能通用,还不能做到同一个工程支撑两套开发。
但你轻量上的代码文件是可以直接复用到 wearable 或 tv 类型的工程里的。

8122337 tujie harmonyos 1607610654
张荣超 2020-11-02 22:48

@zhang-rongchao
不行,轻富在工程配置上目前是不统一的,比如富目前需要有java的shell,而瘦是没有的,所以DevEco工程不能通用,还不能做到同一个工程支撑两套开发。
但你轻量上的代码文件是可以直接复用到 wearable 或 tv 类型的工程里的。

@piggyguy_jdx 我试过了,运动手表上使用JS编写的代码,直接复用到智能手表上,界面显示会不正常。

piggyguy_jdx 2020-11-03 09:11 member

@piggyguy_jdx 我试过了,运动手表上使用JS编写的代码,直接复用到智能手表上,界面显示会不正常。

@张荣超

具体是哪些组件或元素显示不正常?(请留意一些不兼容的组件或属性的使用,这样的情况应该很少)。

yunlongYoung 2020-11-03 09:24

@张荣超
具体是哪些组件或元素显示不正常?(请留意一些不兼容的组件或属性的使用,这样的情况应该很少)。

@piggyguy_jdx

我试了下,onswipe事件,在智能穿戴里是不能用的。

<div class="container">
    <text class="title" onswipe="onSwipe">
        Hello {{title}}
    </text>
</div>
.container {
    justify-content: center;
    align-items: center;
    width: 454px;
    height: 454px;
}
.title {
    text-align: center;
    width: 200px;
    height: 100px;
}
export default {
    data: {
        title: 'World'
    },
    onSwipe(e){
        this.title='Friend!';
    },
}

显示是正常的,但是滑动不会变化文字。

yunlongYoung 2020-11-03 09:40

@piggyguy_jdx

还有个问题,就是canvas,在轻里面,可以在onReady中获取context。

	onReady() {
		context = this.$refs.canvas.getContext('2d');
	},
	onShow() {
	},

而在富里面,只能在onShow里面获取context

	onReady() {
	},
	onShow() {
    		context = this.$refs.canvas.getContext('2d');
	},

但文档里说了不支持在onReady中调用,这种行为也不统一、兼容。
输入图片说明

还有就是在官方文档中,轻设备中甚至没有写可以使用canvas组件,但是我在测试的时候发现,是可以用的(仅支持部分方法),那么实际设备上,canvas可以用吗?

piggyguy_jdx 2020-11-03 09:52 member

@piggyguy_jdx
还有个问题,就是canvas,在轻里面,可以在onReady中获取context。

onReady() {
context = this.$refs.canvas.getContext('2d');
},
onShow() {
},

而在富里面,只能在onShow里面获取context

onReady() {
},
onShow() {
context = this.$refs.canvas.getContext('2d');
},

但文档里说了不支持在onReady中调用,这种行为也不统一、兼容。
输入图片说明
还有就是在官方文档中,轻设备中甚至没有写可以使用canvas组件,但是我在测试的时候发现,是可以用的(仅支持部分方法),那么实际设备上,canvas可以用吗?

@yunlongYoung

swipe的兼容性问题内部已经在确认了。
canvas API 轻量级还没有正式对外 release,所以文档中没有体现。你提到的问题我们也看一下

yunlongYoung 2020-11-03 10:00

@piggyguy_jdx

昨晚我们测试了,wearable移植到TV,基本能显示正常。只需要把config.json里的autoDesignWidth改成true,删除上面一行的designWidth,然后电视上左半部分可以显示手表原来的界面。

但是TV移植到wearable,显示可能会有问题。

<div class="container">
    <text class="title">
        {{ $t('strings.hello') }} {{title}}
    </text>
</div>
.container {
    width: 720px;
    height: 480px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.title {
    width: 200px;
    height: 200px;
    font-size: 48px;
}
export default {
    data: {
        title: ""
    },
    onInit() {
        this.title = this.$t('strings.world');
    }
}

同样仅仅是修改config.json里的autoDesignWidth为true,删除上面一行的designWidth,但这次显示效果不如wearable到tv。

输入图片说明

看起来这个autoDesignWidth并没有考虑wearable是圆形,需要计算内接矩形的最大宽度,以及定位的问题,而字体也没有在可用字号里进行缩放。

piggyguy_jdx 2020-11-03 10:02 member

@piggyguy_jdx
昨晚我们测试了,wearable移植到TV,基本能显示正常。只需要把config.json里的autoDesignWidth改成true,删除上面一行的designWidth,然后电视上左半部分可以显示手表原来的界面。
但是TV移植到wearable,显示可能会有问题。

<div class="container">
<text class="title">
{{ $t('strings.hello') }} {{title}}
</text>
</div>
.container {
width: 720px;
height: 480px;
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
width: 200px;
height: 200px;
font-size: 48px;
}
export default {
data: {
title: ""
},
onInit() {
this.title = this.$t('strings.world');
}
}

同样仅仅是修改config.json里的autoDesignWidth为true,删除上面一行的designWidth,但这次显示效果不如wearable到tv。
输入图片说明

@yunlongYoung

富到轻移植就不太可控了,毕竟轻只是富的子集,并且目前轻量级还没有支持%等部分自适应能力,所以这样移植显示上容易有问题。

yunlongYoung 2020-11-03 10:06

@yunlongYoung
富到轻移植就不太可控了,毕竟轻只是富的子集,并且目前轻量级还没有支持%等部分自适应能力,所以这样移植显示上容易有问题。

@piggyguy_jdx
这种wearable应该和tv是同样的语法集啊。不是从tv到lite wearable。

难道wearable本来和tv不是一个语法集吗?

根据您刚才的说法,那我们在编写css时,考虑到移植性,是否不应该再用px这种物理像素,而是用vp,或者%?

基础概念
HarmonyOS 重新定义了界面换算单位,使用虚拟像素(virtual pixels, vp)作为一台设备针对应用而言所具有的虚拟尺寸, 是定义应用内参数尺寸的度量单位。虚拟像素是一种可灵活使用和缩放的单位,它与屏幕像素的关系是 1vp 约等于 160dpi 屏幕密度设备上的 1px。在不同密度的设备之间,HarmonyOS 会针对性的转换设备间对应的实际像素值。

另外,针对文本,HarmonyOS 提供了字体像素(font-size pixels, fp)的单位。

字体像素大小默认情况下与vp相同,但当用户在设置中修改了字体显示大小,那么字体大小则会在vp的基础上乘以 scale 系数。即默认情况下 1 fp = 1vp,如果设置了字体显示大小 1fp = 1vp * scale。

我在文档里搜到了这段话,应该是转换的时候,系统自动做个scale的转换。

piggyguy_jdx 2020-11-03 10:15 member

@piggyguy_jdx
这种wearable应该和tv是同样的语法集啊。不是从tv到lite wearable。是wearable本来和tv不是一个语法集吗?

@yunlongYoung

sorry, 看错了,我以为 是 tv 到 lite呢。
tv 和 wearable都是富,我理解应该是一致的范围,目前还没有开源,我帮忙你确认一下。

另外,布局上你可以试一下通过 app.getInfo 接口来运行时动态改变最外层容器尺寸试一下效果。

JS:
输入图片说明

输入图片说明

HML:
<div class="container" style="width: {{size.width}}; height: {{size.height}};">

+1 1
piggyguy_jdx 2020-11-03 10:17 member

: 智能表也是全量的子集.
查看文档时请注意支持的设备说明:

输入图片说明

+1 1

Sign in to comment

Assignees
Labels
Not set
Projects
Milestones
Branches
Planed to start
Not set
Planed to end
Not set
Top level
Priority
C++
1
https://git.oschina.net/openharmony/ace_lite_jsfwk.git
git@git.oschina.net:openharmony/ace_lite_jsfwk.git
openharmony
ace_lite_jsfwk
ace_lite_jsfwk

Search