uniapp编译教学

uniapp编译基础流程

安装HBuilderX开发工具，确保已配置好Node.js环境。创建新项目时选择uniapp模板，根据需求选择vue2或vue3版本。

配置manifest.json文件，设置应用名称、图标等基本信息。在pages.json中定义页面路由和窗口样式，调整tabBar等导航组件。

开发调试模式

通过HBuilderX内置浏览器进行实时预览，使用快捷键Ctrl+R刷新页面。真机调试需连接Android/iOS设备，开启USB调试模式后运行到手机。

使用Chrome开发者工具分析网络请求和DOM结构。开启source map便于调试压缩后的代码，在vue.config.js中配置devtool选项。

多端编译配置

编译微信小程序需在manifest.json配置appid，通过HBuilderX菜单栏发行->小程序-微信生成产物。调整project.config.json文件适配微信API。

编译H5版本时注意路由模式差异，hash模式需服务器支持。静态资源路径使用绝对路径，通过process.env.NODE_ENV判断环境变量。

性能优化技巧

启用分包加载策略，在pages.json中配置subPackages分割模块。使用uni.compressImage压缩图片资源，减少首屏加载体积。

合理使用onLoad和onUnload生命周期管理内存。避免频繁setData操作，大数据列表采用虚拟滚动技术。

常见问题解决

白屏问题检查路由配置和入口文件，排查静态资源加载路径。跨域问题配置代理或使用uni.request封装。

原生组件兼容性问题使用条件编译：

// #ifdef MP-WEIXIN
wx.createSelectorQuery()
// #endif

编译错误查看控制台日志，清理项目后重新npm install。真机调试失败检查设备驱动和开发者选项设置。