Billiard App - 台球馆自助小程序

一个基于 Taro 4.x + React + TypeScript + MobX + Taroify 的台球馆自助小程序。

技术栈

• ⚡️ Taro 4.0.9 - 跨平台小程序开发框架
• ⚛️ React 18 - UI 框架
• 📘 TypeScript - 类型安全
• 🔥 MobX 6 - 状态管理
• 🎨 Taroify 0.9.0 - UI 组件库
• 💅 SCSS - 样式预处理
• 📦 Webpack 5 - 构建工具

项目特点

• ✅ TypeScript 全面支持
• ✅ MobX 响应式状态管理
• ✅ Taroify 组件库按需引入
• ✅ 5 个 TabBar 页面完整结构
• ✅ 自定义 TabBar 实现
• ✅ Webpack 5 构建

快速开始

1. 安装依赖

cd billiard-app
npm install

2. 开发

# 微信小程序
npm run dev:weapp

# H5
npm run dev:h5

3. 预览

• 微信小程序：使用微信开发者工具打开 dist/ 目录
• H5：浏览器访问开发服务器地址

4. 编译

# 微信小程序
npm run build:weapp

# H5
npm run build:h5

页面结构

项目包含 5 个 TabBar 页面：

页面	路径	说明
首页	/pages/index/index	主页面，扫码开台入口
门店	/pages/store/index	门店列表
扫码	/pages/scan/index	扫码功能（中间大按钮）
消息	/pages/message/index	消息列表
我的	/pages/user/index	个人中心

MobX 使用示例

import { observer } from 'mobx-react'
import { userStore } from '../../store'

const MyPage = observer(() => {
  const { userInfo, balance } = userStore
  
  return (
    <View>
      <Text>{userInfo?.nickname}</Text>
      <Text>余额: ¥{balance}</Text>
    </View>
  )
})

export default MyPage

Taroify 组件使用

import { Button, Toast, Dialog } from '@taroify/core'
import { HomeOutlined } from '@taroify/icons'

// 使用组件
<Button color="primary">按钮</Button>
<HomeOutlined size={24} />

开发规范

详见 .cursorrules

注意事项

1. MobX 响应式：组件必须用 observer 包裹
2. 样式单位：使用 px，自动转换为 rpx
3. TabBar 配置：修改需同步更新配置文件

License

MIT