鴻蒙真的是套殼嗎？HarmonyOS應用開發初體驗，Java原生和JavaScript的mvvm開發
初探尋鴻蒙os的應用開發
本期視訊已釋出到bilibili
注意是應用開發，沒錯碼農（應用開發）一般關注這個就行了
IDE
點選應用開發以後，點選連結下載IDE,DevEco Studio是基於IDEA開源版魔改的，別再說什麼抄襲Androidstudio了，使用這個工具沒毛病，快速適應，gradle（gradle是打包構建工具，和Maven這種類似）的下載終於快了一次了
安裝過程沒什麼好說的，就是如果你C盤不夠了，安裝SDK的時候可以先不確定，進入IDE以後修改安裝位置再安裝
SDK Tools裡面有個預覽外掛，能夠實時預覽效果，目前只支援手錶
對於其他的TV專案，想要編譯檢視效果還必須註冊一個華為賬號，登陸以後遠端預覽，可以點選Tools/HVD Manager
點選執行以後就是這個效果，每次執行有一個小時的限制
專案結構
目前的應用開發和傳統的安卓應用開發沒什麼區別，都是原生+js的混合，當然底層是他們重寫的，設計成這個模式也是為了開發者能夠無痛學習，沒什麼好說的
當然你也完全可以使用JavaScript開發這個應用，只要你使用過vue這類mvvm框架應該是沒什麼難度的，想要實現複雜的應用還得上原生，原生還是用的Java語言進行開發
這個原生應用的檔案結構夠熟悉吧，和整合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，看來是走國際化道路啊，然後可以直接使用前端來編寫頁面，需要原生拓展的地方再編寫原生
官方還提供了完整的示例
說點話
最近鴻蒙挺火熱的，我記得上次鴻蒙剛出的時候也火了一段時間，但是因為沒有拿出真憑實績的東西，遭到很多人的抨擊，這一次拿出東西來了，又有很多人說啊這個妥妥的抄襲，我覺得真的沒有必要，他這樣設計的目的就是為了讓更多的開發者能夠輕鬆上手，畢竟一個應用生態是一個系統最重要的地方。
鴻蒙我覺得優勢就是起步晚，可以吸收很多優秀的設計，而且最突出的就是一體的生態，不管是物聯網還是手機、電腦，如果將來鴻蒙真的是實現執行到這些平臺上，跨平臺開發和應用通訊、資料同步、許可權控制都是非常方便的東西，畢竟現在的華為生態裡面跨端協同也是做得非常好的，這一套頗有蘋果那個味道，我個人還是支援，希望國內能夠真的有一套自己的東西！