uniapp-helper

uni-app 跨端开发助手

使用场景

uni-app项目开发中的常见问题和最佳实践。

项目结构

├── pages/              # 页面
│   ├── index/
│   │   └── index.vue
│   └── user/
│       └── index.vue
├── components/         # 组件
├── store/              # Vuex/Pinia
├── api/                # 接口封装
├── utils/              # 工具函数
├── static/             # 静态资源
├── pages.json          # 页面配置
├── manifest.json       # 应用配置
└── uni.scss            # 全局样式

条件编译

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

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

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

// 平台列表
// MP-WEIXIN  微信小程序
// MP-ALIPAY  支付宝小程序
// MP-BAIDU   百度小程序
// MP-TOUTIAO 抖音小程序
// MP         所有小程序
// H5         H5
// APP-PLUS   App

常用API对照

功能	uni-app	微信小程序
路由跳转	uni.navigateTo()	wx.navigateTo()
请求	uni.request()	wx.request()
存储	uni.setStorageSync()	wx.setStorageSync()
提示	uni.showToast()	wx.showToast()
选择图片	uni.chooseImage()	wx.chooseImage()

接口封装

// api/request.js
const BASE_URL = 'https://api.example.com';

export const request = (options) => {
    return new Promise((resolve, reject) => {
        uni.request({
            url: BASE_URL + options.url,
            method: options.method || 'GET',
            data: options.data,
            header: {
                'Authorization': uni.getStorageSync('token'),
                'Content-Type': 'application/json'
            },
            success: (res) => {
                if (res.statusCode === 200) {
                    resolve(res.data);
                } else if (res.statusCode === 401) {
                    uni.navigateTo({ url: '/pages/login/index' });
                    reject(new Error('未登录'));
                } else {
                    reject(new Error(res.data.message || '请求失败'));
                }
            },
            fail: (err) => {
                reject(err);
            }
        });
    });
};