UniApp跨平台开发实战总结

1. 平台兼容性处理

Android

iOS

微信小程序

H5

条件编译


// 样式条件编译
/* #ifdef APP-PLUS */
.app-style {
    flex-direction: row;
}
/* #endif */

/* #ifdef MP-WEIXIN */
.mp-style {
    flex-direction: column;
}
/* #endif */

// JS条件编译
const platform = () => {
    // #ifdef APP-PLUS
    return 'APP'
    // #endif
    
    // #ifdef MP-WEIXIN
    return '微信小程序'
    // #endif
    
    // #ifdef H5
    return 'H5'
    // #endif
}

2. 性能优化实践

2.1 列表优化




    
        
            {{ item.content }}

性能优化建议

  • 使用分包加载减小主包体积
  • 合理使用图片懒加载
  • 避免频繁的setData操作
  • 使用骨架屏优化首屏加载

3. 常见问题解决方案

3.1 样式兼容


/* 解决小程序和App样式差异 */
.container {
    /* #ifdef MP */
    width: 750rpx;
    /* #endif */
    
    /* #ifdef APP-PLUS */
    width: 100%;
    /* #endif */
}

/* 解决iOS安全区域 */
.safe-area {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

3.2 网络请求封装


// request.js
const request = (options = {}) => {
    return new Promise((resolve, reject) => {
        uni.request({
            url: baseUrl + options.url,
            method: options.method || 'GET',
            data: options.data,
            header: getHeader(),
            success: (res) => {
                if (res.statusCode === 200) {
                    resolve(res.data);
                } else {
                    handleError(res);
                    reject(res);
                }
            },
            fail: (err) => {
                handleError(err);
                reject(err);
            }
        });
    });
}

4. 最佳实践总结

项目结构建议

├── components     // 公共组件
├── pages         // 页面文件
├── static        // 静态资源
├── store         // Vuex状态管理
├── utils         // 工具函数
├── api           // 接口封装
└── platforms     // 平台特定代码

开发建议

  • 使用easycom简化组件引入
  • 合理使用分包和预加载
  • 统一管理接口和状态
  • 注意平台差异性处理
  • 做好错误处理和降级方案