?介紹
本篇Codelab我們將教會大家如何構(gòu)建一個簡易的OpenHarmony新聞客戶端（JS版本）。應(yīng)用包含兩級頁面，分別是主頁面和詳情頁面，兩個頁面都展示了豐富的UI組件，其中詳情頁的實現(xiàn)邏輯中還展示了如何通過調(diào)用相應(yīng)接口，實現(xiàn)跨設(shè)備拉起FA。本教程將結(jié)合以下內(nèi)容進(jìn)行講解：
1．頂部tabs以及新聞列表list的使用
2．每條新聞的文本框以及圖像
3．布局及頁面跳轉(zhuǎn)
4．設(shè)備發(fā)現(xiàn)以及跨設(shè)備拉起FA
最終效果預(yù)覽如下圖所示：
搭建OpenHarmony環(huán)境
完成本篇Codelab我們首先要完成開發(fā)環(huán)境的搭建，本示例以Hi3516DV300開發(fā)板為例，參照以下步驟進(jìn)行：
-
[獲取OpenHarmony系統(tǒng)版本]：標(biāo)準(zhǔn)系統(tǒng)解決方案（二進(jìn)制）。
-
搭建燒錄環(huán)境：
- [完成DevEco Device Tool的安裝]
- [完成Hi3516開發(fā)板的燒錄]
- 鴻蒙開發(fā)指導(dǎo)文檔：qr23.cn/AKFP8k點擊或復(fù)制轉(zhuǎn)到。
-
搭建開發(fā)環(huán)境：
- 開始前請參考[工具準(zhǔn)備]?，完成DevEco Studio的安裝和開發(fā)環(huán)境配置。
- 開發(fā)環(huán)境配置完成后，請參考[使用工程向?qū)?創(chuàng)建工程（模板選擇“Empty Ability”），選擇JS或者eTS語言開發(fā)。
- 工程創(chuàng)建完成后，選擇使用[真機(jī)進(jìn)行調(diào)測]?。
分布式組網(wǎng)
完成本篇Codelab我們還需要完成開發(fā)板的分布式組網(wǎng)，本示例以Hi3516DV300開發(fā)板為例，參照以下步驟進(jìn)行：
-
硬件準(zhǔn)備：準(zhǔn)備兩臺燒錄相同的版本系統(tǒng)的Hi3516DV300開發(fā)板A、B。
-
兩個開發(fā)板A、B配置在同一個WiFi網(wǎng)絡(luò)之下。
打開設(shè)置-->WLAN-->點擊右側(cè)WiFi開關(guān)-->點擊目標(biāo)WiFi并輸入密碼。
-
將設(shè)備A、B設(shè)置為互相信任的設(shè)備。
- 找到系統(tǒng)應(yīng)用“音樂”。
-
設(shè)備A打開音樂，點擊左下角帶箭頭的流轉(zhuǎn)按鈕，彈出列表框，在列表中會展示遠(yuǎn)端設(shè)備的id。
-
選擇遠(yuǎn)端設(shè)備B的id，另一臺開發(fā)板（設(shè)備B）會彈出驗證的選項框。
-
設(shè)備B點擊允許，設(shè)備B將會彈出隨機(jī)PIN碼，將設(shè)備B的PIN碼輸入到設(shè)備A的PIN碼填入框中。
配網(wǎng)完畢。
代碼結(jié)構(gòu)解讀
本篇Codelab只對核心代碼進(jìn)行講解，對于完整代碼，我們會在最后的參考中提供下載方式，接下來我們會用一小節(jié)來講解整個工程的代碼結(jié)構(gòu)：
- images：存放工程使用到的圖片資源。
- index：構(gòu)成新聞列表頁面，包括index.hml布局文件、index.css樣式文件、index.js邏輯處理文件。
- detail：構(gòu)成新聞詳情頁面，包括detail.hml布局文件、detail.css樣式文件、detail.js邏輯處理文件。
- config.json：配置文件。
添加主頁新聞類型
首先為我們的應(yīng)用添加頂部新聞類型，用于切換不同類別的新聞。這里會使用到tabs、tab-bar控件，同時使用for循環(huán)對新聞的title進(jìn)行遍歷，新聞的標(biāo)題有All、Health、Finance、Technology、Sport、Internet、Game七大類。圖片示例和代碼如下：
<div class="container">
<tabs index="0" vertical="false" onchange="changeNewsType">
<tab-bar class="tab-bar" mode="scrollable">
<text class="tab-text" for="{{ title in titleList }}">{{ title.name }} </text>
</tab-bar>
</tabs>
</div>添加主頁頂部新聞類型
-
我們需要實現(xiàn)一個新聞item的布局，其樣式包含左邊的新聞標(biāo)題、右邊的新聞圖片以及下方的新聞分割線，圖片示例和代碼如下：
<div style="flex-direction : column"> <div style="flex-direction : row"> <text class="text"> {{ news.title }} </text> <image class="image" src="{{ news.imgUrl }}"> </image> </div> <div style="height : 2px; width : 100%; background-color : #97d2d4d4;"> </div> </div> -
我們需要實現(xiàn)一個新聞列表，也就是將上方的新聞item進(jìn)行一個循環(huán)的展示，這需要用到list、list-item的相關(guān)知識點。我們需要將newsList新聞列表數(shù)據(jù)進(jìn)行循環(huán)，所以新聞item的布局外層需要嵌套一個list和list-item，圖片示例和代碼如下：
<list class="list"> <list-item for="{{ news in newsList }}" onclick="itemClick(news)"> // 新聞item的布局代碼填充到這里 </list-item> </list> -
我們需要實現(xiàn)新聞類型的切換，每一條新聞都會有一個新聞類型，當(dāng)選擇All的時候默認(rèn)展示所有類型的新聞，當(dāng)選擇具體的新聞類型時，如選擇Health，則需要篩選出屬于Health類型的新聞進(jìn)行展示。添加一個自定義函數(shù)changeNewsType，代碼如下所示：
// 選擇新聞類型 changeNewsType: function (e) { const type = titles[e.index].name; this.newsList = []; if (type === 'All') { // 展示全部新聞 this.newsList = newsData; } else { // 分類展示新聞 const newsArray = []; for (var news of newsData) { if (news.type === type) { newsArray.push(news); } } this.newsList = newsArray; } }
詳情頁頁面布局
詳情頁面包含新聞標(biāo)題、閱讀量和喜好數(shù)、新聞圖片、新聞文字以及下方的狀態(tài)欄。狀態(tài)欄包括1個可輸入文本框和4個功能按鍵，圖片示例和代碼如下：
<div class="container">
<text class="text-title">{{ title }}</text>
<text class="text-reads">reads: {{ reads }} likes: {{ likes }}</text>
<image class="image" src="{{ imgUrl }}"></image>
<text class="text-content">
{{ content }}
</text>
<!-- 詳情頁底部-->
<div class="bottom">
<textarea class="textarea" placeholder="Enter a comment."></textarea>
<image class="image-bottom" src="/common/images/icon_message.png"></image>
<image class="image-bottom" src="/common/images/icon_star.png"></image>
<image class="image-bottom" src="/common/images/icon_good.png"></image>
<image class="image-bottom" src="/common/images/icon_share.png" onclick="toShare"></image>
</div>
</div>需要注意的是detail.hml只是展示了頁面的布局結(jié)構(gòu)，其具體的布局樣式需要參考detail.css文件。
跳轉(zhuǎn)詳情頁
完成新聞列表頁面和詳情頁的布局后，需要實現(xiàn)頁面跳轉(zhuǎn)的功能。新聞列表頁面中綁定一個list-item的點擊事件itemClick，其中傳入的參數(shù)是news（新聞的詳細(xì)數(shù)據(jù)）。
<list-item for="{{ news in newsList }}" onclick="itemClick(news)">在JS中頁面跳轉(zhuǎn)需要在JS文件的頭部引入如下一行代碼：
import router from '@system.router';實現(xiàn)list-item的點擊事件itemClick，其代碼如下所示：
itemClick(news) {
// 跳轉(zhuǎn)到詳情頁面
router.push({
uri: 'pages/detail/detail',
params: {
'title': news.title,
'type': news.type,
'imgUrl': news.imgUrl,
'reads': news.reads,
'likes': news.likes,
'content': news.content
}
});
}設(shè)備發(fā)現(xiàn)
首先給分享按鈕添加一個分享事件toShare，代碼如下所示：
<image class="image-bottom" src="/common/images/icon_share.png" onclick="toShare"></image>然后調(diào)用getTrustedDeviceListSync()，獲取所有可信設(shè)備的列表，代碼如下所示：
import deviceManager from '@ohos.distributedHardware.deviceManager';
toShare() {
// 創(chuàng)建設(shè)備管理實例
deviceManager.createDeviceManager('com.huawei.codelab', (err, data) => {
if (err) {
return;
}
this.deviceMag = data;
// 獲取所有可信設(shè)備的列表
this.deviceList = this.deviceMag.getTrustedDeviceListSync();
});
// 循環(huán)遍歷設(shè)備列表,獲取設(shè)備名稱和設(shè)備Id
for (let i = 0; i < this.deviceList.length; i++) {
this.deviceList[i] = {
deviceName: this.deviceList[i].deviceName,
deviceId: this.deviceList[i].deviceId,
checked: false
};
}
this.$element('showDialog').show();
}最后自定義dialog彈窗顯示所有可信設(shè)備，代碼如下所示：
<dialog id="showDialog" class="select-device-dialog">
<div class="select-device-wrapper">
<text class="select-device-title">選擇設(shè)備</text>
<list class="select-device-list">
<list-item class="select-device-item" for="{{ deviceList }}" id="list">
<text class="select-device-item-left">{{ $item.deviceName }}
</text>
<input class="select-device-item-right" type="checkbox" name="Device" value="{{$idx}}"
@change="selectDevice({{$idx}})" checked="{{$item.checked}}">
</input>
</list-item>
</list>
<div class="choose-ok-or-not">
<text class="select-device-btn" @click="chooseCancel">取消</text>
<text class="select-device-btn" @click="chooseComform">確定</text>
</div>
</div>
</dialog>最終實現(xiàn)的效果如下所示：
?說明：??本工程項目包含getTrustedDeviceListSync()獲取所有可信設(shè)備的列表方法，請選擇API 7或以上版本。
分布式拉起
彈出設(shè)備列表后，選擇設(shè)備并點擊“確定”按鈕，將會分布式拉起另外一臺設(shè)備，其具體實現(xiàn)代碼如下所示：
chooseComform() {
this.$element('showDialog').close();
for (let i = 0; i < this.deviceList.length; i++) {
// 判斷設(shè)備是否被選中
if (this.deviceList[i].checked) {
const params = {
url: 'pages/detail/detail',
title: this.title,
type: this.type,
imgUrl: this.imgUrl,
reads: this.reads,
likes: this.likes,
content: this.content,
};
const wantValue = {
bundleName: 'com.huawei.newsdemooh',
abilityName: 'com.huawei.newsdemooh.MainAbility',
deviceId: this.deviceList[i].deviceId,
parameters: params
};
featureAbility.startAbility({
want: wantValue
}).then((data) => {
console.info('featureAbility.startAbility finished, ' + JSON.stringify(data));
});
console.info('featureAbility.startAbility want=' + JSON.stringify(wantValue));
console.info('featureAbility.startAbility end');
}
}
}最后呢，很多開發(fā)朋友不知道需要學(xué)習(xí)那些鴻蒙技術(shù)？鴻蒙開發(fā)崗位需要掌握那些核心技術(shù)點？為此鴻蒙的開發(fā)學(xué)習(xí)必須要系統(tǒng)性的進(jìn)行。
而網(wǎng)上有關(guān)鴻蒙的開發(fā)資料非常的少，假如你想學(xué)好鴻蒙的應(yīng)用開發(fā)與系統(tǒng)底層開發(fā)。你可以參考這份資料，少走很多彎路，節(jié)省沒必要的麻煩。由兩位前阿里高級研發(fā)工程師聯(lián)合打造的《鴻蒙NEXT星河版OpenHarmony開發(fā)文檔》里面內(nèi)容包含了（ArkTS、ArkUI開發(fā)組件、Stage模型、多端部署、分布式應(yīng)用開發(fā)、音頻、視頻、WebGL、OpenHarmony多媒體技術(shù)、Napi組件、OpenHarmony內(nèi)核、Harmony南向開發(fā)、鴻蒙項目實戰(zhàn)等等）鴻蒙（Harmony NEXT）技術(shù)知識點
如果你是一名Android、Java、前端等等開發(fā)人員，想要轉(zhuǎn)入鴻蒙方向發(fā)展?？梢?span style="color:#fe2c24;">直接領(lǐng)取這份資料輔助你的學(xué)習(xí)。下面是鴻蒙開發(fā)的學(xué)習(xí)路線圖。
高清完整版請點擊→《鴻蒙NEXT星河版開發(fā)學(xué)習(xí)文檔》
針對鴻蒙成長路線打造的鴻蒙學(xué)習(xí)文檔。話不多說，我們直接看詳細(xì)資料鴻蒙（OpenHarmony ）學(xué)習(xí)手冊（共計1236頁）與鴻蒙（OpenHarmony ）開發(fā)入門教學(xué)視頻，幫助大家在技術(shù)的道路上更進(jìn)一步。
《鴻蒙 (OpenHarmony)開發(fā)學(xué)習(xí)視頻》
《鴻蒙生態(tài)應(yīng)用開發(fā)V2.0白皮書》
《鴻蒙 (OpenHarmony)開發(fā)基礎(chǔ)到實戰(zhàn)手冊》
獲取這份鴻蒙星河版學(xué)習(xí)資料，請點擊→《鴻蒙NEXT星河版開發(fā)學(xué)習(xí)文檔》
OpenHarmony北向、南向開發(fā)環(huán)境搭建
《鴻蒙開發(fā)基礎(chǔ)》
-
ArkTS語言
-
安裝DevEco Studio
-
運(yùn)用你的第一個ArkTS應(yīng)用
-
ArkUI聲明式UI開發(fā)
-
.……
《鴻蒙開發(fā)進(jìn)階》
-
Stage模型入門
-
網(wǎng)絡(luò)管理
-
數(shù)據(jù)管理
-
電話服務(wù)
-
分布式應(yīng)用開發(fā)
-
通知與窗口管理
-
多媒體技術(shù)
-
安全技能
-
任務(wù)管理
-
WebGL
-
國際化開發(fā)
-
應(yīng)用測試
-
DFX面向未來設(shè)計
-
鴻蒙系統(tǒng)移植和裁剪定制
-
……
《鴻蒙開發(fā)實戰(zhàn)》
-
ArkTS實踐
-
UIAbility應(yīng)用
-
網(wǎng)絡(luò)案例
-
……
?獲取這份鴻蒙星河版學(xué)習(xí)資料，請點擊→《鴻蒙NEXT星河版開發(fā)學(xué)習(xí)文檔》
總結(jié)
鴻蒙—作為國家主力推送的國產(chǎn)操作系統(tǒng)。部分的高校已經(jīng)取消了安卓課程，從而開設(shè)鴻蒙課程；企業(yè)紛紛跟進(jìn)啟動了鴻蒙研發(fā)。
并且鴻蒙是完全具備無與倫比的機(jī)遇和潛力的；預(yù)計到年底將有 5,000 款的應(yīng)用完成原生鴻蒙開發(fā)，未來將會支持 50 萬款的應(yīng)用。那么這么多的應(yīng)用需要開發(fā)，也就意味著需要有更多的鴻蒙人才。鴻蒙開發(fā)工程師也將會迎來爆發(fā)式的增長，學(xué)習(xí)鴻蒙勢在必行！文章來源：http://www.zghlxwxcb.cn/news/detail-860673.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-860673.html
到了這里，關(guān)于OpenHarmony開發(fā)實例：【新聞客戶端】的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
