佛山网站建设运营求网站建设的视频
作为一位有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/nuxt2. 创建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>八、调试与发布
1. 调试
- H5：直接在浏览器中调试
- 小程序：使用对应开发者工具
- App：使用真机调试或模拟器
2. 发布
- HBuilderX中选择"发行"
- 选择目标平台（H5/小程序/App等）
- 根据向导完成配置
- 生成发布包
九、学习资源
- 官方文档：https://uniapp.dcloud.net.cn/
- UniUI组件库：https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html
- 插件市场：https://ext.dcloud.net.cn/
- 社区论坛：https://ask.dcloud.net.cn/