🚀 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)

npm install -g wechat-page-generator

One-time use with npx

npx wechat-page-generator profile

🎮 Usage

Basic command

wx-create page-name

Examples

# 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

<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

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

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

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

⚡ JSON Configuration

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

🔧 After Generation

1. Add to app.json

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

2. Navigate to the page

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

🛠️ Command Options

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 file for details.

🙏 Acknowledgements

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

📞 Support

• 🐛 Issues: GitHub Issues
• 💬 Discussions: GitHub Discussions
• 📧 Email: [email protected]

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