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

开心玩笑 發表於 2020-9-17 09:31:00

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

<h1 id="初探寻鸿蒙os的应用开发">初探寻鸿蒙os的应用开发</h1>
<blockquote>
本期视频已发布到bilibili
</blockquote>
注意是应用开发，没错码农（应用开发）一般关注这个就行了
<img src="https://img.lookroot.cn/blog/202009/15/230804-633261.png">
<h2 id="ide">IDE</h2>
点击应用开发以后，点击链接下载IDE,DevEco Studio是基于IDEA开源版魔改的，别再说什么抄袭Androidstudio了，使用这个工具没毛病，快速适应，gradle（gradle是打包构建工具，和Maven这种类似）的下载终于快了一次了
安装过程没什么好说的，就是如果你C盘不够了，安装SDK的时候可以先不确定，进入IDE以后修改安装位置再安装
<img src="https://img.lookroot.cn/blog/202009/15/231431-359535.png">
SDK Tools里面有个预览插件，能够实时预览效果，目前只支持手表
<img src="https://img.lookroot.cn/blog/202009/15/234250-141358.png">
对于其他的TV项目，想要编译查看效果还必须注册一个华为账号，登陆以后远程预览，可以点击<code>Tools/HVD Manager</code>来查看
<img src="https://img.lookroot.cn/blog/202009/15/234531-447540.png">
点击运行以后就是这个效果，每次运行有一个小时的限制
<img src="https://img.lookroot.cn/blog/202009/15/234724-54622.png">
<h2 id="项目结构">项目结构</h2>
目前的应用开发和传统的安卓应用开发没什么区别，都是原生+js的混合，当然底层是他们重写的，设计成这个模式也是为了开发者能够无痛学习，没什么好说的
<img src="https://img.lookroot.cn/blog/202009/15/231554-815737.png">
当然你也完全可以使用JavaScript开发这个应用，只要你使用过vue这类mvvm框架应该是没什么难度的，想要实现复杂的应用还得上原生，原生还是用的Java语言进行开发
<img src="https://img.lookroot.cn/blog/202009/15/232109-208598.png">
这个原生应用的文件结构够熟悉吧，和集成JavaScript框架weex、react都差不多
<img src="https://img.lookroot.cn/blog/202009/15/232427-259002.png">
<h2 id="应用初探">应用初探</h2>
<h3 id="lite-wearable">Lite Wearable</h3>
首先我们创建一个Lite Wearable应用来看一看，因为只有他能够实时预览
<img src="https://img.lookroot.cn/blog/202009/16/104212-287328.png">
我们主要编辑<code>entry/src/main/js/default/pages</code>下面的内容
<img src="https://img.lookroot.cn/blog/202009/16/104500-850906.png">
这个结构和小程序差不多，我们在<code>index.js</code>中定义一个属性
<pre><code class="language-javascript">export default {
data: {
 todolist: [{
 title: '刷leetcode',
 date: '2020-06-25 10:00:00',
 }, {
 title: '看电影',
 date: '2020-06-27 20:00:00',
 }],
}
}
</code></pre>
在<code>index.html</code>中使用它
<pre><code class="language-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>
</code></pre>
点击运行项目，可以在右边实时看到预览效果
<img src="https://img.lookroot.cn/blog/202009/16/104623-838163.png">
<code>app.js</code>主要就是应用的生命周期，不得不说这个IDE代码提示还是做的很好地
<img src="https://img.lookroot.cn/blog/202009/16/104707-387178.png">
<h3 id="tv-ability">TV ability</h3>
接着我们创建一个原生的TV应用，选择一个List的模板
<img src="https://img.lookroot.cn/blog/202009/16/104938-30318.png">
然后我们在<code>HVD manager</code>中启动一个TV模拟器，此时点击运行项目就有个设备可以选择了
<img src="https://img.lookroot.cn/blog/202009/16/105503-546833.png">
运行效果，修改代码以后不是实时预览的，必须要重启项目，不知道是我的网络问题还是他服务器问题，不是很流畅
<img src="https://img.lookroot.cn/blog/202009/16/105652-491298.png">
接下看下代码，首先是<code>MainAbility</code>这个没什么好说的就和<code>activity</code>是一样的
<pre><code class="language-java">public class MainAbility extends Ability {
@Override
public void onStart(Intent intent) {
 super.onStart(intent);
 super.setMainRoute(MainAbilitySlice.class.getName());
}
}
</code></pre>
在<code>src\main\resources\base\layout</code>下放置页面文件,这个也是一样的里面嵌套了一个<code>ListContainer</code>
<pre><code class="language-xml"><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>
</code></pre>
一个Page可以由一个或多个AbilitySlice(可以理解为片段和组件)构成,<code>setMainRoute</code>决定应用的默认AbilitySlice,这里他选择的是MainAbilitySlice，我们看下MainAbilitySlice
<pre><code class="language-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);
}
}
</code></pre>
在<code>onStart</code>中指定加载的页面内容，这里选择的<code>ListHolder</code>，我们看下ListHolder
<pre><code class="language-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;
}
}
</code></pre>
在<code>createComponent</code>中我们拿到list这个组件并填充具体的Item内容
<code>ListContainer</code>页面文件中是两个<code>Text</code>容器
<pre><code class="language-xml"><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>
</code></pre>
list中具体的内容是通过<code>listContainer.setItemProvider(listItemProvider);</code>设置的，我们看下ListItemProvider
<pre><code class="language-java">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;
}
}
</code></pre>
在<code>getComponent</code>设置具体的内容，好的基本看完整个结构了，我觉得会原生开发的同学上手应该没啥问题
<h3 id="tv-js">TV JS</h3>
最后看下这个原生和JavaScript结合
<img src="https://img.lookroot.cn/blog/202009/16/111834-379576.png">
看下项目结构，其实在前面是说过的和传统的安卓应用集成weex、react这类是很相似的，不过他官方就直接带这个这个模式，未来的开发的坑肯定更少，毕竟很多人都体会过集成weex、react的痛
<img src="https://img.lookroot.cn/blog/202009/16/111955-733984.png">
看到<code>i18n</code>，看来是走国际化道路啊，然后可以直接使用前端来编写页面，需要原生拓展的地方再编写原生
官方还提供了完整的示例
<img src="https://img.lookroot.cn/blog/202009/16/112619-392472.png">
<h2 id="说点话">说点话</h2>
最近鸿蒙挺火热的，我记得上次鸿蒙刚出的时候也火了一段时间，但是因为没有拿出真凭实绩的东西，遭到很多人的抨击，这一次拿出东西来了，又有很多人说啊这个妥妥的抄袭，我觉得真的没有必要，他这样设计的目的就是为了让更多的开发者能够轻松上手，毕竟一个应用生态是一个系统最重要的地方。
鸿蒙我觉得优势就是起步晚，可以吸收很多优秀的设计，而且最突出的就是一体的生态，不管是物联网还是手机、电脑，如果将来鸿蒙真的是实现运行到这些平台上，跨平台开发和应用通信、数据同步、权限控制都是非常方便的东西，毕竟现在的华为生态里面跨端协同也是做得非常好的，这一套颇有苹果那个味道，我个人还是支持，希望国内能够真的有一套自己的东西！
<img src="https://img.lookroot.cn/blog/202009/16/112956-440790.png"> 
来源：https://www.cnblogs.com/lookroot/p/13683377.html

頁: [1]

琼殿技术论坛's Archiver

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