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

uyandmiss · · 637 次点击 · 开始浏览    置顶

网盘地址: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 }

有疑问加站长微信联系(非本文作者)

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:692541889

637 次点击  
加入收藏 微博
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传