[完结14章]鸿蒙系统实战短视频App 从0到1掌握HarmonyOS

网盘地址：https://pan.baidu.com/s/1KqyO8--FE6LSDoNcVfwLbQ 提取码：p64r 腾讯微云下载地址：https://share.weiyun.com/aXaiIMC3 密码：q5aaj7 HarmonyOS作为全球第三大移动应用生态，已有诸多公司将鸿蒙开发列入招聘优先选项，现在入局正当时。但鸿蒙系统涉及颇广，入门容易，进阶难。本课程特邀鸿蒙资深技术达人带你系统学习HarmonyOS 组件和API，实战HarmonyOS 9大主题核心技术，具备0到1独立实现完整HarmonyOS App实战能力，助力移动端开发者拓展职业新边界。 针对HarmonyOS开发按不同的角度划分，可以有不同的分发： 1、从宏观大类上分为三类：1）通用开发（可安装应用app，兼容安卓和鸿蒙）、2）原子化服务（鸿蒙自己特有的免安装应用服务）、3）智能设备开发（智慧屏、穿戴设备，华为最新的手表已经支持安装应用了，可以说想象无限，未来可以当做微型手机）。 2、如果从开发语言上分：Java、JavaScript（支持传统js和带界面的低代码量开发）、eTS（华为自定义的一种声明式语言，代码简练更符合开发习惯，华为自己宣传更贴近自然语义，更高效、简洁，跨平台，粗看代码非常简练、易懂）。 本文适用于 HarmonyOS 应用开发的初学者。编写两个简单的页面，实现在 第一个页面点击按钮跳转到第二个页面，之后还可以通过跨设备启动第二个 页面来初步体验 HarmonyOS 的分布式能力。 编写第一个页面 在 Java UI 框架中，提供了两种编写布局的方式：在 XML 中声明 UI 布局和 在代码中创建布局。这两种方式创建出的布局没有本质差别，为了熟悉两种 方式，我们将通过 XML 的方式编写第一个页面，通过代码的方式编写第二个 页面。 XML 编写页面 1. 在“Project”窗口，打开“entry > src > main > resources > base”，右键点击“base”文件夹，选择“New > Directory”，命名为“layout”。 创建请求实例 请求拦截：可以拦截每次或某些特定请求 HTTP请求；为请求带上添加 token 响应拦截：判断错误状态码, 进行相应报错等提示操作;清除过期 token 封装常用请求：get、post、delete等等 定义接口方法：封装调用后端 api的操作，返回一个 Promise对象 import axios from 'axios' const defaultConfig = { timeout: 5000, baseURL: '/release/' } const axiosInstance = axios.create(defaultConfig) // 添加请求拦截器 axiosInstance.interceptors.request.use(config => { return config }, (err) => { // 对请求错误做些什么 return Promise.reject(err) }) // 请求拦截器，内部根据返回值，重新组装，统一管理。 axiosInstance.interceptors.response.use(res => { console.log('接口详情：',res) return res }) export default { // 封装get httpGet(url: any, params = {}) { return axiosInstance.get(url, { params }).then(res => res.data).catch() }, // 封装post httpPost(url: any, params = {}) { return axiosInstance.get(url, { params }).then(res => res.data).catch() } } 如何使用 TS来改造呢，我们将 Axios请求定义成一个类，封装好常用的请求，暴露出去，将一些私有属性和方法放置在 class内部，比如：Axios实例、请求和相应拦截；另外将一些方法暴露出去给外部使用，比如 get和post请求方式 import axios, { AxiosRequestConfig,AxiosResponse } from 'axios' import { ElMessage } from 'element-plus' const defaultConfig:AxiosRequestConfig = { timeout: 5000, baseURL: '/release/' } class Http { constructor() { this.httpInterceptorsRequest() this.httpInterceptorsResponse() } // 实例化axios private static axiosInstance = axios.create(defaultConfig) // 请求拦截 private httpInterceptorsRequest(): void { Http.axiosInstance.interceptors.request.use((config: AxiosRequestConfig) => { return config }, (err:any) => { // 对请求错误的处理 return Promise.reject(err) }) } // 响应拦截 private httpInterceptorsResponse(): void { Http.axiosInstance.interceptors.response.use((res: AxiosResponse) => { // 对响应成功的处理，处理一些接口成功的状态码，比如:2xx范围内的状态码 const { data } = res const { success } = data if (success) { ElMessage('成功') } else { ElMessage('失败') } return res }, (err:any) => { // 对响应错误的处理，处理一些接口失败所返回的状态码，比如：3XX,4XX,5XX范围内的状态码 return Promise.reject(err) ElMessage('服务器异常') }) } public httpGet<T>(url: string, params?: T): Promise<T> { return Http.axiosInstance.get(url, { params }).then(res => res.data).catch() } public httpPost<T>(url: string, params?: T): Promise<T> { return Http.axiosInstance.post(url, { params }).then(res => res.data).catch() } } export const http = new Http() onsuccess表示打开数据库成功的事件。 onerror表示打开数据库失败的事件。 onupgradeneeded是数据库升级事件，如果版本号更新，并且大于之前的版本号则进行数据库升级，该事件回调里面，会创建我们所需要的对象仓库，类似于关系型数据库中的表的概念。 export default class DB { private dbName: string // 数据库名称 constructor(dbName: string) { this.dbName = dbName } // 打开数据库 public openStore(storeName: string, keyPath: string, indexs?: Array<string>) { const request = window.indexedDB.open(this.dbName, 2) request.onsuccess = (event) => { console.log('数据库打开成功') console.log(event) } request.onerror = (event) => { console.log('数据库打开失败') console.log(event) } request.onupgradeneeded = (event) => { console.log('数据库升级成功') const { result }: any = event.target const store = result.createObjectStore(storeName, { autoIncrement: true, keyPath }) if (indexs && indexs.length > 0) { indexs.map((v: string) => { store.createIndex(v, v, { unique: true }) }) } store.transaction.oncomplete = (event: any) => { console.log('创建对象仓库成功') } console.log(event) } } } 内核层：提供⼿机操作系统的基础能⼒。HarmonyOS采⽤多内核的系统设计，基于 Linux内核、LiteOS，使⽤了Linux的微内核（使⽤了Linux的最简功 能） Linux内核： ⼿机操作系统的内核 LiteOS内核：智能硬件的内核 系统服务层：HarmonyOS的核⼼能⼒集合，这些能⼒是有系统本身决定的，为我们应⽤ 开发提供了服务调⽤功能。系统服务层提供的能⼒是可以被我们开发的应⽤进⾏调⽤的。 框架层：为HarmonyOS的应⽤开发提供了不同语⾔程序调⽤的接⼝ updateItem(storeName: string, data: any) { console.log(this.db) const store = this.db.transaction([storeName], 'readwrite').objectStore(storeName) const request = store.put({ ...data, updateTIme: new Date().getTime() }) request.onsuccess = (event: any) => { console.log('数据写入成功') console.log(event) } request.onerror = (event: any) => { console.log('数据写入失败') console.log(event) } } 封装Mock接口 在 src/api目录下新建 login模块的 Mock接口 注册接口：userSignApi 代码片段如下： // mock接口：用户注册 export async function userSignApi(params: any) { const loading = ElLoading.service({ lock: true, background: 'rgba(0, 0, 0, 0.1)' }) // 是否存在相同手机号 const hasMobile = await new Promise((resolve, reject) => { airbnb.airbnbDB.getList(storeName).then((res: any) => { setTimeout(() => { loading.close() }, 200) res && res.filter((item: any) => { if (item.mobile === params.mobile) { // 存在相同手机号 resolve(true) } }) resolve(false) }) }) let result: IResultOr if (hasMobile) { result = await new Promise((resolve, reject) => { resolve({ code: '000001', success: false, message: '数据已存在', result: null }) }) } else { const obj = { status: 0 } Object.assign(params, obj) result = await new Promise((resolve, reject) => { airbnb.airbnbDB.updateItem(storeName, params).then(res => { setTimeout(() => { loading.close() }, 200) resolve({ code: '000000', success: true, message: '操作成功', result: null }) }) }) } return result }