Giter VIP home page Giter VIP logo

webankfintech / wxa Goto Github PK

View Code? Open in Web Editor NEW
224.0 17.0 31.0 14.38 MB

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

Home Page: https://webank.gitee.io/wxa/

License: MIT License

JavaScript 99.34% Shell 0.54% HTML 0.04% CSS 0.07% Less 0.01%
wxa mini-program aop decorators mini-app weapp mp

wxa's Introduction

渐进式小程序开发框架

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

wxa's People

Contributors

biaodoit avatar dependabot[bot] avatar genuifx avatar hanzooo avatar lucaszhu2zgf avatar riesaex avatar sparklinm avatar szyuan avatar xing-zheng avatar zcfan avatar zehuiguan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

wxa's Issues

[FEAT] 支持小程序e2e自动化测试

Description

核心功能点:

  • wxa test --e2e 开启e2e录制模式,自动记录当前用户所有操作,每步操作截屏、生成数据快照
  • 自动生成自动化测试脚本,回放后返回自动化测试结果

[FEAT] 组件支持 package 检索

问题 ISSUE #89

为了做到无缝支持引用符合开发者工具的npm包,我们需要新增以下能力:

  • 递归寻找并检查 package.json
  • 依次检查 package.jsonminiprogram, browser, main 配置

Fetch网络请求中考虑增加基于jwt的api认证以及无感知自动重新刷新token的功能

Description

目前我们小程序项目对于业务API的请求是基于JWT认证的流程,在请求业务API的时候,会先到授权认证中心获取token,之后携带token去请求API,在这个过程中,当token过期时,需要无感知自动刷新获取一个新的token,并重新去请求之前因token过期导致请求失败的业务API,即需要一个合理的重试机制。

希望可以在Fetch这里增加以上需求功能。

【enhance】css模块分离

@import "./test.scss";

app.scss中通过以上代码引入css时,test.scss更新无法触发css重新编译

[FEAT] 支持同页面多表单的表单验证插件

Description

支持同页面多表单的表单验证插件

  • 支持多个表单(scope)的独立验证和合并验证;
  • 支持自定验证规则;
  • 轻量级,改动小,使用小程序原生组件,无需引入自定义组件;
  • 尽量减少setData调用

this.$wxapi.getSetting()获取不到信息

Description

this.$wxapi.getSetting(setting => {
      console.log(setting);
    });

没有执行

Environment

  • @wxa/cli2 version: [2.0.5]
  • @wxa/core version: [2.0.0]

Reproduce

<script>
import { Page } from "@wxa/core";

@Page
export default class Test {
  data = {};

  onLoad() {
    this.$wxapi.getSetting(setting => {
      console.log(setting);
    });
  }
}
</script>

<config>
{
    "navigationBarTitleText": "测试"
}
</config>

<template>
  <view class="container"></view>
</template>

<style lang="scss">
</style>

[FEAT] Less 语法支持

核心功能点:编写一个 Less Compiler 以满足用户使用less语法

虽然 Sass 在功能上更加完备,但是仍有不少用户倾向于使用 Less 开发样式。

  • Less 语法解析
  • Less 插件支持
  • 允许在 package.json 中添加less的配置
  • 允许在 wxa.config.js 中添加less的配置
  • 完善的测试用例

无法兼容 @vant/weapp

Description

wxa 可以兼容 vant 组件库的 0.5.1 版本,但无法兼容最新的 1.5 版本。

Environment

  • Platform: 开发者工具
  • Platform version: 开发者工具
  • Wechat version: 无
  • @wxa/cli2 version: 2.2.8
  • @wxa/core version: 2.0.0-alpha.e7e06c46

Reproduce

  1. 执行 npm install -s @vant/weapp
  2. 在 index.wxa 的 config 中添加配置
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}
  1. 在页面中添加代码 <van-button type="default">默认按钮</van-button>, 提示无法找到组件。
  2. 实际发现没有在npm目录生成 @vant 相应目录

Observed Results

无法兼容 vant-ui 最新版

Expected Results

可以正常兼容 vant-ui 最新版

[feat] 监听 scss 文件的自动刷新

Description

出于工程需求,会将 scss 拆分出来进行管理,但在实际的实践过程中发现,如果将 scss 单独拆分出来后,相应修改不会触发自动刷新。

Environment

  • Platform: 开发者工具
  • Platform version: 1.03.2010240
  • @wxa/cli2 version:2.2.8
  • @wxa/core version: "^2.0.0-alpha.e7e06c46"

Reproduce

将 scss 进行如下拆分

.
├── app.wxa
└── scss
    ├── button.scss
    ├── init.scss
    └── variables.scss

编辑 scss 文件,不会触发 wxa 的自动构建,样式无法自动应用到版本中。

Observed Results

无法完成自动构建

Expected Results

可以对拆分出的 scss 文件进行自动构建

node_modules 文件夹内的 ESM Module 语法依赖分析有误

Description

node_modules 文件夹内的 ESM Module 语法依赖分析有误,对于 node_modules 内的如下 js 文件:

import aaa from "./aaa.js";
import bbb from "./bbb.js";

export default {
  aaa, bbb
}

如果在某个页面中 import 的话,最终只有 aaa.js 被复制到了 dist/npm 中,bbb.js 这个依赖没有正确分析。

大概知道哪的问题我先处理看看,搞不定再转文老板。

Environment

  • Platform: 无关
  • Platform version: 无关
  • Wechat version: 无关
  • @wxa/cli2 version: 2.1.14
  • @wxa/core version: 无关
  • other version: 无关

Reproduce

如问题描述

Observed Results

如问题描述

Expected Results

对于问题描述中的例子,应当正确解析出 aaa.jsbbb.js 两个依赖。

Relevant Code / Logs

onLoad()无法获取页面参数

官方手册:

生命周期回调函数
生命周期的触发以及页面的路由方式详见
onLoad(Object query)
页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数。

集成vant-weapp v0.5.12后,未能完整编译该组件

Description

集成vant-weapp v0.5.12后,未能完整编译该组件

Environment

  • @wxa/cli2 version: [2.0.5]
  • @wxa/core version: [2.0.0]
  • vant-weapp version: [0.5.12]

Reproduce

  • npm i vant-weapp -S --production
  • 页面中集成
"usingComponents": {
  "van-button": "path/to/vant-weapp/dist/button/index"
}

<van-button type="default">默认按钮</van-button>
  • wxa2 build

Observed Results

目录 node_modules\vant-weapp\dist\wxs\utils.wxs 文件import的文件,未能关联并编译

Expected Results

[期望表现]

[Expected Results]

Relevant Code / Logs

//node_modules\vant-weapp\dist\wxs\utils.wxs 文件
var bem = require('./bem.wxs').bem;
var memoize = require('./memoize.wxs').memoize;

function isSrc(url) {
return url.indexOf('http') === 0 || url.indexOf('data:image') === 0 || url.indexOf('//') === 0;
}

module.exports = {
bem: memoize(bem),
isSrc: isSrc,
memoize: memoize
};

[FEAT] CLI 解析支持exclude

Description

核心功能点:@wxa/cli 解析支持exclude

目前会有几个场景依赖该功能:

  • 作为UI工具库编译的时候,使用的 peer 依赖需要排除在打包的结果之内
  • 使用小程序开发者工具内置库的时候(useExtendsLib)
  • 使用replace插件动态写入参数的时候

这几种场景都应该停止依赖解析。

Expected Results

小程序场景中 externals 约等于 exclude

@vant/weapp 编译报错

Description

[问题描述:站在其它人的角度尽可能清晰地、简洁地把问题描述清楚]

[Description of the issue]

Environment

  • Platform: [开发者工具]
  • Platform version: [stable 1.05.2103200]
  • Wechat version: [8.0.2]
  • @wxa/cli2 version: [2.2.18]
  • @wxa/core version: ["^2.2.5"]
  • other version: [@vant/weapp": "^1.6.8", "@wxa/redux": "^2.2.5" ]

Reproduce

引入 @vant/weapp": "^1.6.8" 后进行编译,出现报错

微信截图_20210422120210

Observed Results

[实际表现]
在反复切换es6转es5的时候会编译成功,控制台还是有大量报错,视图显示后在点编译依然是第一次编译时的报错
微信截图_20210422120248
第一次使用wxa,多多谅解

Expected Results

[期望表现]
编译成功,无报错

[FEAT] fetch增加响应字段校验功能

Description

wxa-core:

  1. fetch函数增加response的格式校验能力,允许开发者对接口响应字段的完整性和数据格式进行自定义校验,类似json Schema的模式。

  2. 校验不通过时在不中断运行逻辑的情况下进行warn提示

fetch('api', {}, {$resSchema: { name: { required:true, type: 'string' } }, 'POST' )

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.