在uniapp项目中如何查看上币信息,实用指南与代码示例

在区块链和加密货币领域,“上币”指代代币或数字资产在某个交易所正式上线交易的过程，对于开发者、投资者或普通用户而言，及时获取上币信息（如即将上线的代币、已上线代币详情、上币时间等）至关重要，本文将以uniapp为开发框架，详细介绍如何通过接口调用、页面展示等方式，实现“查看上币信息”的功能，包含技术实现思路、代码示例及注意事项。

获取上币信息的数据源

在uniapp中查看上币信息,首先需要确定数据来源，常见的数据源包括：

1. 官方交易所API：如Binance、Huobi、OKX等主流交易所提供的开放接口，通常包含“上新币预告”、“已上线币种”等数据。
2. 第三方数据服务商：如CoinMarketCap、CoinGecko、非小号等，提供聚合的上币信息接口，数据覆盖广且结构化。
3. 项目方公告：通过代币官网、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）： <

/p>

// 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: