WePY 微信小程序框架技术调研

WePY 是腾讯开源的 早期微信小程序组件化框架，使用类 Vue 语法（WePY 1.x）或标准 Vue SFC（WePY 2.x）改善原生小程序开发体验，支持组件化、ES6+、NPM 与单文件组件。曾是微信生态最流行的增强框架之一。2026 年仓库维护极低，微信官方已推出 glass-easel 组件框架，WePY 处于 存量/维护模式；新项目应优先原生小程序、Taro 或 uni-app。

一、 基本信息

二、 技术定位与简介

WePY 两个主要世代：

• WePY 1.x：自研类 Vue 语法，wepy create 模板，@wepy/x 编译到 WXML。
• WePY 2.x：拥抱标准 Vue 2 SFC，@wepy/cli + vue-loader 编译链路。

核心能力：组件 props/events、Vuex 状态管理、Promise 化 wx.request、支持 NPM 包经编译注入。与原生小程序对比：提供 SFC 与 ES Module；与 Taro 对比：WePY 仅微信为主且项目已停滞。

适合：维护腾讯系或早期创业团队 WePY 存量、学习小程序框架演进史。

三、 快速上手安装说明

# WePY 2.x 存量项目
npm install -g @wepy/cli
wepy init standard myproject
cd myproject
npm install
wepy build --watch

WePY 2 Vue 组件示例

<template>
  <view class="container">
    <text>{{ message }}</text>
    <button @tap="increment">Count: {{ count }}</button>
  </view>
</template>
 
<script>
import wepy from '@wepy/core'
 
wepy.page({
  data: {
    message: 'Hello WePY',
    count: 0
  },
  methods: {
    increment() {
      this.count++
    }
  }
})
</script>
 
<style lang="less">
.container { padding: 24rpx; }
</style>

WePY 1.x 历史写法（存量）

import wepy from 'wepy'
 
export default class Index extends wepy.page {
  data = { count: 0 }
  methods = {
    increment() { this.count++ }
  }
}

四、 核心特性

1. 单文件组件

.wpy（1.x）或 .vue（2.x）聚合结构、逻辑与样式。

2. 组件化通信

$parent、$invoke、events 实现父子与跨层通信。

3. NPM 支持

经 wepy-compiler 解析 node_modules 中小程序兼容包。

4. Vuex 集成

WePY 2 可直接使用 Vuex 管理全局状态。

5. 编译时优化

类 Vue 语法转 WXML/WXSS，保留原生渲染性能。

6. 插件生态（历史）

wepy-plugin-imagemin、wepy-plugin-replace 等构建插件。

五、 适用场景

1. 黄金适用场景

• 维护 2017–2020 年 WePY 1.x/2.x 生产项目。
• 短期仅修 bug、适配微信基础库与审核政策。
• 团队熟悉 WePY 且迁移预算不足。

2. 局限适用场景

• 任何 2024 年后新立项。
• 需要支付宝/抖音等多端（选 uni-app/Taro）。
• 依赖 Vue 3 / Composition API（WePY 2 基于 Vue 2）。
• 需要官方长期安全更新与社区答疑。

六、 技术亮点

1. 小程序组件化先驱

推动微信生态从「单文件 json+js+wxml」走向工程化。

2. 腾讯背书

早期大量腾讯内部与合作伙伴案例。

3. 原生渲染无额外运行时

编译产物为标准小程序，主包体积可控。

4. 与 Vue 2 技能互通

WePY 2 团队可复用 Vue 生态部分知识。

5. 历史资料丰富

博客、掘金早期文章多，便于排查遗留问题。

七、 核心概念与架构

digraph WePY_Arch {
  rankdir=LR
  node [shape=box, style="rounded,filled", fillcolor="#f0f9ff"]
  SFC [label=".wpy / .vue SFC", fillcolor="#bae6fd"]
  CLI [label="@wepy/cli\n(编译)"]
  Compiler [label="wepy-compiler"]
  Runtime [label="@wepy/core\n(轻量运行时)"]
  MP [label="微信小程序\n(WXML/原生组件)"]
 
  SFC -> CLI
  CLI -> Compiler
  Compiler -> Runtime
  Runtime -> MP
}

关键概念：wepy.page、wepy.component、wepy.app、computed、watch（1.x 语法差异大）。

八、 技术局限与边界

1. 官方停更：主仓库多年无实质功能更新。
2. Vue 2 锁定：无法平滑升级 Vue 3 Composition API。
3. 仅微信为主：多端能力弱于现代跨端框架。
4. 与新特性脱节：Skyline、按需注入、隐私 API 需手工适配。
5. 构建链老化：Webpack 3/4 存量多，安全与性能债明显。
6. 招聘困难：新人更愿意学 Taro/uni-app 或原生。

九、 生态地图

十、 生态集成

十一、 开发与工程化

• 严格锁定 @wepy/* 与 vue@2 版本，禁止盲目升级。
• 区分 WePY 1 与 2 语法，避免混用模板。
• 业务逻辑抽到纯 JS/TS 模块，与 .wpy/.vue 解耦。
• 使用 eslint-config-wepy（若存在）或自建规则集。
• 记录每个页面依赖的原生 wx. API，便于迁移对照。

十二、 性能与安全

• 避免 watch 深度监听大对象导致频繁 setData。
• 列表分页或 recycle-view；图片懒加载与 CDN。
• 主包体积审计；清理未引用 NPM 包与静态资源。
• 登录凭证走后端刷新；不在 wx.setStorage 存长期密钥。
• 关闭生产环境 source map 公开上传。

十三、 技术对比

十四、 最佳实践

1. 冻结主版本，仅做审核适配与安全补丁。
2. 新功能模块评估 Taro/uni-app 平行开发，旧 WePY 页逐步下线。
3. WePY 1 项目优先规划升级到 2 或直接迁移，勿在 1.x 上叠大功能。
4. 真机回归支付、登录、分享、订阅消息等微信关键路径。
5. 依赖扫描：npm audit + 替换废弃 wepy-plugin。

十五、 学习与社区资源

• WePY 文档：https://wepyjs.github.io/wepy-docs/
• GitHub：https://github.com/Tencent/wepy
• 微信 glass-easel：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/glass-easel.html
• Taro 迁移指南：https://docs.taro.zone/
• uni-app 文档：https://uniapp.dcloud.net.cn/