鴻蒙真的是套殼嗎？HarmonyOS應用開發初體驗，Java原生和JavaScript的mvvm開發

時間 2020-09-18

標籤鴻蒙 harmonyos 應用開發體驗 java 原生 javascript mvvm 欄目 Java 简体版

原文原文鏈接

初探尋鴻蒙os的應用開發

本期視頻已發佈到bilibilijavascript

注意是應用開發，沒錯碼農（應用開發）通常關注這個就好了html

IDE

點擊應用開發之後，點擊連接下載IDE,DevEco Studio是基於IDEA開源版魔改的，別再說什麼抄襲Androidstudio了，使用這個工具沒毛病，快速適應，gradle（gradle是打包構建工具，和Maven這種相似）的下載終於快了一次了前端

安裝過程沒什麼好說的，就是若是你C盤不夠了，安裝SDK的時候能夠先不肯定，進入IDE之後修改安裝位置再安裝vue

SDK Tools裏面有個預覽插件，可以實時預覽效果，目前只支持手錶java

對於其餘的TV項目，想要編譯查看效果還必須註冊一個華爲帳號，登錄之後遠程預覽，能夠點擊Tools/HVD Manager來查看react

點擊運行之後就是這個效果，每次運行有一個小時的限制小程序

項目結構

目前的應用開發和傳統的安卓應用開發沒什麼區別，都是原生+js的混合，固然底層是他們重寫的，設計成這個模式也是爲了開發者可以無痛學習，沒什麼好說的服務器

固然你也徹底可使用JavaScript開發這個應用，只要你使用過vue這類mvvm框架應該是沒什麼難度的，想要實現複雜的應用還得上原生，原生仍是用的Java語言進行開發weex

這個原生應用的文件結構夠熟悉吧，和集成JavaScript框架weex、react都差很少網絡

應用初探

Lite Wearable

首先咱們建立一個Lite Wearable應用來看一看，由於只有他可以實時預覽

咱們主要編輯entry/src/main/js/default/pages下面的內容

這個結構和小程序差很少，咱們在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>

點擊運行項目，能夠在右邊實時看到預覽效果

app.js主要就是應用的生命週期，不得不說這個IDE代碼提示仍是作的很好地

TV ability

接着咱們建立一個原生的TV應用，選擇一個List的模板

而後咱們在HVD manager中啓動一個TV模擬器，此時點擊運行項目就有個設備能夠選擇了

運行效果，修改代碼之後不是實時預覽的，必需要重啓項目，不知道是個人網絡問題仍是他服務器問題，不是很流暢

接下看下代碼，首先是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結合

看下項目結構，其實在前面是說過的和傳統的安卓應用集成weex、react這類是很類似的，不過他官方就直接帶這個這個模式，將來的開發的坑確定更少，畢竟不少人都體會過集成weex、react的痛

看到i18n，看來是走國際化道路啊，而後能夠直接使用前端來編寫頁面，須要原生拓展的地方再編寫原生

官方還提供了完整的示例

說點話

最近鴻蒙挺火熱的，我記得上次鴻蒙剛出的時候也火了一段時間，可是由於沒有拿出真憑實績的東西，遭到不少人的抨擊，這一次拿出東西來了，又有不少人說啊這個妥妥的抄襲，我以爲真的沒有必要，他這樣設計的目的就是爲了讓更多的開發者可以輕鬆上手，畢竟一個應用生態是一個系統最重要的地方。

鴻蒙我以爲優點就是起步晚，能夠吸取不少優秀的設計，並且最突出的就是一體的生態，不論是物聯網仍是手機、電腦，若是未來鴻蒙真的是實現運行到這些平臺上，跨平臺開發和應用通訊、數據同步、權限控制都是很是方便的東西，畢竟如今的華爲生態裏面跨端協同也是作得很是好的，這一套很有蘋果那個味道，我我的仍是支持，但願國內可以真的有一套本身的東西！