一、引言购物模拟器是系列中第一个引入多页分类Tab切换和购物车机制的应用。它将模拟购物体验分为三个关键环节浏览商品分类切换→ 加入购物车 → 结算购买 → 放入背包从技术角度看购物模拟器引入了几个新的ArkTS概念多页切换通过page状态变量控制显示哪个分类正则表达式解析从字符串中提取价格数字购物车临时状态与背包永久状态的分离列表渲染使用ForEach渲染商品列表背包管理已购物品的展示和清理二、需求分析2.1 功能需求需求ID功能描述F1分类浏览水果/食品/百货三类商品F2商品列表每类5件商品显示名称和价格F3加入购物车扣钱后将商品放入购物车F4购物车结算将购物车内所有商品放入背包F5背包管理查看已购物品F6余额管理动态更新余额F7余额不足买不起时给出提示2.2 数据模型private shopItems: string[][] [ [ 苹果 5元, 香蕉 3元, 葡萄 8元, 橙子 4元, 西瓜 12元], [ 牛奶 6元, 面包 4元, 奶酪 15元, 鸡蛋 2元, 黄油 10元], [ 玩具 30元, 书本 25元, 衣服 50元, 耳机 80元, 游戏 100元] ];使用二维数组管理商品数据第一维分类索引水果/食品/百货第二维具体商品字符串形式包含名称、emoji和价格三、多页分类切换3.1 分类状态State page: number 0;一个简单的数字索引控制显示哪个分类的页面。3.2 分类Tab实现Row() { ForEach(this.categoryNames, (name: string, idx: number) { Button(name) .fontSize(13) .backgroundColor(this.page idx ? #FF9800 : #BDBDBD) .margin({ right: 5 }) .onClick(() { this.page idx; }) }) }Tab切换的核心机制通过this.page idx条件动态设置按钮颜色。选中时显示橙色#FF9800未选中时显示灰色#BDBDBD。这在UI设计中称为活性指示器Active Indicator。3.3 商品列表渲染Column() { ForEach(this.shopItems[this.page], (item: string) { Row() { Text(item) .fontSize(16) .width(60%) Button(➕ 加入购物车) .fontSize(12) .backgroundColor(#4CAF50) .onClick(() { // 处理购买逻辑 }) } .width(90%) .justifyContent(FlexAlign.SpaceBetween) .padding(8) .margin({ bottom: 5 }) .backgroundColor(#FAFAFA) .borderRadius(8) }) }当page变化时this.shopItems[this.page]获取对应分类的商品数组ForEach自动重新渲染列表。四、价格解析算法4.1 从字符串提取数字let price parseInt(item.match(/\d/)?.[0] || 0);这行代码是价格解析的核心包含三个关键部分item.match(/\d/)使用正则表达式\d匹配字符串中的数字序列?.[0]可选链操作符取第一个匹配结果|| 0如果未匹配到默认为’0’例如 苹果 5元经过解析match(/\d/)→[5][0]→5parseInt(5)→54.2 正则表达式详解/\d/\d匹配任何数字字符0-9匹配一个或多个斜杠/正则字面量分隔符4.3 购买逻辑的完整流程.onClick(() { let price parseInt(item.match(/\d/)?.[0] || 0); if (this.money price) { this.message 余额不足买不起这个了; return; } this.money - price; this.cart.push(item); this.message 加入了购物车 item; })流程解析价格→检查余额→扣除余额→加入购物车→显示反馈。五、购物车与背包系统5.1 购物车临时vs 背包永久State cart: string[] []; // 购物车 - 结算前 State bag: string[] []; // 背包 - 已购两个数组的核心区别维度购物车(cart)背包(bag)状态临时永久可清空结算后自动清空手动清空数据来源加入购物车操作购物车结算展示结算按钮上计数页面底部展示5.2 结算逻辑Button( 结算购物车 ( this.cart.length 件)) .onClick(() { if (this.cart.length 0) { this.message 购物车是空的去买点东西吧; return; } for (let item of this.cart) { this.bag.push(item); } this.message ️ 购买成功共买了 this.cart.length 件商品; this.cart []; // 清空购物车 })结算的实质是将cart数组中的商品逐个push到bag数组然后清空cart。这是一个经典的暂存→提交模式。5.3 背包展示if (this.bag.length 0) { Text(已购物品) .fontSize(14) .fontWeight(FontWeight.Bold) .margin({ top: 10 }) ForEach(this.bag, (item: string) { Text( ✅ item) .fontSize(13) .fontColor(#666) }) Button(️ 清空背包) .onClick(() { this.bag []; this.message 背包已清空; }) }背包展示采用ForEach渲染列表每个商品前加 ✅ 标记。清空背包按钮提供批量删除功能。六、UI布局与交互6.1 余额展示Text( this.money 元) .fontSize(20) .fontWeight(FontWeight.Bold) .fontColor(#FF9800)余额使用较大字号和橙色强调使用户时刻关注自己的财务状况。6.2 购物车计数器Button( 结算购物车 ( this.cart.length 件))购物车中的商品数量直接显示在按钮文案中这种徽标式设计让用户一目了然地知道待结算商品数量。6.3 空状态处理if (this.cart.length 0) { this.message 购物车是空的去买点东西吧; }对购物车为空的情况进行特殊处理避免无意义的结算操作。七、数据流分析7.1 完整数据流初始money500, cart[], bag[] 操作1加入购物车苹果5元 → price5, money5 ✅ → money495, cart[ 苹果 5元] 操作2加入购物车面包4元 → price4, money4 ✅ → money491, cart[ 苹果 5元, 面包 4元] 操作3结算 → cart.length2, 遍历push到bag → bag[ 苹果 5元, 面包 4元] → cart[]7.2 边界条件场景结果余额刚好够买成功购买余额差1元提示余额不足购物车为空结算提示购物车是空的背包为空清空无操作无按钮八、与打工模拟器的联动购物模拟器和打工模拟器天然构成了一个完整的经济生态系统打工模拟器赚钱 → 金额积累在money中 购物模拟器花钱 → 消耗money获取商品虽然当前两个应用是独立的但在设计上共享money变量含义——这正是未来整合的基础。九、扩展思路9.1 折扣系统State discount: number 0.9; // 9折 let finalPrice Math.floor(price * this.discount);9.2 搜索功能State searchQuery: string ; State filteredItems: string[] []; // 在build中 ForEach(this.shopItems[this.page].filter(item item.includes(this.searchQuery) ), (item) { ... })9.3 购买记录使用 PersistentStorage 持久化购买记录PersistentStorage.persistProp(purchase_history, []); StorageLink(purchase_history) purchaseHistory: string[] [];十、总结购物模拟器展示了ArkTS在电商类模拟场景下的开发模式多页分类使用page索引 二维数组实现Tab切换正则解析item.match(/\d/)?.[0]从字符串中提取价格购物车与背包临时状态与永久状态的分离管理守卫逻辑余额不足时阻止购买空状态处理购物车为空的校验