11 Star 57 Fork 7

WeBank / wxa

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

渐进式小程序开发框架

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

Github Actions Travis Status

wxa.js

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

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

框架优势

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

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

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

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

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

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

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

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

More detail Documents

更完善的文档

安装使用

使用 yarnnpm 全局安装

npm i -g @wxa/cli2

极速新建项目

wxa2 create

启动开发环境

wxa2 build --watch

开发示例

app.wxa

<script>
import {App} from '@wxa/core';

@App
export default class Main {
    globalData = {
        userInfo: 'Genuifx',
    }
}
</script>

<config>
{
    "pages": [
        "pages/index"
    ]
}
</config>

<style lang="scss">
page {
    width: 100%;
    height: 100%;
}
</style>

pages/index.wxa

<script>
import {Page, Mixins, Debounce} from '@wxa/core';
import fooMixin from '../mixins/foo.js';

//定义页面,添加Mixins
@Page
@Mixins(fooMixin)
export default class Index {
    data = {
        formA: {
            org: 'fintech',
            name: 'wxa'
        }
    }

    async onLoad() {
        console.log('Hello World')    
    }

    // 函数防抖
    @Debounce(300)
    sumbitA(e) {
        console.log('submit success!');
    }
}
</script>

<config>
{
    "navigationBarTitleText": "Hello Wxa"
}
</config>

<template>
    <view class="page">
        Hi, <input type="text" value="{{formA.name}}" />
        <button bindtap="sumbitA">提交</button>
    </view>
</template>

<style lang="scss">
.page {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
</style>

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

更完善的文档

极速预览小程序

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

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

wxa生态

包名 描述 版本
@wxa/core wxa运行时核心
@wxa/cli2 wxa编译时与命令行工具
@wxa/validate 表单验证、支持自定义校验规则和提示
@wxa/watch 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.comiveswen@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

Comments ( 0 )

Sign in for post a comment

About

wxa是一个渐进式小程序开发框架,专注于小程序原生开发,在保留小程序简单入门、快速开发的特点下,提供一系列能力,解决工程化、代码复用的痛点,提高开发效率并改善开发体验。 spread retract
JavaScript and 3 more languages
MIT
Cancel

Releases

No release

Gitee Metrics

Contributors

All

Activities

load more
can not load any more
JavaScript
1
https://gitee.com/WeBank/wxa.git
git@gitee.com:WeBank/wxa.git
WeBank
wxa
wxa
master

Search