# xxj

**Repository Path**: fangwenju/xxj

## Basic Information

- **Project Name**: xxj
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-10
- **Last Updated**: 2026-06-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 微信小程序 - 设备管理系统

## 项目简介

这是一个原生微信小程序项目，主要功能包括设备管理、扫码添加设备、订单管理、积分商城和热门活动等。

## 项目结构

```
miniprogram/
├── app.js                 # 小程序入口文件
├── app.json               # 全局配置文件
├── app.wxss               # 全局样式文件
├── project.config.json    # 项目配置文件
├── sitemap.json           # 搜索索引配置
├── images/                # 图片资源目录
│   ├── tabbar/            # 底部导航栏图标
│   │   ├── device.png
│   │   ├── device-active.png
│   │   ├── scan.png
│   │   ├── scan-active.png
│   │   ├── mine.png
│   │   └── mine-active.png
│   ├── icons/             # 功能图标
│   │   ├── order.png
│   │   ├── device.png
│   │   ├── points.png
│   │   ├── activity.png
│   │   ├── pending.png
│   │   ├── shipping.png
│   │   ├── receiving.png
│   │   ├── review.png
│   │   ├── after-sale.png
│   │   ├── my-device.png
│   │   ├── address.png
│   │   ├── favorite.png
│   │   ├── points-mall.png
│   │   ├── coupon.png
│   │   ├── service.png
│   │   ├── feedback.png
│   │   ├── about.png
│   │   └── setting.png
│   ├── banner1.png        # 轮播图
│   ├── banner2.png
│   ├── banner3.png
│   ├── product1.png       # 商品图片
│   ├── product2.png
│   ├── goods1.png         # 积分商城商品
│   ├── goods2.png
│   ├── goods3.png
│   ├── goods4.png
│   ├── activity1.png      # 活动图片
│   ├── activity2.png
│   ├── success.png        # 成功图标
│   ├── album.png          # 相册图标
│   ├── input.png          # 输入图标
│   ├── arrow-right.png    # 右箭头
│   ├── default-avatar.png # 默认头像
│   ├── empty-order.png    # 空订单提示图
│   ├── empty-device.png   # 空设备提示图
│   └── empty-activity.png # 空活动提示图
└── pages/                 # 页面目录
    ├── device/            # 设备页面（首页）
    │   ├── device.wxml
    │   ├── device.wxss
    │   ├── device.js
    │   └── device.json
    ├── scan/              # 扫码页面
    │   ├── scan.wxml
    │   ├── scan.wxss
    │   ├── scan.js
    │   └── scan.json
    └── mine/              # 我的页面
        ├── mine.wxml
        ├── mine.wxss
        ├── mine.js
        └── mine.json
```

## 功能模块

### 1. 设备页面（首页）

- **顶部广告位**：轮播图展示，支持自动播放
- **功能入口**：订单、设备、积分商城、热门活动四个快捷入口
- **订单管理**：查看订单列表、支付订单、评价订单
- **设备管理**：查看设备列表、控制设备、设备设置
- **积分商城**：浏览积分商品、兑换商品
- **热门活动**：查看活动列表、参与活动

### 2. 扫码页面

- **相机扫码**：调用摄像头扫描二维码/条形码
- **相册识别**：从相册选择图片识别二维码
- **手动输入**：手动输入二维码内容
- **智能识别**：自动识别设备码、活动码等不同类型

### 3. 我的页面

- **用户信息**：头像、昵称、手机号、会员等级
- **资产展示**：积分、余额、优惠券数量
- **订单入口**：待付款、待发货、待收货、待评价、售后
- **功能菜单**：
  - 我的设备
  - 收货地址
  - 我的收藏
  - 积分商城
  - 优惠券
  - 客服中心
  - 意见反馈
  - 关于我们
  - 设置

## 快速开始

### 1. 安装微信开发者工具

下载并安装 [微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)

### 2. 导入项目

1. 打开微信开发者工具
2. 选择"导入项目"
3. 选择项目目录 `miniprogram/`
4. 填写 AppID（或使用测试号）
5. 点击"导入"

### 3. 配置 AppID

在 `project.config.json` 中修改 `appid` 字段为你的小程序 AppID：

```json
{
  "appid": "your-appid-here"
}
```

### 4. 准备图片资源

将所需的图片资源放入 `images/` 目录下对应的文件夹中。可以使用以下尺寸建议：

- TabBar 图标：81x81px（建议提供 @2x 和 @3x）
- 功能图标：64x64px
- 轮播图：750x300px
- 商品/活动图片：400x400px

### 5. 运行预览

在微信开发者工具中点击"预览"或"真机调试"即可在手机上查看效果。

## 开发说明

### 全局配置

在 `app.json` 中配置了三个 TabBar 页面：
- `/pages/device/device` - 设备页面
- `/pages/scan/scan` - 扫码页面
- `/pages/mine/mine` - 我的页面

### 样式规范

- 使用 rpx 作为单位，适配不同屏幕尺寸
- 主色调：#1890ff（蓝色）
- 背景色：#f5f5f5（浅灰）
- 文字颜色：#333333（深灰）、#666666（中灰）、#999999（浅灰）

### API 接口

项目中预留了 API 接口调用的位置，需要根据实际后端接口进行对接：

- 用户登录/注册
- 获取用户信息
- 获取设备列表
- 添加设备
- 控制设备
- 获取订单列表
- 创建订单
- 支付订单
- 获取积分商品
- 兑换商品
- 获取活动列表
- 参与活动

### 注意事项

1. 扫码功能需要在真机上测试，开发者工具中可能无法完全模拟
2. 部分功能需要用户授权（如相机、位置等）
3. 微信支付功能需要配置商户号
4. 正式上线前需要进行代码审核

## 技术栈

- 原生微信小程序框架
- WXML + WXSS + JavaScript
- Pinia 状态管理（可选扩展）

## 后续扩展

可以添加的功能：
- 设备控制面板
- 订单详情页
- 商品详情页
- 活动详情页
- 收货地址管理
- 消息通知
- 数据统计
- 在线客服

## 许可证

MIT License