赞
踩
Java/JS卡片场景能力差异如下表所示:
场景 | Java卡片 | JS卡片 | 支持的版本 |
---|---|---|---|
实时刷新(类似时钟) | Java使用ComponentProvider做实时刷新代价比较大 | JS可以做到端侧刷新,但是需要定制化组件 | HarmonyOS 2.0及以上 |
开发方式 | Java UI在卡片提供方需要同时对数据和组件进行处理,生成ComponentProvider远端渲染 | JS卡片在使用方加载渲染,提供方只要处理数据、组件和逻辑分离 | HarmonyOS 2.0及以上 |
组件支持 | Text、Image、DirectionalLayout、PositionLayout、DependentLayout | div、list、list-item、swiper、stack、image、text、span、progress、button(定制:chart 、clock、calendar) | HarmonyOS 2.0及以上 |
卡片内动效 | 不支持 | 暂不开放 | HarmonyOS 2.0及以上 |
阴影模糊 | 不支持 | 支持 | HarmonyOS 2.0及以上 |
动态适应布局 | 不支持 | 支持 | HarmonyOS 2.0及以上 |
自定义卡片跳转页面 | 不支持 | 支持 | HarmonyOS 2.0及以上 |
综上所述,JS卡片比Java卡片支持的控件和能力都更丰富:
Java卡片:适合作为一个直达入口,没有复杂的页面和事件
JS卡片:适合有复杂界面的卡片
注册华为开发者账号:打开华为开发者联盟官网,使用手机号或邮箱注册账号,并实名认证
下载开发工具:DevEco Studio,下载链接DevEco Studio分布式应用开发平台
Alt+/
MyApplication:项目的项目名
External Libraries:项目中要导入的第三方jar包
Tools—>Device Manager中,登录账号
选择P40手机,点击右侧青色三角启动
点击编译器上方的绿色三角启动项目
MainAbility (界面)包含一个或多个MainAbilitySlice(子界面),MainAbilitySlice(子界面)包含要显示的内容
MainAbility是项目启动的第一个界面,但是界面里是不直接显示内容的,在界面里面展示的是子界面,我们也称之为切片,或者片段。在子界面里面可以放置内容显示
所有的模块,界面等信息,都会在这个文件中进行配置
鸿蒙应用启动之后,先解析config.json文件
config.json文件分为三个部分:
设计思路:
界面布局:在鸿蒙UI中提供了两种编写布局的方式
在此,我们用XML布局第一个页面,用代码布局第二个页面
打开src—>main—>resourses—>base—>layout下的ability_main.xml文件,创建一个文本和一个按钮
<?xml version="1.0" encoding="utf-8"?> <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center" ohos:orientation="vertical"> <Text ohos:id="$+id:text_helloworld" ohos:height="match_content" ohos:width="match_content" ohos:background_element="$graphic:background_ability_main" ohos:layout_alignment="horizontal_center" ohos:text="$string:mainability_HelloWorld" ohos:text_size="40vp" /> <Button ohos:id="$+id:but1" ohos:height="match_content" ohos:width="match_content" ohos:background_element="red" ohos:text_size="40fp" ohos:text="点我" /> </DirectionalLayout>
在包中新建一个Ability—>Empty Page Ability(Java),命名为SecondAbility,在Slice中会自动生成SecondAbilitySlice文件,SecondAbilitySlice文件代码编写如下:
package com.spring1227.myapplication; import ohos.aafwk.ability.Ability; import ohos.aafwk.content.Intent; import ohos.agp.components.DirectionalLayout; import ohos.agp.components.Text; import ohos.agp.utils.Color; public class SecondAbility extends Ability { @Override public void onStart(Intent intent) { super.onStart(intent); // super.setMainRoute(SecondAbilitySlice.class.getName());禁止使用xml文件 //创建一个布局对象 DirectionalLayout dl = new DirectionalLayout(this); //创建文本对象 Text t = new Text(this); //设置内容 t.setText("第二个页面"); //设置文字大小 t.setTextSize(55); //设置文本颜色 t.setTextColor(Color.BLUE); //把文本对象添加到布局中 dl.addComponent(t); //把布局添加到子界面中 super.setUIContent(dl); } }
在MainAbility中编写跳转关系
import ohos.agp.components.Button; import ohos.agp.components.Component; public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener { Button btu; @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); //找到按钮id btu = (Button)findComponentById(ResourceTable.Id_but1); //给按钮添加一个点击事件,点击后执行本类中onClick方法 btu.setClickedListener(this); } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); } @Override public void onClick(Component component) { //点击后要执行的代码 //跳转到第二个页面 if(component == btu){ //只有点击了这个按钮后才跳转 //跳转到哪(意图) Intent i = new Intent(); //包含了要跳转的页面信息 Operation operation = new Intent.OperationBuilder() .withDeviceId("")//要跳转到哪个设备 .withBundleName("com.spring1227.myapplication")//跳转到哪个应用,里面写包名 .withAbilityName("com.spring1227.myapplication.SecondAbility")//要跳转的页面 .build();//将上面的信息打包 //将打包后的operation设置到意图上 i.setOperation(operation); //跳转页面 startAbility(i); } } }
事件是可以被识别的操作
有了事件,组件就可以和用户交互
常见事件有:单击、双击、长按、滑动
接口名:ClickedListener
实例:点击“点我”按钮,按钮文字将变为“第一种单击事件写法”
MainAbilitySlice文件:
package com.spring1227.listenerapplication.slice; import com.spring1227.listenerapplication.ResourceTable; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.components.Button; import ohos.agp.components.Component; public class MainAbilitySlice extends AbilitySlice { @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); //第一种单击事件写法:定义实现类 //找到按钮 //完整写法:this表示本类对象(子界面对象) 在子界面中通过id找到相应组件 //this.findComponentById(ResourceTable.Id_but1);才是完整写法,this可以省略 //返回一个组件对象Component(所有组件的父类) //实际我们需要返回Button类,因此需要再向下转型 Button but1 = (Button)findComponentById(ResourceTable.Id_but1); //给按钮绑定一个单击事件 but1.setClickedListener(new MyListener()); } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); } } class MyListener implements Component.ClickedListener { //编写类作为接口的实现类 @Override public void onClick(Component component) { //component:所有组件的父类 //参数:被点击的组件对象 //访问子类中特有方法:向下转型 Button btu = (Button)component; btu.setText("第一种单击事件写法"); } }
ability_main.xml文件:
<?xml version="1.0" encoding="utf-8"?> <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center" ohos:orientation="vertical"> <Button ohos:id="$+id:but1" ohos:height="match_content" ohos:width="match_content" ohos:text="点我" ohos:text_size="200" ohos:background_element="red" /> </DirectionalLayout>
实例:点击“点我”按钮,按钮文字将变为“第二种单击事件写法”,文本框内文字变为“被点击了”
MainAbilitySlice文件:
package com.spring1227.listener2application.slice; import com.spring1227.listener2application.ResourceTable; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.components.Button; import ohos.agp.components.Component; import ohos.agp.components.Text; public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener { //直接将当前类当做接口的实现类 Text text1 = null;//设为成员变量,使onClick方法得以访问 @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); //第二种单击事件(常用!)写法:当前类作为实现类 //当点击一个按钮后需要操作其他对象时,用第二种,第一种太麻烦 //找到组件 Button but1 = (Button)findComponentById(ResourceTable.Id_but1); text1 = (Text)findComponentById(ResourceTable.Id_text1); //给按钮绑定一个单击事件 //当事件触发时,执行本类中的onClick方法 but1.setClickedListener(this); text1.setClickedListener(this); } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。