渐进式小程序开发框架

wxa.js

轻量级的渐进式小程序开发框架，专注于小程序原生开发，提供更好的工程化、代码复用能力，提高开发效率并改善开发体验。

极速上手，零配置，可无痛迁移。

框架优势

• 🖖 极速上手 无额外的学习门槛，可以完全使用原生的小程序语法开发。

• :surfer: 零配置 标准项目无需任何配置，即可运行。

• :light_rail: 低成本 超低迁移成本，原生小程序可以马上在 @wxa/cli2 中跑起来。支持原生和 wxa 混杂开发，助力老项目逐步迁移。

• :rocket: 依赖分包算法 自研的依赖分包算法，帮助开发者充分的利用分包空间。

• :curly_loop: 依赖分析 自动分析项目依赖，无需手动 copy 三方依赖到项目中。

• :penguin: 全方位 提供小程序开发增强能力，譬如状态管理、表单校验等。

• 🤖 按需引入 任意第三方工具、组件库，随时安装使用，完美适配 weui, vant-weapp等组件库。

• :alien: 多实例 一次性编译出多个三方项目或其他平台的小程序，如头条小程序。

More detail Documents

更完善的文档

安装使用

使用 yarn 或 npm 全局安装

1npm i -g @wxa/cli2

极速新建项目

1wxa2 create

启动开发环境

1wxa2 build --watch

开发示例

app.wxa

1<script>
2import {App} from '@wxa/core';
3
4@App
5export default class Main {
6    globalData = {
7        userInfo: 'Genuifx',
8    }
9}
10</script>
11
12<config>
13{
14    "pages": [
15        "pages/index"
16    ]
17}
18</config>
19
20<style lang="scss">
21page {
22    width: 100%;
23    height: 100%;
24}
25</style>
26

pages/index.wxa

1<script>
2import {Page, Mixins, Debounce} from '@wxa/core';
3import fooMixin from '../mixins/foo.js';
4
5//定义页面，添加Mixins
6@Page
7@Mixins(fooMixin)
8export default class Index {
9    data = {
10        formA: {
11            org: 'fintech',
12            name: 'wxa'
13        }
14    }
15
16    async onLoad() {
17        console.log('Hello World')    
18    }
19
20    // 函数防抖
21    @Debounce(300)
22    sumbitA(e) {
23        console.log('submit success!');
24    }
25}
26</script>
27
28<config>
29{
30    "navigationBarTitleText": "Hello Wxa"
31}
32</config>
33
34<template>
35    <view class="page">
36        Hi, <input type="text" value="{{formA.name}}" />
37        <button bindtap="sumbitA">提交</button>
38    </view>
39</template>
40
41<style lang="scss">
42.page {
43    width: 100%;
44    height: 100%;
45    display: flex;
46    flex-direction: row;
47    align-items: center;
48    justify-content: center;
49}
50</style>

默认导出的方法将会自动调用小程序相应的 Page、 Component、 App 方法进行注册。

更完善的文档

极速预览小程序

1wxa2 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

预编译方面，实现了对小程序项目的依赖解析，利用依赖树对整个项目进行管理，以此为基础适配了npm、单文件开发、云开发、三方开发。开发语法方面支持最新的 ES*语法（包括 Async/Await）、Sass/Scss、Stylus，有需求的话可以适配更多语法。

wxa生态

包名	描述	版本
@wxa/core	wxa运行时核心
@wxa/cli2	wxa编译时与命令行工具
@wxa/validate	表单验证、支持自定义校验规则和提示
@dfgyhujk7npm/asperiores-ad-vel	watch & computed
@wxa/log	小程序实时日志上报
@wxa/mobx	wxa引入mobx
@wxa/redux	wxa引入redux
@wxa/plugin-uglifyjs	压缩美化 Javascript 代码
@wxa/plugin-replace	任意字符替换，用于生产测试参数替换
@wxa/plugin-copy	复制指定静态资源
@wxa/plugin-bind-hijack	劫持小程序bind事件插件
@wxa/plugin-minify-wxml	wxml 压缩
@wxa/plugin-postcss	自定义需要引入的postcss插件
@wxa/plugin-dependencies-analysis	项目构建后的模块依赖关系、体积大小等信息可视化, 方便分析项目的优化空间。
wxa-vscode	vscode 插件。开箱即用，安装完毕你将获得：代码自动填充、格式化; 语法高亮、检查（包括wxml、wxs文件）; 代码片段提示; 单文件组件支持

社区微信群

社群二维码过期可联络

邮箱 junbiaoli@webank.com、iveswen@webank.com

项目负责人微信 szyshangzhiyuan （加好友请备注：wxa）

Contributors ✨

Thanks goes to these wonderful people (emoji key):

WZT 💻 🚧	biaodoit 💻 🚧	shangzy 💻 🚧	Min Huang 💻 🚧	lucaszhu 💻 🚧	hughliu 💻 🚧	FlyDaisy 💻 🚧
Zachary Kwan 💻	Alan Zhang 💻	hanzooo 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

MIT