uniapp项目教程

uniapp项目教程

环境搭建

安装HBuilderX，这是uniapp官方推荐的开发工具，支持Windows和Mac系统。下载后直接安装即可使用，无需额外配置Node.js环境。HBuilderX内置了uniapp项目模板和调试工具。

创建新项目时选择uniapp模板，根据需求选择默认模板或自定义模板。模板包含基础目录结构和配置文件，如manifest.json用于配置应用名称、图标等元信息。

目录结构

pages目录存放页面文件，每个页面由.vue文件、.js文件和.json文件组成。static目录存放静态资源如图片、字体等。components目录存放可复用的组件。

App.vue是应用入口文件，可设置全局样式和生命周期钩子。main.js是应用主逻辑文件，用于注册全局组件或插件。uni.scss是全局样式变量文件，支持SCSS语法。

页面开发

页面开发采用Vue单文件组件形式，模板部分使用HTML-like语法，支持Vue指令。样式部分支持CSS、LESS、SCSS等预处理器。脚本部分遵循Vue.js规范，可使用data、methods等选项。

路由通过pages.json配置，无需手动引入路由模块。页面跳转使用uni.navigateTo、uni.redirectTo等API，参数通过URL传递或在目标页面的onLoad钩子中获取。

组件使用

内置组件包括视图容器、表单组件、媒体组件等，命名规范为uni-前缀，如uni-view、uni-button。组件属性与小程序原生组件对齐，部分组件支持自定义样式。

自定义组件需在components目录创建，通过import引入后注册。组件通信使用Vue标准的props和$emit机制，跨组件通信可使用Vuex或事件总线。

API调用

网络请求使用uni.request，封装了HTTP客户端功能。数据缓存使用uni.setStorage和uni.getStorage系列API。设备能力调用如相机、地理位置等通过uni.chooseImage、uni.getLocation实现。

支付功能通过uni.requestPayment调用，需配置商户信息。推送通知使用uni.subscribePush和uni.onPush监听消息。API调用多数返回Promise对象，支持异步操作。

多端适配

条件编译通过#ifdef和#ifndef实现，可根据平台编写差异化代码。例如：

// #ifdef H5
console.log('仅在H5平台生效');
// #endif

样式适配使用upx单位，可自动转换为各平台适配的像素值。接口兼容性通过uni.canIUse检测，动态判断API是否可用。多端调试通过HBuilderX内置的浏览器、模拟器和真机调试工具完成。

打包发布

H5发布需配置manifest.json中的基础路径和路由模式。小程序发布需在对应平台开发者工具中上传代码。App打包通过HBuilderX生成安装包，Android需签名证书，iOS需开发者账号。

多端统一代码可通过CI/CD工具自动化构建。版本更新通过uni.getUpdateManager管理，App端支持静默更新。性能优化建议启用分包加载，减少首包体积。