@dfgyhujk7npm/asperiores-ad-vel

v1.0.0

Published

15 days ago

<p align="center"> <a href="https://webankfintech.github.io/wxa/"> <img src="./docs/.vuepress/public/wxajs-color.svg" width="300" height="300" /> </a> </p> <h3 align="center"> 渐进式小程序开发框架 </h3> <p align="center"> <a href="https://ww

Downloads

0High
0Medium
0Low

tra37500

parser xss has settings estree call file spec streams shim fetch authentication dir forms stable Uint8ClampedArray es6 flat delete bundler omit classnames private batch find cmd arrays structuredClone buffers gradients css3 symbol minimal Array.prototype.filter function properties korean ArrayBuffer.prototype.slice drag curl xhr stylesheet serialize Object.keys byteLength react-hook-form packages check matchAll Array.prototype.flat functions helpers urls weakmap make dir stream emit weakset airbnb env Function.prototype.name status typescript less.js sanitize eventEmitter ES2023 es2017 reducer middleware queue length crypt syntax hardlinks walk ECMAScript 2020 ECMAScript 5 busy hasOwn JSON install unicode fp some readable dependencies json-schema-validator variables callbound less compiler color es8 spinners typedarray apollo match ajv __proto__glob bind [[Prototype]]node east-asian-width api WebSocket output bcrypt loading libphonenumber await transpile array auth class-validator validation higher-order formatting url ES6 trimLeft deepclone zero Symbol.toStringTag fs exit-code collection.es6 preprocessor executable compile less commander duplex classes term concurrency spawn browserslist resolve parent picomatch console symlink streams2 jsx mkdirp TypeBox assertion once limited nested css StyleSheet quote ES7 limit cors Array.prototype.flatten client Object.values flag data String.prototype.matchAll promises ava fastify writable signals includes opens tacit findup YAML typesafe censor querystring call-bound ECMAScript 2022 ascii fast Symbol shared inspect Float64Array real-time functional Object.fromEntries telephone spring character nope styleguide internal logger events json form equality Array.prototype.findLast browserlist validator escape getOwnPropertyDescriptor columns expression mkdir indicator filter ES2019 config bootstrap css tap tape a11y JSON-Schema utils launch deepcopy assert cjk cli ajax TypeScript operating-system 256 fullwidth deep-copy flags wget tc39 proto react shrinkwrap const error rfc4122 descriptors fastcopy negative var css full take Reflect.getPrototypeOf compiler dotenv fast-deep-copy es-shim API bootstrap less multi-package ECMAScript 2018 package mocha BigInt64Array chai $.extend regular expression let 0 ender lockfile test ponyfill break terminal queueMicrotask values mixins ES plugin crypto parents toolkit rm es2018 name environment shell wordwrap

wxa.js

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

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

框架优势

🖖 极速上手 无额外的学习门槛，可以完全使用原生的小程序语法开发。
:surfer: 零配置 标准项目无需任何配置，即可运行。
:light_rail: 低成本 超低迁移成本，原生小程序可以马上在 @wxa/cli2 中跑起来。支持原生和 wxa 混杂开发，助力老项目逐步迁移。
:rocket: 依赖分包算法 自研的依赖分包算法，帮助开发者充分的利用分包空间。
:curly_loop: 依赖分析 自动分析项目依赖，无需手动 copy 三方依赖到项目中。
:penguin: 全方位 提供小程序开发增强能力，譬如状态管理、表单校验等。
🤖 按需引入 任意第三方工具、组件库，随时安装使用，完美适配 weui, vant-weapp等组件库。
:alien: 多实例 一次性编译出多个三方项目或其他平台的小程序，如头条小程序。

安装使用

使用 yarn 或 npm 全局安装

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>

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

更完善的文档

极速预览小程序

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|表单验证、支持自定义校验规则和提示| |@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文件）; 代码片段提示; 单文件组件支持 |