# wxa **Repository Path**: null_346_8382/wxa ## Basic Information - **Project Name**: wxa - **Description**: wxa是一个渐进式小程序开发框架,专注于小程序原生开发,在保留小程序简单入门、快速开发的特点下,提供一系列能力,解决工程化、代码复用的痛点,提高开发效率并改善开发体验。 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 16 - **Created**: 2020-09-25 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README

渐进式小程序开发框架

Travis Status node (scoped with tag, custom registry) License

Github Actions Travis Status

# wxa.js 轻量级的渐进式小程序开发框架,专注于小程序原生开发,提供更好的工程化、代码复用能力,提高开发效率并改善开发体验。 极速上手,零配置,可无痛迁移。 **框架优势** - 🖖 **极速上手** 无额外的学习门槛,可以完全使用原生的小程序语法开发。 - :surfer: **零配置** 标准项目无需任何配置,即可运行。 - :light_rail: **低成本** 超低迁移成本,原生小程序可以马上在 `@wxa/cli2` 中跑起来。支持原生和 wxa 混杂开发,助力老项目逐步迁移。 - :rocket: **依赖分包算法** 自研的依赖分包算法,帮助开发者充分的利用[分包空间](https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html)。 - :curly_loop: **依赖分析** 自动分析项目依赖,无需手动 copy 三方依赖到项目中。 - :penguin: **全方位** 提供小程序开发增强能力,譬如状态管理、表单校验等。 - 🤖 **按需引入** 任意第三方工具、组件库,随时安装使用,完美适配 weui, vant-weapp等组件库。 - :alien: **多实例** 一次性编译出多个三方项目或其他平台的小程序,如头条小程序。 More detail [Documents](https://webank.gitee.io/wxa/) 更完善的[文档](https://webank.gitee.io/wxa/) ## 安装使用 使用 `yarn` 或 `npm` 全局安装 ```bash npm i -g @wxa/cli2 ``` **极速新建项目** ```bash wxa2 create ``` **启动开发环境** ```bash wxa2 build --watch ``` ## 开发示例 #### app.wxa ```html { "pages": [ "pages/index" ] } ``` #### pages/index.wxa ```vue { "navigationBarTitleText": "Hello Wxa" } ``` 默认导出的方法将会自动调用小程序相应的 `Page`、 `Component`、 `App` 方法进行注册。 更完善的[文档](https://webank.gitee.io/wxa/) **极速预览小程序** ```bash wxa2 cli --action preview ``` ## 技术特点 wxa 是一个 AOP 框架,主要使用 Decorator(运行时改写,拦截)和预编译实现框架功能。 使用 Decorator 实现了: - :white_check_mark: **`Fetch`** 自动防重,自动队列管理的网络请求方法。 - :white_check_mark: **`Router`** 简洁的 API、预加载特性。 - :white_check_mark: **`Eventbus`** 跨页面,跨组件交互的简单方案。 - :white_check_mark: **`Mixins`** 混合,跨页面、跨组件复用逻辑。 - :white_check_mark: **`Diff`** 增量设置数据。 - :white_check_mark: **`Storage`** 小程序持久化缓存数据。 - :white_check_mark: **`SessionStorage`** 应用周期内缓存数据。 - :white_check_mark: **`Lock`** 防止重复执行函数,前端防重利器。 - :white_check_mark: **`Debounnce`** 防抖动。 查看详细的 [Class Decorators](https://webank.gitee.io/wxa/core/API.html#decorators-%E7%B1%BB%E8%A3%85%E9%A5%B0%E5%99%A8) 预编译方面,实现了对小程序项目的依赖解析,利用依赖树对整个项目进行管理,以此为基础适配了`npm`、单文件开发、云开发、三方开发。开发语法方面支持最新的 ES\*语法(包括 Async/Await)、Sass/Scss、Stylus,有需求的话可以适配更多语法。 ## wxa生态 |包名|描述|版本 |-----|----|----| |@wxa/core|wxa运行时核心|![](https://img.shields.io/npm/v/@wxa/core.svg?label=NPM&color=brightGreen&style=flat-square&logo=npm) |@wxa/cli2|wxa编译时与命令行工具|![](https://img.shields.io/npm/v/@wxa/cli2.svg?label=NPM&color=brightGreen&style=flat-square&logo=npm) |@wxa/validate|表单验证、支持自定义校验规则和提示|![](https://img.shields.io/npm/v/@wxa/validate.svg?label=NPM&color=brightGreen&style=flat-square&logo=npm) |@wxa/watch| watch & computed |![](https://img.shields.io/npm/v/@wxa/watch.svg?label=NPM&color=brightGreen&style=flat-square&logo=npm) |@wxa/log| 小程序实时日志上报 |![](https://img.shields.io/npm/v/@wxa/log.svg?label=NPM&color=brightGreen&style=flat-square&logo=npm) |@wxa/mobx|wxa引入mobx|![](https://img.shields.io/npm/v/@wxa/mobx.svg?label=NPM&color=brightGreen&style=flat-square&logo=npm) |@wxa/redux|wxa引入redux|![](https://img.shields.io/npm/v/@wxa/redux.svg?label=NPM&color=brightGreen&style=flat-square&logo=npm) |@wxa/plugin-uglifyjs| 压缩美化 Javascript 代码 |![](https://img.shields.io/npm/v/@wxa/plugin-uglifyjs.svg?label=NPM&color=brightGreen&style=flat-square&logo=npm) |@wxa/plugin-replace| 任意字符替换,用于生产测试参数替换 |![](https://img.shields.io/npm/v/@wxa/plugin-replace.svg?label=NPM&color=brightGreen&style=flat-square&logo=npm) |@wxa/plugin-copy| 复制指定静态资源 |![](https://img.shields.io/npm/v/@wxa/plugin-copy.svg?label=NPM&color=brightGreen&style=flat-square&logo=npm) |@wxa/plugin-bind-hijack| 劫持小程序bind事件插件 |![](https://img.shields.io/npm/v/@wxa/plugin-bind-hijack.svg?label=NPM&color=brightGreen&style=flat-square&logo=npm) |@wxa/plugin-minify-wxml| wxml 压缩 |![](https://img.shields.io/npm/v/@wxa/plugin-minify-wxml.svg?label=NPM&color=brightGreen&style=flat-square&logo=npm) |@wxa/plugin-postcss| 自定义需要引入的postcss插件 |![](https://img.shields.io/npm/v/@wxa/plugin-postcss.svg?label=NPM&color=brightGreen&style=flat-square&logo=npm) |@wxa/plugin-dependencies-analysis| 项目构建后的模块依赖关系、体积大小等信息可视化, 方便分析项目的优化空间。|![](https://img.shields.io/badge/Status-Outdated.-orange?style=flat-square) | [wxa-vscode](https://github.com/WeBankFinTech/wxa-vscode) | vscode 插件。开箱即用,安装完毕你将获得:代码自动填充、格式化; 语法高亮、检查(包括wxml、wxs文件); 代码片段提示; 单文件组件支持 |![](https://img.shields.io/badge/-extension.-brightGreen?style=flat-square) ## 社区微信群 社群二维码过期可联络 邮箱 junbiaoli@webank.com、iveswen@webank.com 项目负责人微信 szyshangzhiyuan (加好友请备注:wxa) ## Contributors ✨ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

WZT

💻 🚧

biaodoit

💻 🚧

shangzy

💻 🚧

Min Huang

💻 🚧

lucaszhu

💻 🚧

hughliu

💻 🚧

FlyDaisy

💻 🚧

Zachary Kwan

💻

Alan Zhang

💻

hanzooo

💻
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! ## LICENSE [MIT](./LICENSE)