代碼倉地址，大家記得點個star

IbestKnowTeach: 百得知識庫基于鴻蒙NEXT穩定版實現的一款企業級開發項目案例。 本案例涉及到多個鴻蒙相關技術知識點： 1、布局 2、配置文件 3、組件的封裝和使用 4、路由的使用 5、請求響應攔截器的封裝 6、位置服務 7、三方庫的使用和封裝 8、頭像上傳 9、應用軟件更新等https://gitee.com/xt1314520/IbestKnowTeach

項目準備

項目介紹

“百得知識庫軟件”是一款專注于編程技術領域的學習資源App，旨在為開發者提供豐富的學習材料。這里涵蓋了廣泛的IT相關知識，無論是編程語言、軟件開發，還是最新的技術趨勢，都能找到詳盡的資料。該軟件不僅有助于開發者提升專業技能，還通過完善的社區和文檔支持促進交流與合作。用戶可以輕松獲取解決方案，參與討論，從而加速個人成長和技術問題的解決。

通過項目學到什么

1. 華為賬號授權登錄
2. 三方庫的使用和封裝
3. 組件的封裝和使用
4. 頭像上傳
5. 應用軟件更新
6. 日歷組件的使用
7. 地理位置定位

......

創建項目

1、點擊文件，新建項目

2、選擇模板

修改項目名，包名，項目名等信息

3、完成創建

4、打開模擬器，運行項目

5、修改應用名稱和圖標

1、在跟目錄下面AppScope/resources/base/media替換app_icon圖片

2、修改module.json5文件

替換成app_icon

3、修改應用名稱

將label修改成百得知識庫

導入靜態資源

1、resources/base/element

📎color.json

📎float.json

📎string.json

2、resources/en_US/element

📎string.json

3、resources/zh_CN/element

📎string.json

4、百得知識庫里面的靜態圖片資源

https://download.csdn.net/download/weixin_51166786/90426858

5、修改module.json5里面的startWindowIcon里面的值

"startWindowIcon": "$media:start_icon"

項目三方庫依賴

三方庫官方地址：

OpenHarmony三方庫中心倉

1、@ohos/axios （網絡請求三方庫）

ohpm install @ohos/axios@2.2.0

2、@ibestservices/ibest-ui （組件三方庫）

ohpm install @ibestservices/ibest-ui@2.0.3

日志的封裝

在ets下面新建utils目錄，然后在這個目錄下面新建Logger.ets

import { hilog } from '@kit.PerformanceAnalysisKit'const DOMAIN = 0x0000
const TAG = 'wdl'
const FORMAT = '%{public}s %{public}s'export class Logger {static debug(...args: string[]) {hilog.debug(DOMAIN, TAG, FORMAT, args)}static info(...args: string[]) {hilog.info(DOMAIN, TAG, FORMAT, args)}static warn(...args: string[]) {hilog.warn(DOMAIN, TAG, FORMAT, args)}static error(...args: string[]) {hilog.error(DOMAIN, TAG, FORMAT, args)}
}

文本提示框的封裝

在ets/utils目錄下面新建Toast.ets

import promptAction from '@ohos.promptAction'/*** 顯示toast* @param { string } message 顯示的信息*/
export function showToast(message: string) {promptAction.showToast({message: message || '請求錯誤',duration: 2000,})
}

用戶首選項的封裝

在ets/utils目錄下面新建PreferencesUtil.ets

import { preferences } from '@kit.ArkData'export class PreferencesUtil {/*** 保存數據到首選項* @param preferencesName* @param key* @param value*/static async savaData<T extends keyof number | number | string | boolean | Array<number> | Array<string> | Array<boolean>>(preferencesName: string,key: string, value: T) {const pre = preferences.getPreferencesSync(getContext(), { name: preferencesName })pre.putSync(key, value as preferences.ValueType)await pre.flush()}/*** 獲取數據* @param preferencesName* @param key* @param defaultValue* @returns*/static getData<T extends keyof number | number | string | boolean | Array<number> | Array<string> | Array<boolean>>(preferencesName: string,key: string, defaultValue: T) {const pre = preferences.getPreferencesSync(getContext(), { name: preferencesName })return pre.getSync(key, defaultValue as preferences.ValueType) as T}/*** 刪除數據* @param preferencesName* @param key*/static async delAllData(preferencesName: string, key: string) {const pre = preferences.getPreferencesSync(getContext(), { name: preferencesName })pre.deleteSync(key)await pre.flush()}
}

新建常量類

在ets/contants目錄下面新建CommonConstant.ets和RouterConstant.ets

1、CommonConstant.ets

export class CommonConstant {/*** 百分百寬度*/static readonly WIDTH_FULL = '100%'/*** 百分百高度*/static readonly HEIGHT_FULL = '100%'/*** 開屏廣告頁面默認展示時間，單位秒*/static readonly ADVERTISING_TIME: number = 3;/*** 結束時間，單位秒*/static readonly ADVERTISING_END_TIME: number = 0;/*** 存token值的名稱（token)*/static readonly TOKEN_NAME: string = 'token';/*** 用戶首選項實例的名稱*/static readonly PREFERENCES_NAME: string = 'preferences';/*** 存用戶信息的本地存儲名稱*/static readonly USER_INFO: string = 'userInfo';/*** 登錄錯誤*/static readonly DEFAULT_LOGIN_ERROR: string = '登錄錯誤';
}

2、RouterConstant.ets

export class RouterConstant {/*** 首頁*/static readonly PAGE_INDEX = 'pages/Index'/*** 登錄*/static readonly PAGE_LOGIN = 'pages/LoginPage'/*** 打卡*/static readonly VIEWS_CLOCK = 'views/Learn/Clock'/*** 打卡記錄*/static readonly VIEWS_CLOCK_RECORD = 'views/Learn/ClockRecord'/*** 學習目標*/static readonly VIEWS_LEARN_TARGET = 'views/Learn/LearnTarget'/*** 學習工具*/static readonly VIEWS_LEARN_TOOL = 'views/Learn/LearnTool'/*** 學習平臺內容*/static readonly VIEWS_LEARN_CONTENT = 'views/Learn/LearnContent'/*** 面試平臺內容*/static readonly VIEWS_INTERVIEW_CONTENT = 'views/Learn/InterviewContent'/*** home頁面*/static readonly VIEWS_HOME_HOME = 'views/Home/Home'/*** 文章詳情頁面*/static readonly VIEWS_HOME_ARTICLE_INFO = 'views/Home/ArticleInfo'/*** home搜索頁面*/static readonly VIEWS_HOME_SEARCH = 'views/Home/Search'/*** 消息列表頁面*/static readonly VIEWS_MESSAGE_LIST = 'views/Message/MessageList'/*** 個人信息*/static readonly VIEWS_MINE_INFO = 'views/Mine/MineInfo'/*** 我的收藏*/static readonly VIEWS_MINE_COLLECT = 'views/Mine/MineCollect'/*** 我的點贊*/static readonly VIEWS_MINE_LIKE = 'views/Mine/MineLike'/*** 關于我們*/static readonly VIEWS_MINE_ABOUT_US = 'views/Mine/AboutUS'/*** 設置*/static readonly VIEWS_MINE_SET_UP = 'views/Mine/SetUp'/*** 隱私政策*/static readonly PAGE_PRIVACY_POLICY = 'pages/PrivacyPolicyPage'/*** 用戶協議*/static readonly PAGE_USER_POLICY = 'pages/UserPolicyPage'
}

請求響應攔截器的封裝

在ets下面新建request目錄，然后在這個目錄下面新建Request.ets和Request.type.ets

1、Request.ets

import axios, { AxiosError, AxiosResponse, InternalAxiosRequestConfig } from '@ohos/axios'
import { CODE_TYPE, BASE_HOST } from "./Request.type"
import { Logger } from '../utils/Logger';
import { showToast } from '../utils/Toast';
import { CommonConstant } from '../contants/CommonConstant';
import { PreferencesUtil } from '../utils/PreferencesUtil';
import { router } from '@kit.ArkUI';
import { RouterConstant } from '../contants/RouterConstant';/*** axios封裝*/
const http = axios.create({baseURL: `http://${BASE_HOST}`,headers: {'Content-Type': 'application/json',"Channel": "B2B"}
},)/*** 添加請求攔截器*/
http.interceptors.request.use((config: InternalAxiosRequestConfig) => {// 獲取數據const token: string | undefined = AppStorage.get("token")// 獲取tokenif (token) {config.headers.Authorization = token}return config;
}, (error: AxiosError) => {// 對請求錯誤做些什么return Promise.reject(error);
});/*** 添加響應攔截器*/
http.interceptors.response.use((response: AxiosResponse) => {Logger.info("請求狀態碼" + response.data.code, JSON.stringify(response.data));// 判斷響應狀態碼if (response.status === CODE_TYPE.SUCCESS) {// 請求成功if (response.data.code === CODE_TYPE.SUCCESS) {return Promise.resolve(response.data.data);} else if (response.data.code === CODE_TYPE.NO_LOGIN) {clearLoginInfoAndGoLoginPage();}}// 接口響應報錯新信息showToast(response.data.message);return Promise.reject(response);
}, (error: AxiosError) => {showToast('網絡錯誤，換個網絡試試');return Promise.reject(error);
});export default http;/*** 清除用戶信息并跳到登錄頁面*/
async function clearLoginInfoAndGoLoginPage() {// 401錯誤  -> 清理用戶信息，跳轉到登錄頁// 清理token，返回登錄頁// userInfo有訂閱者刪不掉，所以重新賦值空的給userInfoAppStorage.setOrCreate(CommonConstant.USER_INFO, {nickname: '',unionId: '',avatarUri: '',id: 0})AppStorage.delete(CommonConstant.TOKEN_NAME)await PreferencesUtil.delAllData(CommonConstant.PREFERENCES_NAME, CommonConstant.TOKEN_NAME)await PreferencesUtil.delAllData(CommonConstant.PREFERENCES_NAME, CommonConstant.USER_INFO)// 跳轉登錄頁面router.pushUrl({url: RouterConstant.PAGE_LOGIN})
}

2、Request.type.ets

export enum CODE_TYPE {SUCCESS = 200,NO_LOGIN = 401
}/*** host地址*/
export const BASE_HOST = '118.31.50.145:9003'

服務端接口文檔地址

api.md