在区块链和加密货币领域,“上币”指代代币或数字资产在某个交易所正式上线交易的过程，对于开发者、投资者或普通用户而言，及时获取上币信息（如即将上线的代币、已上线代币详情、上币时间等）至关重要，本文将以uniapp为开发框架，详细介绍如何通过接口调用、页面展示等方式，实现“查看上币信息”的功能，包含技术实现思路、代码示例及注意事项。
获取上币信息的数据源
在uniapp中查看上币信息,首先需要确定数据来源，常见的数据源包括：
- 官方交易所API：如Binance、Huobi、OKX等主流交易所提供的开放接口，通常包含“上新币预告”、“已上线币种”等数据。
- 第三方数据服务商：如CoinMarketCap、CoinGecko、非小号等，提供聚合的上币信息接口，数据覆盖广且结构化。
- 项目方公告：通过代币官网、Twitter、Discord等渠道获取的上币动态，需手动抓取或整合。
本文以第三方聚合API（以非小号接口为例）为数据源，演示如何在uniapp中实现数据获取与展示。
实现步骤：从接口到页面展示
环境准备：创建uniapp项目
若尚未创建项目,可通过HBuilderX或vue-cli初始化uniapp项目：
# 通过vue-cli创建 npx degit dcloudio/uni-preset-vue#vite my-coin-project cd my-coin-project npm install
获取上币信息：封装API请求
uniapp中发起网络请求,通常使用uni.request方法，为方便复用，可封装一个API请求工具类（api/coin.js）：
// api/coin.js
const BASE_URL = 'https://api.feixiaohao.com'; // 非小号API示例（需替换为实际可用接口）
// 获取即将上币信息
export const getUpcomingList = (params = {}) => {
return uni.request({
url: `${BASE_URL}/v1/coin/new/preview`,
method: 'GET',
data: params,
header: {
'Content-Type': 'application/json'
}
});
};
// 获取已上线币种列表
export const getListingList = (params = {}) => {
return uni.request({
url: `${BASE_URL}/v1/coin/list`,
method: 'GET',
data: params,
header: {
'Content-Type': 'application/json'
}
});
};
创建页面：展示上币信息列表
在pages目录下创建新页面（如coin/listing），并编写index.vue文件，实现数据获取与列表展示：
<template>
<view class="container">
<!-- 顶部导航 -->
<view class="nav-bar">
<text class="nav-title">上币信息</text>
<view class="tab">
<text
:class="['tab-item', activeTab === 'upcoming' ? 'active' : '']"
@tap="switchTab('upcoming')"
>即将上币</text>
<text
:class="['tab-item', activeTab === 'listed' ? 'active' : '']"
@tap="switchTab('listed')"
>已上线</text>
</view>
</view>
<!-- 列表内容 -->
<view class="list">
<block v-if="loading">
<view class="loading">
<text>加载中...</text>
</view>
</block>
<block v-else>
<view
class="list-item"
v-for="item in coinList"
:key="item.id"
@tap="goToDetail(item.id)"
>
<view class="item-left">
<image class="coin-logo" :src="item.logo" mode="aspectFit"></image>
<view class="coin-info">
<text class="coin-name">{{ item.name }} ({{ item.symbol }})</text>
<text class="coin-time">{{ activeTab === 'upcoming' ? '上币时间：' + item.listing_time : '上线时间：' + item.listing_time }}</text>
</view>
</view>
<view class="item-right">
<text
class="status-tag"
:class="activeTab === 'upcoming' ? 'tag-upcoming' : 'tag-listed'"
>{{ activeTab === 'upcoming' ? '待上线' : '已上线' }}</text>
</view>
</view>
</block>
<view v-if="!loading && coinList.length === 0" class="empty">
<text>暂无数据</text>
</view>
</view>
</view>
</template>
<script>
import { getUpcomingList, getListingList } from '@/api/coin.js';
export default {
data() {
return {
activeTab: 'upcoming', // 默认展示“即将上币”
coinList: [], // 币种列表
loading: false, // 加载状态
page: 1, // 当前页码
pageSize: 10 // 每页条数
};
},
onLoad() {
this.fetchData();
},
onPullDownRefresh() {
this.refreshData();
},
onReachBottom() {
this.loadMore();
},
methods: {
// 切换tab
switchTab(tab) {
if (this.activeTab === tab) return;
this.activeTab = tab;
this.refreshData();
},
// 获取数据
async fetchData() {
this.loading = true;
try {
const res = await (this.activeTab === 'upcoming'
? getUpcomingList({ page: this.page, size: this.pageSize })
: getListingList({ page: this.page, size: this.pageSize })
);
if (res.statusCode === 200 && res.data.code === 0) {
this.coinList = res.data.data;
} else {
uni.showToast({ title: '获取数据失败', icon: 'none' });
}
} catch (error) {
console.error('请求错误:', error);
uni.showToast({ title: '网络请求失败', icon: 'none' });
} finally {
this.loading = false;
}
},
// 下拉刷新
async refreshData() {
this.page = 1;
await this.fetchData();
uni.stopPullDownRefresh();
},
// 加载更多
loadMore() {
this.page++;
this.fetchData();
},
// 跳转详情页
goToDetail(id) {
uni.navigateTo({
url: `/pages/coin/detail?id=${id}`
});
}
}
};
</script>
<style lang="scss">
.container {
padding: 20rpx;
background-color: #f5f5f5;
min-height: 100vh;
}
.nav-bar {
background-color: #fff;
padding: 20rpx;
border-radius: 12rpx;
margin-bottom: 20rpx;
display: flex;
flex-direction: column;
gap: 20rpx;
.nav-title {
font-size: 36rpx;
font-weight: bold;
color: #333;
}
.tab {
display: flex;
gap: 40rpx;
.tab-item {
font-size: 28rpx;
color: #666;
position: relative;
&.active {
color: #007aff;
font-weight: bold;
&::after {
content: '';
position: absolute;
bottom: -10rpx;
left: 0;
width: 100%;
height: 4rpx;
background-color: #007aff;
border-radius: 2rpx;
}
}
}
}
}
.list {
.loading {
text-align: center;
padding: 40rpx;
color: #999;
}
.empty {
text-align: center;
padding: 40rpx;
color: #999;
}
.list-item {
background-color: #fff;
border-radius: 12rpx;
padding: 24rpx;
margin-bottom: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
.item-left {
display: flex;
align-items: center;
gap: 20rpx;
.coin-logo {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
}
.coin-info {
display: flex;
flex-direction: column;
gap: 8rpx;
.coin-name {
font-size: