当前位置：首页 > news >正文

鸿蒙OS基于UniApp的区块链钱包开发实践：打造支持鸿蒙生态的Web3应用#三方框架 #Uniapp

news 来源：原创 2025/6/3 12:00:45

基于UniApp的区块链钱包开发实践：打造支持鸿蒙生态的Web3应用

前言

最近在带领团队开发一个支持多链的区块链钱包项目时，我们选择了UniApp作为开发框架。这个选择让我们不仅实现了传统移动平台的覆盖，还成功将应用引入了快速发展的鸿蒙生态。在这篇文章中，我想分享一下我们在开发过程中的技术选型、架构设计和实战经验，特别是在鸿蒙系统适配方面的心得。

技术栈选择

在项目初期，我们经过深入评估后确定了以下技术栈：

前端框架：UniApp + Vue3 + TypeScript
区块链交互：ethers.js + Web3.js
安全存储：HMS Core Security Storage
状态管理：Pinia
UI组件：uView
网络层：Axios + WebSocket

这个技术栈的选择充分考虑了跨平台兼容性、安全性和性能需求。特别是在鸿蒙平台上，我们利用了HMS Core提供的安全存储能力来保护用户的私钥信息。

系统架构设计

1. 整体架构

project/
├── src/
│   ├── components/
│   │   ├── WalletCard.vue        # 钱包卡片组件
│   │   ├── TransactionList.vue   # 交易列表组件
│   │   └── TokenAssets.vue       # 代币资产组件
│   ├── services/
│   │   ├── wallet/
│   │   │   ├── keystore.ts       # 密钥管理
│   │   │   └── transaction.ts    # 交易处理
│   │   └── blockchain/
│   │       ├── ethereum.ts       # 以太坊网络交互
│   │       └── harmony.ts        # Harmony网络交互
│   └── platform/
│       └── harmony/
│           └── secure-storage.ts  # 鸿蒙安全存储适配
└── contracts/└── tokens/└── ERC20.sol             # 代币合约接口

2. 核心功能实现

首先，让我们来看看钱包的核心功能实现。最关键的是私钥管理和交易签名部分：

// services/wallet/keystore.ts
import { Wallet } from 'ethers';
import { HarmonySecureStorage } from '@/platform/harmony/secure-storage';export class WalletKeystore {private secureStorage: HarmonySecureStorage;constructor() {// 根据平台选择不同的存储实现if (uni.getSystemInfoSync().platform === 'harmony') {this.secureStorage = new HarmonySecureStorage();} else {this.secureStorage = new DefaultSecureStorage();}}async createWallet(password: string): Promise<string> {try {// 生成随机助记词const wallet = Wallet.createRandom();const encryptedWallet = await wallet.encrypt(password);// 安全存储加密后的钱包信息await this.secureStorage.setItem('primary_wallet',encryptedWallet);return wallet.mnemonic.phrase;} catch (error) {console.error('创建钱包失败:', error);throw new Error('钱包创建失败，请检查系统权限');}}async importWallet(mnemonic: string, password: string): Promise<void> {try {const wallet = Wallet.fromMnemonic(mnemonic);const encryptedWallet = await wallet.encrypt(password);await this.secureStorage.setItem('primary_wallet',encryptedWallet);} catch (error) {throw new Error('导入钱包失败，请检查助记词是否正确');}}
}

接下来是交易处理模块，这里我们需要特别注意异常处理和用户体验：

// services/wallet/transaction.ts
import { ethers } from 'ethers';
import { TransactionRequest } from '@ethersproject/abstract-provider';export class TransactionManager {private provider: ethers.providers.Provider;private wallet: ethers.Wallet;constructor(provider: ethers.providers.Provider, wallet: ethers.Wallet) {this.provider = provider;this.wallet = wallet;}async sendTransaction(transaction: TransactionRequest): Promise<string> {try {// 估算gas费用const gasEstimate = await this.provider.estimateGas(transaction);// 获取当前gas价格const gasPrice = await this.provider.getGasPrice();// 构建完整交易对象const txRequest = {...transaction,gasLimit: gasEstimate.mul(120).div(100), // 增加20%的gas限制gasPrice: gasPrice};// 发送交易const tx = await this.wallet.sendTransaction(txRequest);// 等待交易确认const receipt = await tx.wait();return receipt.transactionHash;} catch (error) {console.error('交易发送失败:', error);throw this.handleTransactionError(error);}}private handleTransactionError(error: any): Error {if (error.code === 'INSUFFICIENT_FUNDS') {return new Error('余额不足，请确保有足够的代币支付gas费用');}if (error.code === 'NETWORK_ERROR') {return new Error('网络连接异常，请检查网络后重试');}return new Error('交易失败，请稍后重试');}
}

3. 用户界面实现

钱包的界面设计需要既美观又易用。这里展示一个资产卡片组件的实现：

<!-- components/WalletCard.vue -->
<template><view class="wallet-card" :class="{ 'harmony-style': isHarmony }"><view class="card-header"><text class="wallet-name">{{ walletName }}</text><text class="wallet-balance">{{ formatBalance(balance) }} ETH</text></view><view class="card-actions"><button class="action-btn"@tap="handleSend":disabled="!hasBalance">发送</button><button class="action-btn"@tap="handleReceive">接收</button></view><view class="token-list"><token-itemv-for="token in tokens":key="token.address":token="token"@click="handleTokenSelect"/></view></view>
</template><script lang="ts">
import { defineComponent, ref, computed } from 'vue';
import { useWalletStore } from '@/stores/wallet';
import { formatEther } from 'ethers/lib/utils';export default defineComponent({name: 'WalletCard',setup() {const walletStore = useWalletStore();const isHarmony = uni.getSystemInfoSync().platform === 'harmony';const balance = ref('0');const tokens = ref([]);const hasBalance = computed(() => {return parseFloat(balance.value) > 0;});const formatBalance = (value: string) => {return parseFloat(formatEther(value)).toFixed(4);};// 实现发送功能const handleSend = async () => {uni.navigateTo({url: '/pages/transfer/index'});};return {balance,tokens,hasBalance,formatBalance,handleSend,isHarmony};}
});
</script><style lang="scss">
.wallet-card {background: linear-gradient(135deg, #6e8efb 0%, #4a6feb 100%);border-radius: 20rpx;padding: 30rpx;margin: 20rpx;color: #fff;&.harmony-style {// 适配鸿蒙圆角设计规范border-radius: 24rpx;box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);}.card-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 30rpx;.wallet-name {font-size: 32rpx;font-weight: 600;}.wallet-balance {font-size: 40rpx;font-weight: bold;}}.card-actions {display: flex;gap: 20rpx;margin-bottom: 30rpx;.action-btn {flex: 1;height: 80rpx;border-radius: 40rpx;background: rgba(255, 255, 255, 0.2);color: #fff;font-size: 28rpx;&:active {background: rgba(255, 255, 255, 0.3);}&:disabled {opacity: 0.5;}}}
}
</style>

鸿蒙系统适配要点

在将钱包应用适配到鸿蒙系统时，我们重点关注了以下几个方面：

1. 安全存储适配

// platform/harmony/secure-storage.ts
export class HarmonySecureStorage {private securityStorage: any;constructor() {this.securityStorage = uni.requireNativePlugin('securityStorage');}async setItem(key: string, value: string): Promise<void> {try {await this.securityStorage.setItem({key,value,// 使用硬件级加密useHardwareProtection: true});} catch (error) {throw new Error('数据存储失败，请检查系统权限');}}async getItem(key: string): Promise<string | null> {try {const result = await this.securityStorage.getItem({key});return result.value;} catch (error) {return null;}}
}

2. 生物识别支持

为了提高安全性，我们集成了鸿蒙的生物识别能力：

// services/auth/biometric.ts
export class BiometricAuth {private biometricManager: any;constructor() {if (uni.getSystemInfoSync().platform === 'harmony') {this.biometricManager = uni.requireNativePlugin('biometric');}}async authenticate(): Promise<boolean> {try {const result = await this.biometricManager.authenticate({title: '验证身份',description: '请使用指纹或面部识别验证'});return result.success;} catch (error) {console.error('生物识别失败:', error);return false;}}
}