UniApp跨平台解决方案

1. 平台兼容性处理

Android

iOS

小程序

H5


// 条件编译
// #ifdef APP-PLUS
console.log('App环境');
// #endif

// #ifdef MP-WEIXIN
console.log('微信小程序环境');
// #endif

// #ifdef H5
console.log('H5环境');
// #endif

2. 性能优化实践

首屏加载优化


// 页面预加载
onLoad() {
    // 预加载下一页数据
    uni.preloadPage({
        url: '/pages/detail/detail'
    });
}

// 图片懒加载


// 分包加载
{
    "subPackages": [{
        "root": "pages/detail",
        "pages": [{
            "path": "detail",
            "style": { ... }
        }]
    }]
}

常见性能问题

  • 页面切换白屏
  • 长列表卡顿
  • 图片加载闪烁
  • 网络请求超时

3. 组件封装技巧

自定义组件示例

4. 实用解决方案

4.1 网络请求封装


// 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.2 状态管理


// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        userInfo: null,
        token: uni.getStorageSync('token')
    },
    mutations: {
        SET_USER_INFO(state, userInfo) {
            state.userInfo = userInfo;
            uni.setStorageSync('userInfo', userInfo);
        }
    },
    actions: {
        async login({ commit }, params) {
            const result = await request({
                url: '/api/login',
                method: 'POST',
                data: params
            });
            commit('SET_USER_INFO', result.data);
            return result;
        }
    }
})