第一章 uniapp开发鸿蒙app项目搭建
文章目录
- 前言
- 一、vue3+vite+uniapp 框架搭建
- 1.cli搭建项目框架
- 2.封装请求方法
- 二.pinia安装
- 1.安装
- 2.创建pinia模块
- 3.模块导出，挂载全局
- 三、uni-ui组件库导入
- 1.准备sass
- 2.安装uni-ui
- 3.配置easycom
- 四、适配鸿蒙
- 1.HbuilderX配置DevEco-Studio 启动路径
- 2.配置鸿蒙离线SDK（sdk由uniapp提供）
- 3.配置签名文件
- 五、uniapp插件/原生API使用
- 总结
前言
记录本人使用uniapp开发鸿蒙的过程。本章记录项目创建的过程。
项目框架：uniapp（vue3 + ts）+ uni-ui + pinia + 鸿蒙
一、vue3+vite+uniapp 框架搭建
1.cli搭建项目框架
全局安装 vue-cli 官网
npm install -g @vue/cli
npx degit dcloudio/uni-preset-vue#vite-ts 项目名称
2.封装请求方法
// 请求封装
import { getBaseUrl } from '@/config/index.ts' // 获取基地址的方法请根据项目情况配置
type paramsType = {
url: string
data: any
method: 'OPTIONS' | 'GET' | 'HEAD' | 'POST' | 'PUT' | 'DELETE' | 'TRACE' | 'CONNECT'
base: string // 决定基地址的
timeout?: number
dataType?: string
header?: header // 根据header的数据来定义
loading?: boolean // 加载状态
}
export const HTTP = (params: paramsType) => {
if (params.loading) {
uni.showLoading()
}
const baseUrl = getBaseUrl(params.base) // 获取基地址
let header: any = {
'content-type': params.header?.contentType || 'application/x-www-form-urlencoded', // 'application/json'
}
if (uni.getStorageSync('token')) { // 请求头的token 其他的配置根据需要
header['Token'] = uni.getStorageSync('token')
}
return new Promise((resolve, reject) => {
uni.request({
url: baseUrl + params.url,
method: params.method || 'GET',
timeout: params.timeout || 50000,
header: header,
data: params.data,
success: (res: any) => {
resolve(res.data)
uni.hideLoading()
},
fail: (err) => {
reject(err)
uni.hideLoading()
}
})
})
}
二.pinia安装
1.安装
安装pinia，UniApp+Vue3中自带pinia不需要进行下载pinia
npm install lodash-es
npm install @types/lodash-es
安装pinia持久化插件
npm i pinia-plugin-persistedstate
创建文件夹
2.创建pinia模块
import {defineStore} from "pinia" // 引入pinia方法
import { ref } from "vue" // 引入 ref
// 定义一个store
export const indexInfo = defineStore('name',()=>{
// 定义数据+方法
let num = 0
let add = ()=>{
num += 1
}
return{
// 返回数据方法
num,
add
}
},{
// 配置持久化信息
persist:{
storage:{
getItem:uni.getStorageSync,
setItem:uni.setStorageSync
}
}
})
3.模块导出，挂载全局
所有模块在文件进行统一导出
// /store/modules/index.ts
// 导出所有子模块中的数据
export * from './user.ts'
... // 其他的模块导入
// /store/index.ts
import { createPinia } from "pinia" // 引入pinia
import persist from "pinia-plugin-persistedstate" // 引入pinia持久化插件
const pinia = createPinia() // 实例化pinia
pinia.use(persist) // 使用persist插件
export default pinia; // 导出pinia引入main.js使用
// 导出所有子模块中的数据
export * from "./modules/index.ts"
挂载全局
// mian.ts
import { createSSRApp } from 'vue'
import App from './App'
import pinia from "./store/index.js"
export function createApp() {
const app = createSSRApp(App)
app.use(pinia)
return {
app
}
}
三、uni-ui组件库导入
1.准备sass
npm i sass -D 或 yarn add sass -D
npm i sass-loader@10.1.1 -D 或 yarn add sass-loader@10.1.1 -D
2.安装uni-ui
npm i @dcloudio/uni-ui 或 yarn add @dcloudio/uni-ui
3.配置easycom
// pages.json
{
"easycom": {
"autoscan": true,
"custom": {
// uni-ui 规则如下配置
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
},
// 其他内容
pages:[
// ...
]
}
四、适配鸿蒙
1.HbuilderX配置DevEco-Studio 启动路径
打开HBuilderX，点击上方菜单 - 工具 - 设置 - 源码视图 - 用户设置，填你自己的 DevEco-Studio 启动路径
2.配置鸿蒙离线SDK（sdk由uniapp提供）
鸿蒙离线SDK template-1.3.4.tgz
这个SDK是我在下面参考文件链接里面找到的，我在uniapp的官网没找到，如果大家有找到更新版本的请评论告知我一下，感谢
DevEco Studio中文汉化配置 大家可以根据需要进行汉化配置
将这个离线的sdk解压后放到项目中，DevEco-Studio 中打开解压后的sdk
3.配置签名文件
在DevEco Studio中登录华为账户，测试用自己的账户生成签名就行
！！签名文件的生成请按照鸿蒙应用签名生成文件教程来
五、uniapp插件/原生API使用
右键 uni_modules 目录（没有则新建目录），下载uniapp的插件会在这个文件夹里面
其实我有用到插件，但是插件目前还没解决我的问题，不确保之后会不会保留
总结
参考文档：
前端VUE3+Vite +UniAPP-- 框架搭建
uni-ui官网
Uni-app 开发鸿蒙 App 全攻略
UniApp+Vue3引入Pinia的案例（小白通吃）
Uniapp + Vue3 封装请求工具挂载全局
HarmonyOS应用开发：Uniapp鸿蒙实战
uni-app开发华为鸿蒙Harmony Next实践（保姆级） 这个里面有SDK
鸿蒙应用签名生成文件教程
上面是24年10月份左右的搭建项目的大概经历。本人小白，开发过程报错较多，项目还在开发阶段，以后会继续记录的。
