当前位置：首页 > news >正文

快速上手UniApp（适用于有Vue3基础的）

news 2025/7/13 10:12:32

作为一位有Vue3基础的开发者，学习UniApp将会是一个相对平滑的过程。UniApp是一个使用Vue.js开发跨平台应用的前端框架，可以编译到iOS、Android、H5以及各种小程序平台。

一、UniApp简介

UniApp是基于Vue.js的跨平台开发框架，具有以下特点：

一次开发，多端发布（iOS/Android/H5/微信小程序/支付宝小程序等）
使用Vue语法，学习成本低
丰富的组件和API
良好的社区支持和文档

二、环境搭建

1. 安装HBuilderX

vscode也可以写uniapp，但是HBuilderX是官方推荐的IDE，下载地址：HBuilderX-高效极客技巧

2. 创建项目

打开HBuilderX
文件 → 新建 → 项目
选择"uni-app"项目模板
填写项目名称和路径
选择"默认模板"或"uni-ui项目"
点击创建

3. 项目结构

├── pages                 // 页面目录
│   ├── index             // 首页
│   │   ├── index.vue     // 首页vue文件
│   │   └── index.json    // 首页配置文件
├── static                // 静态资源
├── App.vue               // 应用入口文件
├── main.js               // 入口js文件
├── manifest.json         // 应用配置文件
└── pages.json            // 页面路由和导航栏配置

三、Vue3与UniApp的结合

1. 组合式API使用

UniApp完全支持Vue3的组合式API，你可以像在Vue3中一样使用setup()函数：

<script setup>
import { ref, onMounted } from 'vue'const count = ref(0)onMounted(() => {console.log('组件已挂载')
})function increment() {count.value++
}
</script><template><view><button @click="increment">点击计数: {{ count }}</button></view>
</template>

2. 响应式系统

UniApp使用Vue3的响应式系统，你可以直接使用ref和reactive：

<script setup>
import { ref, reactive } from 'vue'const message = ref('Hello UniApp!')
const user = reactive({name: '张三',age: 25
})function updateUser() {user.name = '李四'user.age += 1
}
</script>

四、核心概念

1. 页面与组件

UniApp中的页面和组件都是.vue文件，但有一些区别：

页面：位于pages目录下，每个页面有自己的路由路径
组件：可复用的UI单元，通常放在components目录下

2. 路由系统

UniApp的路由配置在pages.json中：

{"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "首页"}},{"path": "pages/user/user","style": {"navigationBarTitleText": "用户中心"}}]
}

页面跳转使用UniApp提供的API：

// 保留当前页面，跳转到应用内的某个页面
uni.navigateTo({url: '/pages/user/user'
})// 关闭当前页面，跳转到应用内的某个页面
uni.redirectTo({url: '/pages/user/user'
})// 返回上一页面
uni.navigateBack()

3. 生命周期

UniApp在Vue生命周期基础上扩展了一些应用和页面生命周期：

应用生命周期（App.vue中）：

onLaunch - 初始化完成时触发
onShow - 启动或从后台进入前台显示
onHide - 从前台进入后台

页面生命周期：

onLoad - 页面加载时
onShow - 页面显示时
onReady - 页面初次渲染完成
onHide - 页面隐藏时
onUnload - 页面卸载时

在组合式API中，可以使用onXxx来监听：

import { onLoad, onShow } from '@dcloudio/uni-app'onLoad(() => {console.log('页面加载')
})onShow(() => {console.log('页面显示')
})

五、UI开发

1. 基本组件

UniApp提供了一系列跨平台组件，替换了HTML原生标签：

HTML标签	UniApp组件	说明
div	view	视图容器
span	text	文本
img	image	图片
a	navigator	链接

示例：

<view class="container"><text>这是一段文本</text><image src="/static/logo.png" mode="aspectFit"></image>
</view>

2. 样式编写

UniApp支持大部分CSS特性，但需要注意：

使用rpx作为响应式单位（1rpx ≈ 0.5px）
某些CSS属性在不同平台可能有差异
支持Flex布局

.container {display: flex;flex-direction: column;align-items: center;padding: 20rpx;
}.title {font-size: 32rpx;color: #333;
}

3. 条件编译

UniApp提供了条件编译来处理多端差异：

<!-- #ifdef H5 -->
<view>这段内容只在H5平台显示</view>
<!-- #endif --><!-- #ifdef MP-WEIXIN -->
<view>这段内容只在微信小程序显示</view>
<!-- #endif -->

也可以在JS中使用：

// #ifdef H5
console.log('这段代码只在H5平台执行')
// #endif

六、API调用

UniApp提供了丰富的API，涵盖设备、网络、媒体等功能：

1. 网络请求

uni.request({url: 'https://example.com/api',method: 'GET',success: (res) => {console.log(res.data)},fail: (err) => {console.error(err)}
})

2. 数据缓存

// 异步存储
uni.setStorage({key: 'token',data: 'abcdefg',success: () => {console.log('存储成功')}
})// 同步存储（推荐在setup中使用）
try {uni.setStorageSync('token', 'abcdefg')
} catch (e) {console.error(e)
}

3. 设备信息

uni.getSystemInfo({success: (res) => {console.log(res.platform) // 平台console.log(res.windowWidth) // 窗口宽度}
})

七、状态管理

对于复杂应用，可以使用Pinia进行状态管理：

1. 安装Pinia

npm install pinia @pinia/nuxt

2. 创建store

// stores/counter.js
import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', {state: () => ({count: 0}),actions: {increment() {this.count++}}
})

3. 在main.js中配置

import { createSSRApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'export function createApp() {const app = createSSRApp(App)app.use(createPinia())return {app}
}

4. 在组件中使用

<script setup>
import { useCounterStore } from '@/stores/counter'const counter = useCounterStore()
</script><template><view><text>Count: {{ counter.count }}</text><button @click="counter.increment()">增加</button></view>
</template>