基于ArkTS开发一款轻量级卡券资产查询工具（附源码与踩坑记录）

sousoushou

7人浏览 · 2026-10-19 12:28:02

sousoushou · 2026-10-19 12:28:02 发布

前言
随着HarmonyOS NEXT的全面铺开，鸿蒙原生应用开发成为趋势。很多普通用户手里都会有几张闲置的购物卡（如京东e卡、沃尔玛卡）。为了方便测试和资产盘点，我用ArkTS原生写了一个轻量级的“卡券资产查询工具”，支持输入卡号前缀和面额，实时估算当前市场的处理参考价。本文记录从UI搭建到接口请求的完整过程。

一、开发环境与项目初始化

IDE：DevEco Studio 5.0
语言：ArkTS
API版本：API 11
项目采用 Stage 模型，单页面实现。

二、UI 界面布局 (ArkTS)
界面需要简洁，核心包含：卡种选择器、面额输入框、查询按钮、结果展示区。

typescript

复制

下载

import http from '@ohos.net.http';

@Entry
@Component
struct Index {
  @State cardType: string = '京东e卡';
  @State faceValue: string = '';
  @State resultMsg: string = '请输入信息查询';
  @State isLoading: boolean = false;

  build() {
    Column({ space: 20 }) {
      Text('闲置卡券快速查价')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 40 })

      // 卡种选择
      Row({ space: 10 }) {
        Text('选择卡种：').fontSize(16)
        Select([
          { value: '京东e卡' },
          { value: '沃尔玛卡' },
          { value: '携程任我行' }
        ])
          .selected(0)
          .value(this.cardType)
          .onSelect((index, value) => {
            this.cardType = value;
          })
      }.width('80%')

      // 面额输入
      TextInput({ placeholder: '请输入卡面金额（如 1000）' })
        .type(InputType.Number)
        .width('80%')
        .onChange((value) => {
          this.faceValue = value;
        })

      // 查询按钮
      Button(this.isLoading ? '查询中...' : '立即查询')
        .width('80%')
        .enabled(!this.isLoading)
        .onClick(() => {
          this.doQuery();
        })

      // 结果展示
      Text(this.resultMsg)
        .fontSize(18)
        .fontColor('#FF5722')
        .width('80%')
        .textAlign(TextAlign.Center)
        .margin({ top: 20 })
        
    }.width('100%').height('100%').backgroundColor('#F5F5F5')
  }

  // 请求逻辑
  async doQuery() {
    if (!this.faceValue) {
      this.resultMsg = '请输入面额';
      return;
    }
    this.isLoading = true;
    
    // 这里模拟请求类似搜搜收平台的查价接口
    let httpRequest = http.createHttp();
    try {
      let response = await httpRequest.request(
        "https://api.example.com/query_price", // 模拟接口地址
        {
          method: http.RequestMethod.POST,
          header: { 'Content-Type': 'application/json' },
          extraData: JSON.stringify({ type: this.cardType, amount: this.faceValue })
        }
      );
      
      if (response.responseCode === 200) {
        // 解析返回的JSON
        this.resultMsg = `当前参考价：约 ${this.faceValue} * 0.95 元，建议在合规平台核验。`;
      }
    } catch (err) {
      this.resultMsg = '网络异常，请重试';
    } finally {
      this.isLoading = false;
      httpRequest.destroy();
    }
  }
}

三、网络请求权限配置
在 module.json5 中必须声明网络权限：

json

复制

下载

"requestPermissions": [
  {
    "name": "ohos.permission.INTERNET"
  }
]

四、开发中遇到的坑与解决方案

跨域问题：鸿蒙原生的 http 模块默认没有跨域限制，但如果对接的是Web接口，必须在服务端配置允许CORS，或者通过Node.js中间件代理。
输入框键盘遮挡：在部分折叠屏设备上，弹出数字键盘会遮挡输入框。解决办法是将 Column 替换为 Scroll 组件，并在 onClick 时调用 window.scrollTo 或监听键盘高度调整Margin。
接口鉴权：实际对接商业接口（如正规卡券处理平台的API）时，切记不要在客户端硬编码 AppSecret。所有敏感请求必须经过自己的后端服务器进行签名转发。