鸿蒙真的是套壳吗?HarmonyOS应用开发初体验,Java原生和JavaScript的mvvm开发

初探寻鸿蒙os的应用开发

本期视频已发布到bilibili

注意是应用开发,没错码农(应用开发)一般关注这个就行了

image-20200915230803354

IDE

点击应用开发以后,点击链接下载IDE,DevEco Studio是基于IDEA开源版魔改的,别再说什么抄袭Androidstudio了,使用这个工具没毛病,快速适应,gradle(gradle是打包构建工具,和Maven这种类似)的下载终于快了一次了

安装过程没什么好说的,就是如果你C盘不够了,安装SDK的时候可以先不确定,进入IDE以后修改安装位置再安装

image-20200915231429357

SDK Tools里面有个预览插件,能够实时预览效果,目前只支持手表

image-20200915234249140

对于其他的TV项目,想要编译查看效果还必须注册一个华为账号,登陆以后远程预览,可以点击Tools/HVD Manager来查看

image-20200915234526042

点击运行以后就是这个效果,每次运行有一个小时的限制

image-20200915234722123

项目结构

目前的应用开发和传统的安卓应用开发没什么区别,都是原生+js的混合,当然底层是他们重写的,设计成这个模式也是为了开发者能够无痛学习,没什么好说的

image-20200915231551443

当然你也完全可以使用JavaScript开发这个应用,只要你使用过vue这类mvvm框架应该是没什么难度的,想要实现复杂的应用还得上原生,原生还是用的Java语言进行开发

image-20200915232108278

这个原生应用的文件结构够熟悉吧,和集成JavaScript框架weex、react都差不多

image-20200915232425940

应用初探

Lite Wearable

首先我们创建一个Lite Wearable应用来看一看,因为只有他能够实时预览

image-20200916104211559

我们主要编辑entry/src/main/js/default/pages下面的内容

image-20200916104459858

这个结构和小程序差不多,我们在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中使用它

<div class="container">
    <list class="todo-wraper">
        <list-item for="{{todolist}}" class="todo-item">
            <text class="todo-title">{{$item.title}}</text>
            <text class="todo-title">{{$item.date}}</text>
        </list-item>
    </list>
</div>

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

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

<DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
                   ohos:width="match_parent"
                   ohos:height="match_parent"
                   ohos:orientation="vertical">
<ListContainer
        ohos:id="$+id:list"
        ohos:width="match_parent"
        ohos:height="match_parent"/>
</DirectionalLayout>

一个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容器

<DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
                   ohos:width="match_parent"
                   ohos:height="56vp"
                   ohos:orientation="horizontal">
    <Text
            ohos:id="$+id:left_content"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:weight="1"
            ohos:text_alignment="center"
            ohos:text_size="16fp"
            ohos:text="left"
    />

    <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"
    />

</DirectionalLayout>

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

public class ListItemProvider extends RecycleItemProvider {
    private ArrayList<String> 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

说点话

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

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

image-20200916112955903

posted @ 2020-09-17 09:31  lookroot  阅读(7397)  评论(25编辑  收藏  举报