鴻蒙真的是套殼嗎?HarmonyOS應用開發初體驗,Java原生和JavaScript的mvvm開發
阿新 • • 發佈:2020-09-17
# 初探尋鴻蒙os的應用開發
> 本期視訊已釋出到bilibili
注意是應用開發,沒錯碼農(應用開發)一般關注這個就行了
![image-20200915230803354](https://img.lookroot.cn/blog/202009/15/230804-633261.png)
## IDE
點選應用開發以後,點選連結下載[IDE](https://developer.harmonyos.com/cn/develop/deveco-studio#download),DevEco Studio是基於IDEA開源版魔改的,別再說什麼抄襲Androidstudio了,使用這個工具沒毛病,快速適應,gradle(gradle是打包構建工具,和Maven這種類似)的下載終於快了一次了
安裝過程沒什麼好說的,就是如果你C盤不夠了,安裝SDK的時候可以先不確定,進入IDE以後修改安裝位置再安裝
![image-20200915231429357](https://img.lookroot.cn/blog/202009/15/231431-359535.png)
SDK Tools裡面有個預覽外掛,能夠實時預覽效果,目前只支援手錶
![image-20200915234249140](https://img.lookroot.cn/blog/202009/15/234250-141358.png)
對於其他的TV專案,想要編譯檢視效果還必須註冊一個華為賬號,登陸以後遠端預覽,可以點選`Tools/HVD Manager`來檢視
![image-20200915234526042](https://img.lookroot.cn/blog/202009/15/234531-447540.png)
點選執行以後就是這個效果,每次執行有一個小時的限制
![image-20200915234722123](https://img.lookroot.cn/blog/202009/15/234724-54622.png)
## 專案結構
目前的應用開發和傳統的安卓應用開發沒什麼區別,都是原生+js的混合,當然底層是他們重寫的,設計成這個模式也是為了開發者能夠無痛學習,沒什麼好說的
![image-20200915231551443](https://img.lookroot.cn/blog/202009/15/231554-815737.png)
當然你也完全可以使用JavaScript開發這個應用,只要你使用過**vue**這類**mvvm**框架應該是沒什麼難度的,想要實現複雜的應用還得上原生,原生還是用的Java語言進行開發
![image-20200915232108278](https://img.lookroot.cn/blog/202009/15/232109-208598.png)
這個原生應用的檔案結構夠熟悉吧,和整合JavaScript框架weex、react都差不多
![image-20200915232425940](https://img.lookroot.cn/blog/202009/15/232427-259002.png)
## 應用初探
### Lite Wearable
首先我們建立一個**Lite Wearable**應用來看一看,因為只有他能夠實時預覽
![image-20200916104211559](https://img.lookroot.cn/blog/202009/16/104212-287328.png)
我們主要編輯`entry/src/main/js/default/pages`下面的內容
![image-20200916104459858](https://img.lookroot.cn/blog/202009/16/104500-850906.png)
這個結構和小程式差不多,我們在`index.js`中定義一個屬性
```javascript
export default {
data: {
todolist: [{
title: '刷leetcode',
date: '2020-06-25 10:00:00',
}, {
title: '看電影',
date: '2020-06-27 20:00:00',
}],
}
}
```
在`index.html`中使用它
```html
```
點選執行專案,可以在右邊實時看到預覽效果
![image-20200916104622601](https://img.lookroot.cn/blog/202009/16/104623-838163.png)
`app.js`主要就是應用的生命週期,不得不說這個IDE程式碼提示還是做的很好地
![image-20200916104706478](https://img.lookroot.cn/blog/202009/16/104707-387178.png)
### TV ability
接著我們建立一個原生的TV應用,選擇一個List的模板
![image-20200916104934085](https://img.lookroot.cn/blog/202009/16/104938-30318.png)
然後我們在`HVD manager`中啟動一個TV模擬器,此時點選執行專案就有個裝置可以選擇了
![image-20200916105502562](https://img.lookroot.cn/blog/202009/16/105503-546833.png)
執行效果,修改程式碼以後不是實時預覽的,必須要重啟專案,不知道是我的網路問題還是他伺服器問題,不是很流暢
![image-20200916105651170](https://img.lookroot.cn/blog/202009/16/105652-491298.png)
接下看下程式碼,首先是`MainAbility`這個沒什麼好說的就和`activity`是一樣的
```java
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`
```xml
```
一個Page可以由一個或多個AbilitySlice(可以理解為片段和元件)構成,`setMainRoute`決定應用的預設AbilitySlice,這裡他選擇的是MainAbilitySlice,我們看下MainAbilitySlice
```java
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
```java
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`容器
```xml
```
list中具體的內容是通過`listContainer.setItemProvider(listItemProvider);`設定的,我們看下ListItemProvider
```java
public class ListItemProvider extends RecycleItemProvider {
private ArrayList