当前位置：首页 > uni-app

uniapp 快递

2026-03-26 16:59:46uni-app

uniapp 快递功能实现方法

快递查询API集成

在uniapp中实现快递查询功能，通常需要调用第三方快递查询API。常见的API提供商包括快递100、阿里云快递查询等。

示例代码（使用快递100 API）

uniapp 快递

// 在uniapp的页面或组件中  
getExpressInfo() {  
    uni.request({  
        url: 'https://api.kuaidi100.com/v1/query',  
        method: 'POST',  
        data: {  
            com: '快递公司编码', // 如顺丰为'sf'  
            num: '快递单号',  
            phone: '收件人手机号后四位', // 可选  
        },  
        header: {  
            'Content-Type': 'application/json',  
            'Authorization': '你的API密钥'  
        },  
        success: (res) => {  
            console.log('快递信息', res.data);  
            this.expressInfo = res.data;  
        },  
        fail: (err) => {  
            console.error('查询失败', err);  
        }  
    });  
}

快递公司选择器

如果需要用户选择快递公司，可以集成快递公司列表。快递100等API通常提供公司编码列表，可以通过下拉菜单或搜索选择。

示例代码

uniapp 快递

<template>  
    <view>  
        <picker @change="selectCompany" :range="companies" range-key="name">  
            <view>当前选择：{{currentCompany.name}}</view>  
        </picker>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            companies: [  
                { name: '顺丰', code: 'sf' },  
                { name: '中通', code: 'zto' },  
                // 其他快递公司...  
            ],  
            currentCompany: {}  
        };  
    },  
    methods: {  
        selectCompany(e) {  
            this.currentCompany = this.companies[e.detail.value];  
        }  
    }  
};  
</script>

快递信息展示

查询到快递信息后，通常需要展示物流轨迹。可以使用列表或时间轴组件展示物流状态。

示例代码

<template>  
    <view>  
        <view v-for="(item, index) in expressInfo.data" :key="index">  
            <text>{{item.time}}</text>  
            <text>{{item.context}}</text>  
        </view>  
    </view>  
</template>