uniapp 开发经验

跨平台兼容性设计

开发时需注意不同平台的特性差异，例如微信小程序不支持部分CSS属性，H5端需处理浏览器兼容问题。通过条件编译（如#ifdef H5）针对不同平台编写适配代码，确保功能一致性。

性能优化策略

避免频繁操作DOM，使用v-for时添加key属性提升列表渲染效率。图片资源采用压缩工具处理，必要时使用懒加载（如<image lazy-load>）。减少全局样式使用，优先采用组件级样式减少渲染压力。

组件化开发实践

利用uniapp的easycom机制自动引入组件，无需手动注册。复杂业务逻辑拆分为子组件，通过props和$emit实现父子通信。公共方法封装到mixins或自定义js模块中复用。

路由与导航管理

页面跳转优先使用uni.navigateTo保留当前页，或uni.redirectTo关闭当前页。TabBar切换需通过uni.switchTab实现。路由参数传递避免过长URL，复杂数据建议使用全局状态管理（如Vuex）。

调试与发布流程

开发阶段使用HBuilderX内置调试工具，真机测试通过USB连接设备直接运行。发布前检查各平台manifest配置（如小程序AppID、H5域名白名单）。打包时勾选“压缩代码”选项减少体积。

状态管理方案

简单场景使用uni.$on和uni.$emit进行事件通信。复杂应用推荐集成Vuex，按模块划分state、mutations和actions。持久化数据通过uni.setStorageSync本地存储。

第三方插件集成

地图功能调用uni.getLocation获取坐标，结合map组件展示。支付功能区分平台API（微信requestPayment/支付宝tradePay）。统计类SDK需按平台导入对应依赖包。

常见问题解决

页面样式冲突添加scoped属性隔离CSS。真机调试白屏检查基础路径配置是否正确。跨域问题在H5端通过代理解决，原生端需配置合法域名。

代码示例：条件编译

// #ifdef MP-WEIXIN
console.log('微信小程序特有逻辑');
// #endif
// #ifdef H5
console.log('H5端特有逻辑');
// #endif

代码示例：全局状态管理

// store/index.js
export default new Vuex.Store({
  state: { count: 0 },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});