wechat-page-generator/README.md

🚀 Automatic page generator for WeChat Mini Program with ready-made templates

# 🚀 WeChat Page Generator

Automatically generate **WeChat Mini Program** pages with ready-to-use templates.

Instantly create a complete page with all the required files (.wxml, .js, .wxss, .json) using a single command!

## ✨ Features

* 🎯 **Instant generation**: Automatically creates the 4 required files
* 🎨 **Optimized templates**: Clean code and modern structure
* 🛡️ **Smart validation**: Name checks and duplicate prevention
* 🎪 **Colorful interface**: Visual feedback in the terminal
* 📱 **Production-ready**: Templates with complete lifecycle methods

## 📦 Installation

### Global installation (recommended)

```bash
npm install -g wechat-page-generator
```

### One-time use with npx

```bash
npx wechat-page-generator profile
```

## 🎮 Usage

### Basic command

```bash
wx-create page-name
```

### Examples

```bash
# Simple page
wx-create profile

# Page with hyphens
wx-create user-settings

# Page with spaces (automatically cleaned)
wx-create "My Page"
```

## 📁 Generated Structure

For a page named `profile`, the following structure will be created:

```
pages/
└── profile/
    ├── profile.wxml    # Page template
    ├── profile.js      # Logic and lifecycle
    ├── profile.wxss    # Page styles
    └── profile.json    # Navigation config
```

## 📋 Generated Templates

### 🏗️ WXML Structure

```xml
<view class="profile-container">
  <view class="profile-header">
    <text class="profile-title">Profile</text>
  </view>
  
  <view class="profile-content">
    <!-- Content of the profile page -->
    <text>Welcome to the Profile page</text>
  </view>
</view>
```

### ⚙️ JavaScript Logic

```javascript
Page({
  data: {
    title: 'Profile'
  },

  onLoad(options) {
    console.log('Profile page loaded with options:', options);
  },

  onShow() {
    console.log('Profile page displayed');
  },
  
  // ... other lifecycle methods
});
```

### 🎨 WXSS Styles

```css
.profile-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.profile-header {
  background-color: #ffffff;
  border-radius: 10rpx;
  padding: 30rpx;
  /* ... modern styles */
}
```

### ⚡ JSON Configuration

```json
{
  "navigationBarTitleText": "Profile",
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "backgroundColor": "#f5f5f5"
}
```

## 🔧 After Generation

### 1. Add to `app.json`

```json
{
  "pages": [
    "pages/profile/profile"
  ]
}
```

### 2. Navigate to the page

```javascript
wx.navigateTo({
  url: '/pages/profile/profile'
})
```

## 🛠️ Command Options

```bash
wx-create --help     # Show help
wx-create --version  # Show version
```

## 🚨 Error Handling

The generator includes validation for:

* ✅ Valid page names
* ✅ Duplicate prevention
* ✅ Special characters automatically cleaned
* ✅ Clear and colorful error messages

## 🤝 Contributing

Contributions are welcome!

1. Fork the project
2. Create your branch (`git checkout -b feature/new-feature`)
3. Commit your changes (`git commit -m 'Add new feature'`)
4. Push to your branch (`git push origin feature/new-feature`)
5. Open a Pull Request

## 📄 License

This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.

## 🙏 Acknowledgements

Created with ❤️ for the WeChat Mini Program developer community.

## 📞 Support

* 🐛 **Issues**: [GitHub Issues](https://github.com/rachid-traore/wechat-page-generator/issues)
* 💬 **Discussions**: [GitHub Discussions](https://github.com/rachid-traore/wechat-page-generator/discussions)
* 📧 **Email**: [timotheetraore1@gmail.com](mailto:timotheetraore1@gmail.com)

---

⭐ **Don’t forget to star the project if you found it useful!**