uniapp 开发详解
uniapp 基础概念
uniapp 是一个基于 Vue.js 的跨平台开发框架，支持一次编写代码，同时发布到 iOS、Android、H5 以及微信小程序等多个平台。核心特点包括跨平台兼容性、组件化开发和丰富的插件生态。
开发环境搭建
安装 HBuilderX（官方推荐的 IDE），内置 uniapp 开发模板和调试工具。
配置 Node.js 环境，确保 npm 或 yarn 可用。
通过 HBuilderX 创建 uniapp 项目，选择默认模板或自定义模板。
项目目录结构
pages：存放页面文件，每个页面由.vue文件、json配置和样式文件组成。static：静态资源目录，存放图片、字体等。manifest.json：应用配置，包括应用名称、图标、权限等。App.vue：应用入口文件，全局样式和生命周期在此定义。
页面开发规范
每个页面需在 pages.json 中注册路由：
{
"pages": [
{ "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" } }
]
}页面组件使用 Vue 单文件组件（SFC）格式：
<template>
<view class="container">
<text>{{ message }}</text>
</view>
</template>
<script>
export default {
data() {
return { message: "Hello uniapp" };
}
};
</script>
<style>
.container { padding: 20px; }
</style>跨平台兼容性处理
使用条件编译注释处理平台差异代码：
// #ifdef H5
console.log("仅在 H5 平台执行");
// #endif常见平台标识：H5、MP-WEIXIN（微信小程序）、APP（原生应用）。
组件与 API
内置组件如 <view>、<text> 替代 HTML 标签，支持跨平台渲染。
调用 uniapp API 实现设备功能（如摄像头、地理位置）：
uni.getLocation({
type: 'wgs84',
success: res => console.log(res.latitude, res.longitude)
});状态管理
简单场景使用 Vuex 管理全局状态：
// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: { count: 0 },
mutations: { increment(state) { state.count++; } }
});在页面中通过 this.$store 访问。
打包与发布
- H5：通过 HBuilderX 生成
dist目录，部署到 Web 服务器。 - 小程序：配置微信开发者工具路径，生成特定平台代码并上传。
- App：使用原生云打包或离线打包生成 APK/IPA 文件。
调试技巧
- 使用 Chrome 开发者工具调试 H5 版本。
- 小程序端通过微信开发者工具实时预览。
- 原生应用使用
console.log或 HBuilderX 内置调试器。
性能优化
- 减少大图加载，使用压缩工具处理静态资源。
- 避免频繁
setData调用，合并数据更新。 - 使用
v-if替代v-show减少初始渲染负担。
常见问题解决
- 白屏问题：检查路由配置或资源路径是否正确。
- 样式失效：确认样式作用域或平台兼容性。
- API 调用失败：检查权限配置或异步调用逻辑。
通过以上步骤可系统掌握 uniapp 开发流程，结合实际项目需求灵活应用跨平台特性。
