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++;
}
}
});
