文章目錄

HarmonyOS應用開發-入門
- 01-HarmonyOS介紹
- 02-DevEco IDE安裝
- 03-建立HarmonyOS應用
- 04-項目結構介紹
- 05-預覽JSUI界面
- 06-極客園首頁搭建
- 07-完成tab切換内容
- 08-擷取文章清單
- 09-文章詳情界面
- 10-實作路由跳轉
- 11-總結&下期展望

HarmonyOS應用開發-入門

個人介紹
- 周老師，曾從事Java開發，Android開發，前端開發。現傳智教育總部前端研院–研究員。
前置知識
- 隻要你需要一些前端基礎知識HTML CSS JavaScript 你就可以上手開發 HarmonyOS應用

01-HarmonyOS介紹

講述一下關于HarmonyOS的特點和前景

這篇隻需要你有一些前端基礎就可以上手開發HarmonyOS應用HarmonyOS應用開發-入門

摘自鴻蒙開發者學院：

HarmonyOS是華為開發的一款面向未來的全場景分布式智慧作業系統，将逐漸覆寫1+8+N全場景終端裝置。
從不同的角度來看待這款系統：
- 對于消費者而言，HarmonyOS用一個“統一的軟體系統 ”，從根本上解決消費者面對大量智能終端體驗割裂的問題，為消費者帶來統一、便利、安全的智慧化全場景體驗。
- 對應開發者而言，HarmonyOS 通過多種分布式技術整合不同終端硬體能力，形成一個虛拟的“超級終端”，應用開發者可以基于“超級終端”開發應用，聚焦上層業務邏輯無需關注硬體差異，裝置開發者可以按需調用其他終端的能力，帶來基于“超級終端”的創新服務體驗。
HarmonyOS作為一款面向未來的嶄新作業系統，必将在萬物互聯、萬物智能的全連接配接世界中，發揮至關重要的作用。

前端開發工程師思考：

會不會是下一個風口？

2021年06月2日HarmonyOS2.0釋出，一周後媒體爆料華為HarmonyOS2.0更新使用者已經突破1000萬；根據華為規劃，今年将實作超過3億台裝置更新鴻蒙，其中包含1億台第三方裝置；到明年上半年，将實作上百款華為自有品牌機型更新；同時，華為希望今年能有120萬開發者加入鴻蒙生态。

轉鴻蒙應用開發難嗎？

類小程式開發，超級小程式開發， HarmonyOS提供了Java UI和JS UI兩種UI架構：Java UI提供了細粒度的UI程式設計接口，使應用開發更加靈活；JS UI提供了相對高層的UI描述，使應用開發更加簡單。

總結：這麼優秀的系統，這麼完善的硬體生态，數以萬計的開發者基礎，現在上車也不晚。

體驗： https://playground.harmonyos.com/#/cn/onlineDemo 線上體驗位址，大家可以自己去試試。

02-DevEco IDE安裝

介紹下開發鴻蒙應用的編輯器 DevEco 安裝使用

這篇隻需要你有一些前端基礎就可以上手開發HarmonyOS應用HarmonyOS應用開發-入門

安裝步驟
- 注冊華為帳号和實名認證 https://id1.cloud.huawei.com/CAS/portal/userRegister/regbyphone.html
- 下載下傳安裝NodeJs位址 http://nodejs.cn/download/
- 下載下傳安裝DevEco Studio位址 https://developer.harmonyos.com/cn/develop/deveco-studio#download

華為官方安裝教程

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/software_install-0000001053582415

03-建立HarmonyOS應用

使用ability(JS)模版建立一個HarmonyOS項目

這篇隻需要你有一些前端基礎就可以上手開發HarmonyOS應用HarmonyOS應用開發-入門

我們的目标是：開發極客園首頁（文章清單）+檔案詳情頁面。

大緻步驟：

建立項目
- 第一次進來：點選 Create HarmonyOS Project
- 有項目進來：File---->New---->New Project
選擇項目模版

這篇隻需要你有一些前端基礎就可以上手開發HarmonyOS應用HarmonyOS應用開發-入門

項目資訊

這篇隻需要你有一些前端基礎就可以上手開發HarmonyOS應用HarmonyOS應用開發-入門

總結：我們基于JS空模版建立一個項目。

04-項目結構介紹

了解項目的工作目錄，檔案作用等等

這篇隻需要你有一些前端基礎就可以上手開發HarmonyOS應用HarmonyOS應用開發-入門

總結：

entry—>src---->main 是項目的工作目錄，寫代碼的地方。
js—>default---->common 是公共資源目錄（圖檔，元件）
i18n 國際化
pages 頁面
app.js 入口檔案
resources 應用資源
config.json 應用配置

05-預覽JSUI界面

預覽界面，多終端預覽，實時預覽，模拟器預覽。

大緻步驟：

示範本地預覽
示範遠端預覽

具體内容：

本地預覽

選中需要預覽的頁面

這篇隻需要你有一些前端基礎就可以上手開發HarmonyOS應用HarmonyOS應用開發-入門

點選Preview進行預覽

這篇隻需要你有一些前端基礎就可以上手開發HarmonyOS應用HarmonyOS應用開發-入門

支援多裝置同時預覽

這篇隻需要你有一些前端基礎就可以上手開發HarmonyOS應用HarmonyOS應用開發-入門

遠端預覽

打開遠端虛拟裝置

這篇隻需要你有一些前端基礎就可以上手開發HarmonyOS應用HarmonyOS應用開發-入門

登入華為帳号（登入後再次打開無此步驟）

這篇隻需要你有一些前端基礎就可以上手開發HarmonyOS應用HarmonyOS應用開發-入門

運作裝置

在這裡插入圖檔描述

運作項目

[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-7JTNLu3w-1624521554169)(docs/media/1623687734840.png)]

06-極客園首頁搭建

搭建首頁界面，布局代碼講解

大緻步驟：

準備資源圖檔
準備模版代碼
準備初始資料
準備樣式代碼
講解模版結構

落地代碼：

準備圖檔資源

這篇隻需要你有一些前端基礎就可以上手開發HarmonyOS應用HarmonyOS應用開發-入門

拷貝進入

common/images

檔案夾

準備初始資料 pages/index/index.js

export default {
  data () {
    return {
      activeIndex: 0,
      tabs: [
        {value:'首頁',icon:'common/images/btn_home.png',activeIcon:'common/images/btn_home_sel.png'},
        {value:'問答',icon:'common/images/btn_qa.png',activeIcon:'common/images/btn_qa_sel.png'},
        {value:'視訊',icon:'common/images/btn_video.png',activeIcon:'common/images/btn_video_sel.png'},
        {value:'我的',icon:'common/images/btn_mine.png',activeIcon:'common/images/btn_mine_sel.png'}
      ]
    }
  },
  clickBar (index) {
    this.activeIndex = index
  }
}

準備模版代碼 pages/index/index.hml

<div class="container">
  <toolbar class="toolbar">
    <toolbar-item
        @click="clickBar($idx)"
        for="item in tabs"
        value="{{ item.value }}"
        class="item"
        icon="{{activeIndex===$idx?item.activeIcon:item.icon }}"
        >
    </toolbar-item>
  </toolbar>
</div>

準備樣式代碼

.container {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.toolbar {
  width: 100%;
  position: fixed;
  bottom: 0px;
  background-color: #F7F8FA;
}


@media screen and (device-type: tablet) and (orientation: landscape) {
}

@media screen and (device-type: wearable) {
}

@media screen and (device-type: tv) {
}

@media screen and (device-type: phone) and (orientation: landscape) {
}

總結：

css js hml 是一個頁面的配套檔案，分别是寫樣式，邏輯，模版。

07-完成tab切換内容

在點選tab的時候可以切換元件，如何定義和使用元件。

大緻步驟：

準備首頁，問答，視訊元件
完成首頁元件的基礎布局，界面渲染。
最後入口頁面導入元件，根據目前激活tab進行渲染

落的代碼：

準備元件 components/home/ 下面是首頁的關鍵代碼，問答和視訊有基本基本結構即可。

<div class="home">
  <swiper class="swiper">
    <image  for="img in images" src="{{img}}"></image>
  </swiper>
  <div class="article-item" for="item in articles">
      <div class="article-left">
        <text class="title">{{item.title}}</text>
        <text class="desc">
            <span>{{item.authorName}}·</span>
            <span>{{item.publicTime}}</span>
        </text>
      </div>
      <div class="article-right">
        <image src="{{item.cover}}"></image>
      </div>
  </div>
</div>

import router from '@system.router';
export default {
  data () {
    return {
      articles: [],
      images: [
        'https://www.itcast.cn/images/newslide/homepageandphone/20214920094945907.jpg',
        'https://www.itcast.cn/images/newslide/homepageandphone/20204726104753530.jpg',
        'https://www.itcast.cn/images/newslide/homepageandphone/20203729153726314.jpg',
        'http://www.itcast.cn/images/newslide/homepageandphone/20214402114448890.jpg',
      ]
    }
  },
  onInit () {
    // https://v2.sohu.com/integration-api/mix/region/101
    for (var i = 0; i < 10 ; i++) {
      this.articles.push({
        id: i,
        title: '使用了VUE3.0技術棧建構，自己封裝的UI元件庫，接入了QQ登入，支付寶支付業務，以及前端SKU解決方案，本地線上購物車解決方案',
        cover: 'https://pip.itcast.cn/uploads/3411f946f3af4d918833fa0abb3642b7.png',
        authorName: '極客園科技',
        publicTime: '2小時前'
      })
    }
  }
}

.home {
  margin-bottom: 56px;
  flex-direction: column;
  display: flex;
}
.swiper {
  indicator-selected-color:#FC6627;
  indicator-color: #fff;
  height: 200px;
  width: 100%;
}
.article-item {
  display: flex;
  padding: 12px;
  border-bottom: .5px solid #eee;
}
.article-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 6px;
}
.title {
  font-size: 18px;
  max-lines: 2;
  text-overflow: ellipsis;
}
.desc {
  font-size: 14px;
  padding-top: 10px;
  color: #999;
}

.article-right {
  width: 140px;
  height: 80px;
}

使用元件 pages/index/index.hml

<element name="home-page" src="../../components/home/home.hml"></element>
<element name="question-page" src="../../components/question/question.hml"></element>
<element name="video-page" src="../../components/video/video.hml"></element>

<home-page if="activeIndex===0"></home-page>
  <question-page if="activeIndex===1"></question-page>
  <video-page if="activeIndex===2"></video-page>

總結：可以封裝元件。

08-擷取文章清單

請求接口，使用@system.fetch在HarmonyOS應用發起網絡請求

大緻步驟：

配置請求權限，支援https請求
如果是http請求，需要額外配置信任域名
使用 @system.fetch 子產品發起請求
需要在遠端裝置測試請求，preview模式下請求失效

落的代碼：

請求權限配置

config.json

在 module 選項下配置如下代碼

"reqPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ]

信任域名配置

config.json

參考配置，如果是http的接口伺服器

"deviceConfig": {
    "default": {
      "network": {
        "cleartextTraffic": true,
        "securityConfig": {
          "domainSettings": {
            "cleartextPermitted": true,
            "domains": [
              {"name": "mock.boxuegu.com","subdomains": true}
            ]
          }
        }
      }
    }
  },

使用 @system.fetch 子產品發起請求 components/home/home.js

http.fetch({
      method: 'GET',
      url: `https://mock.boxuegu.com/mock/1532/artciles`,
      success:(res) => {
        try {
          const data = JSON.parse(res.data)
          this.articles = data.result
        } catch (e) {
          console.log(e.message)
        }
      }
    })

最後在遠端裝置看結果

09-文章詳情界面

搭建文章詳情界面，布局代碼講解

大緻步驟：

準備 article 目錄，編寫文章請求
需要在 config.json 中配置頁面

落地代碼：

模版結構 pages/article/article.hml

<div class="article">
  <div class="navbar">
    <image @click="back()" class="angle-left" src="../../common/images/angle-left.png"></image>
  </div>
  <text class="title">遠光 | 騰訊連投5輪、6年融資過百億，每日優鮮沖刺“生鮮電商第一股</text>
  <div class="author">
    <image class="author-img" src="../../common/images/geek.png"></image>
    <div class="author-info">
        <text style="font-size: 16px;margin-bottom: 2px;">極客園科技</text>
        <text style="font-size: 14px;color: #999;">原創：2021-06-15</text>
    </div>
    <button class="author-follow">關注</button>
  </div>
  <div class="content">
    <text class="section">每日優鮮計劃以“MF”（英文名MissFresh的縮寫）為證券代碼，在納斯達克挂牌上市，暫定最高籌資額為1億美元，向“生鮮電商第一股”發起沖擊。</text>
    <text class="section">如今，“賣菜”生意競争進入白熱化，美團優選、橙心優選（滴滴旗下）、多多買菜（拼多多旗下）等網際網路巨頭進軍社群團購，同時又有來自叮咚買菜、美團買菜等同為“前置倉+配送模式”的對手正在快速發展。熬過了生鮮電商倒閉潮，賽道又重新火熱了起來，對于每日優鮮來說，這是好事，但也具挑戰。</text>
    <text class="section">在成本控制上，每日優鮮的毛利率從2018年的8.6%增加到2020年的19.4%。具體來看，在營收基本持平的情況下，每日優鮮的營業成本有了近10%左右的下降，商品直采或許是造成成本下降的主要原因。去年，每日優鮮副總裁、商品中心負責人劉智丹曾介紹稱，商品直采比例已接近目标中的80%，而直采也可以進一步降低成本，相比地采可減少10%以上。</text>
  </div>
  <div class="footer">
      
  </div>
</div>

模版樣式 pages/article/article.css

.article {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: #333;
}

.navbar {
  height: 56px;
  border-bottom: 0.5px solid #ccc;
  display: flex;
  align-items: center;
  padding: 0px 12px;
}
.angle-left {
  width: 24px;
  height: 24px;
}

.title {
  font-size: 24px;
  padding: 12px;
}

.author {
  padding: 12px;
  align-items: center;
}
.author-img {
  width: 50px;
  height: 50px;
  border-radius: 50px;
}
.author-info {
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding: 0px 10px;
}
.author-follow {
  background-color: #FC6627;
  width: 54px;
  height: 32px;
  font-size: 14px;
}
.content {
  padding: 12px;
  flex-direction: column;
}
.section {
  font-size: 18px;
  color: #444;
  line-height: 28px;
  margin-bottom: 10px;
}

10-實作路由跳轉

使用@system.router子產品在HarmonyOS應用實作路由切換

大緻步驟：

文章清單跳轉文章詳情
文章詳情傳回文章清單

落的代碼：

文章清單跳轉文章詳情

components/home/home.hml

+  <div @click="toArticlePage(item.id)" class="article-item" for="item in articles">

components/home/home.js

toArticlePage(id) {
    router.push({
      uri: 'pages/article/article',
      params: { id }
    })
  }

文章詳情傳回文章清單

pages/article/article.hml

<div class="navbar">
+    <image @click="back()" class="angle-left" src="../../common/images/angle-left.png"></image>
  </div>

pages/article/article.js

import router from '@system.router';
export default {
  back () {
    router.back()
  }
}

11-總結&下期展望

總結今日内容，和下期内容的展望，體驗分布式應用開發的樂趣。

本期總結：

知道鴻蒙OS是啥，搭建開發環境。
建構極客園應用，知道如何通過JS UI 建構頁面。
知道如何發請求，如何配置路由。

下期展望：

JS FA 調用 PA 實作調試列印日志
應用部署，手表和手機
應用同步，手表和手機
應用流轉，手表和手機
卡片開發

這篇隻需要你有一些前端基礎就可以上手開發HarmonyOS應用HarmonyOS應用開發-入門

文章目錄

HarmonyOS應用開發-入門

01-HarmonyOS介紹

02-DevEco IDE安裝

03-建立HarmonyOS應用

04-項目結構介紹

05-預覽JSUI界面

06-極客園首頁搭建

07-完成tab切換内容

08-擷取文章清單

09-文章詳情界面

10-實作路由跳轉

11-總結&下期展望

繼續閱讀

前端和背景是如何互動的？

怎樣使用SpringMVC控制頁面

Spring MVC 接收多個實體參數

CSS中僞類和僞元素的差別

Vue項目 - 單檔案元件和Vue中的路由

左耳朵耗子：程式員如何拿到年薪60萬的崗位？

沒救了! 困擾程式員一輩子的5個魔咒, 改掉比登天還難！

[轉]如何成長為一名全棧工程師全棧工程師

underscore模闆功能的使用和學習

CSS之折疊菜單

web開發之前後端渲染

JavaScript的那些坑之事件代理事件代理事件階段

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題