大帅老猿uniapp

以下是关于UniApp开发的实用信息整理，涵盖核心功能、优化技巧及常见问题解决方案：

开发环境搭建

安装HBuilderX作为官方推荐IDE，内置UniApp模板和调试工具。配置Node.js环境用于依赖管理，通过npm或yarn安装必要插件。创建项目时选择uni-app模板，支持vue-cli和HBuilderX两种方式。

跨平台适配

使用条件编译处理平台差异代码，语法格式为// #ifdef H5或/* #ifndef APP-PLUS */。统一采用flex布局确保多端显示一致性，通过uni.upx2px()转换单位适应不同屏幕密度。调用uni.getSystemInfoSync()获取设备信息动态调整UI。

性能优化

减少页面DOM层级深度，避免超过10层嵌套。使用v-if替代v-show控制显隐，列表渲染添加:key标识。图片资源压缩至100KB以下，优先使用WebP格式。分包加载配置manifest.json的subPackages字段，主包控制在2MB内。

原生能力调用

通过uni.requireNativePlugin()调用原生模块，摄像头调用示例：

uni.chooseImage({
  count: 1,
  sourceType: ['camera'],
  success: function (res) {
    console.log(res.tempFilePaths)
  }
})

数据缓存策略

区分uni.setStorageSync（同步）和uni.setStorage（异步）使用场景，敏感数据采用uni.setStorageEncryptedSync加密存储。定期清理缓存时检查uni.getStorageInfoSync()获取当前占用情况。

常见问题处理

白屏问题优先检查路由配置和页面路径是否正确。真机调试使用HBuilderX生成自定义调试基座，Android平台需确认USB调试模式开启。支付功能需在各平台商户后台完成配置，调用uni.requestPayment前校验订单有效性。

插件生态

常用UI库包括uView、ColorUI等，图表推荐使用ucharts。地图服务需申请各平台密钥，高德地图示例配置：

"app-plus": {
  "modules": {
    "Maps": {
      "AMap": "高德key"
    }
  }
}

发布流程

H5平台注意配置manifest.json的router模式，微信小程序需在project.config.json设置appid。App打包前生成签名证书，iOS需配置ATS安全传输协议。各平台审核重点关注隐私政策提示和权限说明。