这篇只需要你有一些前端基础就可以上手开发HarmonyOS应用

文章目录

• 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是华为开发的一款面向未来的全场景分布式智慧操作系统，将逐步覆盖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 安装使用

• 安装步骤

• 注册华为帐号和实名认证 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项目

我们的目标是：开发极客园首页（文章列表）+文件详情 页面。

大致步骤：

• 创建项目

• 第一次进来：点击 Create HarmonyOS Project
• 有项目进来：File---->New---->New Project

• 选择项目模版

• 项目信息

总结：我们基于JS空模版创建一个项目。

04-项目结构介绍

了解项目的工作目录，文件作用等等

总结：

• entry—>src---->main 是项目的工作目录，写代码的地方。
• js—>default---->common 是公共资源目录（图片，组件）
• i18n 国际化
• pages 页面
• app.js 入口文件
• resources 应用资源
• config.json 应用配置

05-预览JSUI界面

预览界面，多终端预览，实时预览，模拟器预览。

大致步骤：

• 演示本地预览
• 演示远端预览

具体内容：

1. 本地预览

选中需要预览的页面

点击Preview进行预览

支持多设备同时预览

2. 远端预览

打开远端虚拟设备

登录华为帐号（登录后再次打开无此步骤）

运行设备

在这里插入图片描述

运行项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7JTNLu3w-1624521554169)(docs/media/1623687734840.png)]

06-极客园首页搭建

搭建首页界面，布局代码讲解

大致步骤：

• 准备资源图片
• 准备模版代码
• 准备初始数据
• 准备样式代码
• 讲解模版结构

落地代码：

• 准备图片资源

拷贝进入 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

import http from '@system.fetch'

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 构建页面。
• 知道如何发请求，如何配置路由。