微信小程序助手

VS Code 插件 - 快速创建微信小程序页面和组件

功能

• 右键菜单快速创建页面和组件
• 自动生成 TypeScript + Less 文件
• 支持覆盖已有文件夹

文件结构

创建后自动生成以下文件：

Home/
├── Home.ts      # 页面逻辑
├── Home.json    # 页面配置
├── Home.wxml    # 页面结构
└── Home.less   # 页面样式

使用方法

1. 右键点击文件夹
2. 选择「微信小程序: 创建页面」或「微信小程序: 创建组件」
3. 输入名称，完成！

模板示例

Home.ts

Page({
  data: {
    message: 'Hello Home'
  },
  onLoad(options) {},
  onShow() {}
});

Home.json

{
  "navigationBarTitleText": "Home",
  "usingComponents": {}
}

Home.wxml

<view class="home-page">
  <text>{{message}}</text>
</view>

Home.less

.home-page {
  padding: 20rpx;
}

安装

1. 克隆项目
2. 运行 npm install
3. 按 F5 测试

或打包后安装：

npx vsce package

License

MIT