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

lookroot發表於2020-09-17

初探尋鴻蒙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

相關文章