# goSkiing_wx

**Repository Path**: charyHe/go-skiing_wx

## Basic Information

- **Project Name**: goSkiing_wx
- **Description**: 去滑雪小程序端
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-10-19
- **Last Updated**: 2025-12-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 微信小程序商城项目

## 项目概述

这是一个基于微信小程序的商城项目，现已支持TypeScript开发，并集成了@vant/weapp UI组件库。

## 技术栈

- **框架**: 微信小程序原生框架
- **语言**: JavaScript + TypeScript
- **UI组件库**: @vant/weapp
- **开发工具**: 微信开发者工具

## 项目结构

```
wx-mall/
├── app.js                 # 应用入口文件 (JavaScript版本)
├── app.ts                 # 应用入口文件 (TypeScript版本)
├── app.json               # 应用配置文件
├── app.wxss               # 应用样式文件
├── package.json           # 项目依赖配置
├── tsconfig.json          # TypeScript配置
├── .eslintrc.json         # ESLint配置
├── types/                 # TypeScript类型定义
│   └── index.d.ts
├── pages/                 # 页面目录
│   ├── home/
│   │   ├── home.js        # JavaScript版本
│   │   ├── home.ts        # TypeScript版本
│   │   ├── home.wxml
│   │   ├── home.wxss
│   │   └── home.json
│   └── ...
├── component/             # 自定义组件
├── utils/                 # 工具函数
├── services/              # 服务层
├── config/                # 配置文件
└── static/                # 静态资源
```

## 安装依赖

```bash
# 安装项目依赖
npm install

# 或者使用yarn
yarn install
```

## TypeScript支持

### 配置说明

项目已配置TypeScript支持，主要配置文件：

1. **tsconfig.json**: TypeScript编译配置
2. **types/index.d.ts**: 微信小程序类型定义
3. **project.config.json**: 启用TypeScript编译

### 兼容性

- ✅ **完全兼容现有JavaScript代码**
- ✅ **支持渐进式迁移到TypeScript**
- ✅ **现有JS文件无需修改即可正常运行**

### 使用方式

#### 1. 创建新的TypeScript页面

```typescript
// pages/example/example.ts
interface PageData {
  title: string;
  count: number;
}

interface PageOption extends IPageOption {
  data: PageData;
  onButtonClick: () => void;
}

Page<PageData, PageOption>({
  data: {
    title: '示例页面',
    count: 0
  },

  onLoad(): void {
    console.log('页面加载');
  },

  onButtonClick(): void {
    this.setData({
      count: this.data.count + 1
    });
  }
});
```

#### 2. 类型定义

```typescript
// 定义接口
interface UserInfo {
  nickname: string;
  avatar: string;
  userId: number;
}

// 使用类型
const user: UserInfo = {
  nickname: '用户昵称',
  avatar: '头像URL',
  userId: 123
};
```

#### 3. 微信API类型支持

```typescript
// 自动获得类型提示和检查
wx.showToast({
  title: '提示信息',
  icon: 'success',
  duration: 2000
});

wx.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: (res) => {
    // res 自动获得正确的类型
    console.log(res.data);
  }
});
```

## @vant/weapp UI组件库

### 已配置的组件

项目已在`app.json`中全局注册了@vant/weapp的所有组件，包括：

- **基础组件**: Button, Cell, Icon, Image等
- **表单组件**: Field, Form, Checkbox, Radio等
- **反馈组件**: Toast, Dialog, Popup等
- **展示组件**: Card, List, Grid等
- **导航组件**: Tabbar, NavBar, Tabs等
- **业务组件**: Area, Calendar, Uploader等

### 使用示例

#### 1. 在WXML中使用组件

```xml
<!-- 按钮组件 -->
<van-button type="primary" size="large" bind:click="onButtonClick">
  主要按钮
</van-button>

<!-- 单元格组件 -->
<van-cell-group>
  <van-cell title="单元格" value="内容" />
  <van-cell title="单元格" value="内容" label="描述信息" />
</van-cell-group>

<!-- 图标组件 -->
<van-icon name="star" size="20px" color="#ffd21e" />
```

#### 2. 在TypeScript中使用组件

```typescript
// pages/example/example.ts
Page({
  data: {
    showDialog: false
  },

  onButtonClick(): void {
    this.setData({
      showDialog: true
    });
  },

  onCloseDialog(): void {
    this.setData({
      showDialog: false
    });
  }
});
```

#### 3. 组件事件处理

```xml
<!-- 表单组件 -->
<van-form bind:submit="onSubmit">
  <van-field
    name="username"
    label="用户名"
    placeholder="请输入用户名"
    bind:change="onFieldChange"
  />
  <van-field
    name="password"
    type="password"
    label="密码"
    placeholder="请输入密码"
  />
  <van-button form-type="submit" type="primary">
    提交
  </van-button>
</van-form>
```

## 开发指南

### 1. 开发环境设置

1. 安装微信开发者工具
2. 导入项目到微信开发者工具
3. 确保项目配置中启用了TypeScript支持

### 2. 代码规范

项目使用ESLint进行代码检查，支持TypeScript：

```bash
# 检查代码规范
npm run lint

# 自动修复代码规范问题
npm run lint:fix
```

### 3. 构建和调试

```bash
# TypeScript编译
npm run build

# 监听模式编译
npm run dev
```

### 4. 迁移指南

#### 从JavaScript迁移到TypeScript

1. **重命名文件**: 将`.js`文件重命名为`.ts`
2. **添加类型定义**: 为变量、函数、接口添加类型
3. **更新Page/Component调用**: 使用泛型语法

```typescript
// 原来的JavaScript
Page({
  data: {
    title: 'Hello'
  },
  onLoad() {
    console.log('loaded');
  }
});

// 迁移后的TypeScript
interface PageData {
  title: string;
}

Page<PageData>({
  data: {
    title: 'Hello'
  },
  onLoad(): void {
    console.log('loaded');
  }
});
```

## 注意事项

1. **兼容性**: 现有JavaScript代码无需修改即可正常运行
2. **渐进式迁移**: 可以逐步将JS文件迁移为TS文件
3. **类型安全**: TypeScript提供更好的类型检查和代码提示
4. **组件使用**: @vant/weapp组件已全局注册，可直接使用
5. **开发工具**: 建议使用支持TypeScript的编辑器（如VSCode）

## 常见问题

### Q: 现有JS文件是否需要立即迁移为TS？
A: 不需要。项目支持JS和TS混合开发，可以渐进式迁移。

### Q: @vant/weapp组件如何使用？
A: 组件已全局注册，直接在WXML中使用即可，无需额外配置。

### Q: TypeScript编译错误如何处理？
A: 检查类型定义是否正确，可以使用`any`类型临时绕过类型检查。

### Q: 如何添加新的TypeScript页面？
A: 创建`.ts`文件，使用`Page<T>()`语法，并添加相应的类型定义。

## 更新日志

- **v1.0.0**: 添加TypeScript支持和@vant/weapp UI组件库集成