All Projects → WeBankFinTech → Wxa

WeBankFinTech / Wxa

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

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Wxa

Wxapp Webpack Plugin
📦 微信小程序 webpack 插件
Stars: ✭ 185 (+24.16%)
Mutual labels:  mini-program, weapp
Dva Wxapp
微信小程序的dva集成
Stars: ✭ 183 (+22.82%)
Mutual labels:  mini-program, weapp
Omi
Front End Cross-Frameworks Framework - 前端跨框架跨平台框架
Stars: ✭ 12,153 (+8056.38%)
Mutual labels:  mini-program, weapp
Wux Weapp
🐶 一套组件化、可复用、易扩展的微信小程序 UI 组件库
Stars: ✭ 4,706 (+3058.39%)
Mutual labels:  mini-program, weapp
Weapp Demo Breadtrip
基于面包旅行 API 制作的微信小程序示例
Stars: ✭ 282 (+89.26%)
Mutual labels:  mini-program, weapp
taro-icons
基于 Taro 的小程序图标库
Stars: ✭ 53 (-64.43%)
Mutual labels:  weapp, mini-program
Alipay Sdk Php
🐜支付宝(蚂蚁金服)开放平台第三方 PHP SDK,基于官方 3.3.2 版本,助力支付宝小程序后端开发。
Stars: ✭ 167 (+12.08%)
Mutual labels:  mini-program, aop
tsioc
AOP, Ioc container, Boot framework, unit testing framework , activities workflow framework.
Stars: ✭ 15 (-89.93%)
Mutual labels:  decorators, aop
Wxapp Boilerplate
使用 webpack, babel, scss 开发的微信/支付宝小程序项目脚手架
Stars: ✭ 367 (+146.31%)
Mutual labels:  mini-program, weapp
Python Aspectlib
An aspect-oriented programming, monkey-patch and decorators library. It is useful when changing behavior in existing code is desired. It includes tools for debugging and testing: simple mock/record and a complete capture/replay framework.
Stars: ✭ 90 (-39.6%)
Mutual labels:  decorators, aop
Alita
一套把React Native代码转换成微信小程序代码的转换引擎工具。我们不造轮子,不发明新框架,只是提供工具把RN扩展到微信小程序端。
Stars: ✭ 1,733 (+1063.09%)
Mutual labels:  mini-program
React Ioc
Hierarchical Dependency Injection with new React 16 Context API
Stars: ✭ 133 (-10.74%)
Mutual labels:  decorators
Raven Weapp
Sentry SDK for WeApp
Stars: ✭ 142 (-4.7%)
Mutual labels:  weapp
Weappx
🌱基于 redux 的轻量级小程序状态管理框架,适配原生小程序,wepy,taro
Stars: ✭ 145 (-2.68%)
Mutual labels:  weapp
Typescript Rest Swagger
Swagger tools for typescript-rest
Stars: ✭ 129 (-13.42%)
Mutual labels:  decorators
Babel Plugin Transform Typescript Metadata
Babel plugin to emit decorator metadata like typescript compiler
Stars: ✭ 142 (-4.7%)
Mutual labels:  decorators
Old
每天大红包 · 旧版(不再维护,仅供参考)
Stars: ✭ 1,611 (+981.21%)
Mutual labels:  weapp
Ayanami
🍭 A better way to react with state
Stars: ✭ 129 (-13.42%)
Mutual labels:  decorators
Tua Mp
🖖一款类 Vue 的渐进式小程序框架(A progressive miniprogram framework for coding like Vue)
Stars: ✭ 127 (-14.77%)
Mutual labels:  weapp
Angular Ts Decorators
A collection of angular decorators for angularjs 1.5.x projects written in typescript
Stars: ✭ 147 (-1.34%)
Mutual labels:  decorators

渐进式小程序开发框架

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

Github Actions Travis Status

wxa.js

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

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

框架优势

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

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

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

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

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

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

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

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

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 实现了:

  • Fetch 自动防重,自动队列管理的网络请求方法。
  • Router 简洁的 API、预加载特性。
  • Eventbus 跨页面,跨组件交互的简单方案。
  • Mixins 混合,跨页面、跨组件复用逻辑。
  • Diff 增量设置数据。
  • Storage 小程序持久化缓存数据。
  • SessionStorage 应用周期内缓存数据。
  • Lock 防止重复执行函数,前端防重利器。
  • 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文件); 代码片段提示; 单文件组件支持

社区微信群

社群二维码过期可联络

邮箱 [email protected][email protected]

项目负责人微信 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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].