Java原生和JavaScript的mvvm开发

最新推荐文章于 2022-11-17 09:54:52 发布

福伴

最新推荐文章于 2022-11-17 09:54:52 发布

阅读量218

点赞数

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/lookroot/p/13683377.html

本文详细介绍了使用鸿蒙系统进行应用开发的过程，包括定义数据结构、界面布局、使用原生和JavaScript混合开发模式等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个结构和小程序差不多，我们在index.js中定义一个属性

export default {
data: {
todolist: [{
title: ‘刷leetcode’,
date: ‘2020-06-25 10:00:00’,
}, {
title: ‘看电影’,
date: ‘2020-06-27 20:00:00’,
}],
}
}
在index.html中使用它

点击运行项目，可以在右边实时看到预览效果

image-20200916104622601

app.js主要就是应用的生命周期，不得不说这个IDE代码提示还是做的很好地

image-20200916104706478

TV ability
接着我们创建一个原生的TV应用，选择一个List的模板

image-20200916104934085

然后我们在HVD manager中启动一个TV模拟器，此时点击运行项目就有个设备可以选择了

image-20200916105502562

运行效果，修改代码以后不是实时预览的，必须要重启项目，不知道是我的网络问题还是他服务器问题，不是很流畅

image-20200916105651170

接下看下代码，首先是MainAbility这个没什么好说的就和activity是一样的

public class MainAbility extends Ability {
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setMainRoute(MainAbilitySlice.class.getName());
}
}
在src\main\resources\base\layout下放置页面文件,这个也是一样的里面嵌套了一个ListContainer

一个Page可以由一个或多个AbilitySlice(可以理解为片段和组件)构成,setMainRoute决定应用的默认AbilitySlice,这里他选择的是MainAbilitySlice，我们看下MainAbilitySlice

public class MainAbilitySlice extends AbilitySlice {
private ListHolder listHolder;

@Override
public void onStart(Intent intent) {
    listHolder = new ListHolder(this);
    setUIContent(listHolder.createComponent());
}

@Override
public void onActive() {
    super.onActive();
}

@Override
public void onForeground(Intent intent) {
    super.onForeground(intent);
}

}
在onStart中指定加载的页面内容，这里选择的ListHolder，我们看下ListHolder

public class ListHolder {
private static final String TAG = “ListHolder”;

private AbilitySlice mSlice;

private ComponentContainer mRootLayout;

private ListContainer listContainer;

private ListItemProvider listItemProvider;

public ListHolder(AbilitySlice abilitySlice) {
    mSlice = abilitySlice;
    listItemProvider = new ListItemProvider(abilitySlice);
}

public ComponentContainer createComponent() {
    Component mainComponent = LayoutScatter.getInstance(mSlice).parse(ResourceTable.Layout_ability_main, null, false);
    if (!(mainComponent instanceof ComponentContainer)) {
        return null;
    }
    mRootLayout = (ComponentContainer) mainComponent;
    listContainer = (ListContainer) mRootLayout.findComponentById(ResourceTable.Id_list);
    listContainer.setItemProvider(listItemProvider);
    return mRootLayout;
}

}
在createComponent中我们拿到list这个组件并填充具体的Item内容

ListContainer页面文件中是两个Text容器

<Text
        ohos:id="$+id:right_content"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:weight="1"
        ohos:text_alignment="center"
        ohos:text_size="16fp"
        ohos:text="right"
/>

list中具体的内容是通过listContainer.setItemProvider(listItemProvider);设置的，我们看下ListItemProvider

public class ListItemProvider extends RecycleItemProvider {
private ArrayList data = new ArrayList<>();
private AbilitySlice mSlice;

ListItemProvider(AbilitySlice abilitySlice) {
    mSlice = abilitySlice;
    for (int i = 0; i < 10; ++i) {
        data.add("test" + i);
    }
}

@Override
public long getItemId(int i) {
    return 0;
}

@Override
public int getCount() {
    return data.size();
}

@Override
public Component getComponent(int position, Component convertView, ComponentContainer parent) {
    Component component = LayoutScatter.getInstance(mSlice).parse(ResourceTable.Layout_list_item, null, false);
    if (!(component instanceof ComponentContainer)) {
        return null;
    }
    ComponentContainer rootLayout = (ComponentContainer) component;
    Text leftText = (Text) rootLayout.findComponentById(ResourceTable.Id_left_content);
    leftText.setText(String.valueOf(position));
    Text rightText = (Text) rootLayout.findComponentById(ResourceTable.Id_right_content);
    rightText.setText(data.get(position));
    return component;
}

}
在getComponent设置具体的内容，好的基本看完整个结构了，我觉得会原生开发的同学上手应该没啥问题

TV JS
最后看下这个原生和JavaScript结合

image-20200916111833748

看下项目结构，其实在前面是说过的和传统的安卓应用集成weex、react这类是很相似的，不过他官方就直接带这个这个模式，未来的开发的坑肯定更少，毕竟很多人都体会过集成weex、react的痛

image-20200916111954028

看到i18n，看来是走国际化道路啊，然后可以直接使用前端来编写页面，需要原生拓展的地方再编写原生

官方还提供了完整的示例

image-20200916112619094

说点话
最近鸿蒙挺火热的，我记得上次鸿蒙刚出的时候也火了一段时间，但是因为没有拿出真凭实绩的东西，遭到很多人的抨击，这一次拿出东西来了，又有很多人说啊这个妥妥的抄袭，我觉得真的没有必要，他这样设计的目的就是为了让更多的开发者能够轻松上手，毕竟一个应用生态是一个系统最重要的地方。

鸿蒙我觉得优势就是起步晚，可以吸收很多优秀的设计，而且最突出的就是一体的生态，不管是物联网还是手机、电脑，如果将来鸿蒙真的是实现运行到这些平台上，跨平台开发和应用通信、数据同步、权限控制都是非常方便的东西，毕竟现在的华为生态里面跨端协同也是做得非常好的，这一套颇有苹果那个味道，我个人还是支持，希望国内能够真的有一套自己的东西
深圳网站优化www.zg886.cn