WePY：腾讯类 Vue 小程序框架安装与使用指南

WePY（发音 /'wepi/）是腾讯开源的一款让小程序支持组件化开发的框架，通过预编译手段让开发者可以用类 Vue 的开发风格写小程序，支持自定义组件、NPM 包、Promise、Async Functions、ES2015+、多种编译器（Less/Sass/Stylus/PostCSS、Babel/TypeScript、Pug）。

⚠️ 项目状态：已归档。 官方 README 明确说明：随着微信小程序生态演进，WePY 已不再活跃维护，完成了历史使命，现有代码不再具有参考意义，新项目建议选用更现代的方案（如 Taro、uni-app）。本文仅作为历史资料与原理参考整理。

一、项目官方信息

二、官方图片

WePY 交流群二维码（历史资料）：

三、环境要求

• Node.js 10+。
• npm。
• 微信开发者工具。

四、完整部署/接入步骤

以下步骤为官方 README 原始命令，仅作历史参考。新项目不建议使用。

1. 安装 CLI

npm install @wepy/cli@next -g

2. 生成开发示例

wepy init standard myproject

3. 安装依赖

cd myproject
npm install

4. 开发实时编译

wepy build --watch

5. 微信开发者工具导入

用微信开发者工具新建项目，本地开发选择项目根目录，会自动导入项目配置。

五、使用方法

单文件示例

<style lang="less">
@color: #4D926F;
.num { color: @color; }
</style>

<template>
  <div class="container">
    <div class="num" @tap="num++">{{num}}</div>
    <custom-component></custom-component>
    <vendor-component></vendor-component>
    <div>{{text}}</div>
    <input v-model="text"/>
  </div>
</template>

<config>
{
  usingComponents: {
    customComponent: '@/components/customComponent',
    vendorComponent: 'module:vendorComponent'
  }
}
</config>

<script>
import wepy from '@wepy/core';
wepy.page({
  data: { num: 0, text: 'Hello World' },
});
</script>

特性

• 类 Vue 开发风格；
• 自定义组件；
• 引入 NPM 包；
• Promise 与 Async Functions；
• 多编译器：Less/Sass/Stylus/PostCSS、Babel/TypeScript、Pug；
• 文件压缩、图片压缩、内容替换等插件；
• Sourcemap、ESLint；
• 请求列队、事件优化等小程序细节优化。

哪些小程序用 WePY 开发

腾讯疫苗查询、腾讯翻译君、腾讯地图、玩转故宫、手机充值+、群脱单、众安保险福利等。

六、常见问题 FAQ

1. 新项目还能用 WePY 吗？ 不推荐。官方已归档，README 明确建议新项目选更现代的方案（Taro/uni-app）。

2. 现有老项目怎么维护？ 可以继续用 2.x 分支，但官方不再修复新问题；建议逐步迁移到 Taro 或 uni-app。

3. wepy init 失败？ 确认 Node 版本与网络；CLI 用 @wepy/cli@next。

4. 如何引入 NPM 包？ WePY 原生支持 NPM 包，在项目里 npm install 后直接 import。

5. 支持 TypeScript 吗？ 支持，配 Babel/TypeScript 编译器即可。

6. 文档在哪？ 历史文档：https://tencent.github.io/wepy/ 。

七、跳转链接

• GitHub 仓库：https://github.com/Tencent/wepy
• 官方文档：https://tencent.github.io/wepy/
• 更新日志：https://tencent.github.io/wepy/document.html#/changelog
• awesome-wepy：https://github.com/aben1188/awesome-wepy