npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@dfgyhujk7npm/asperiores-ad-vel

v1.0.0

Published

<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

2

Maintainers

tra37500tra37500

Keywords

parserxsshassettingsestreecallfilespecstreamsshimfetchauthenticationdirformsstableUint8ClampedArrayes6flatdeletebundleromitclassnamesprivatebatchfindcmdarraysstructuredClonebuffersgradients css3symbolminimalArray.prototype.filterfunctionpropertieskoreanArrayBuffer.prototype.slicedragcurlxhrstylesheetserializeObject.keysbyteLengthreact-hook-formpackagescheckmatchAllArray.prototype.flatfunctionshelpersurlsweakmapmake dirstreamemitweaksetairbnbenvFunction.prototype.namestatustypescriptless.jssanitizeeventEmitterES2023es2017reducermiddlewarequeuelengthcryptsyntaxhardlinkswalkECMAScript 2020ECMAScript 5busyhasOwnJSONinstallunicodefpsomereadabledependenciesjson-schema-validatorvariablescallboundless compilercolores8spinnerstypedarrayapollomatchajv__proto__globbind[[Prototype]]nodeeast-asian-widthapiWebSocketoutputbcryptloadinglibphonenumberawaittranspilearrayauthclass-validatorvalidationhigher-orderformattingurlES6trimLeftdeepclonezeroSymbol.toStringTagfsexit-codecollection.es6preprocessorexecutablecompile lesscommanderduplexclassestermconcurrencyspawnbrowserslistresolveparentpicomatchconsolesymlinkstreams2jsxmkdirpTypeBoxassertiononcelimitednested cssStyleSheetquoteES7limitcorsArray.prototype.flattenclientObject.valuesflagdataString.prototype.matchAllpromisesavafastifywritablesignalsincludesopenstacitfindupYAMLtypesafecensorquerystringcall-boundECMAScript 2022asciifastSymbolsharedinspectFloat64Arrayreal-timefunctionalObject.fromEntriestelephonespringcharacternopestyleguideinternalloggereventsjsonformequalityArray.prototype.findLastbrowserlistvalidatorescapegetOwnPropertyDescriptorcolumnsexpressionmkdirindicatorfilterES2019configbootstrap csstaptapea11yJSON-SchemautilslaunchdeepcopyassertcjkcliajaxTypeScriptoperating-system256fullwidthdeep-copyflagswgettc39protoreactshrinkwrapconsterrorrfc4122descriptorsfastcopynegativevarcssfulltakeReflect.getPrototypeOfcompilerdotenvfast-deep-copyes-shim APIbootstrap lessmulti-packageECMAScript 2018packagemochaBigInt64Arraychai$.extendregular expressionlet0enderlockfiletestponyfillbreakterminalqueueMicrotaskvaluesmixinsESplugincryptoparentstoolkitrmes2018nameenvironmentshellwordwrap

Readme

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

社区微信群

社群二维码过期可联络

邮箱 [email protected][email protected]

项目负责人微信 szyshangzhiyuan (加好友请备注:wxa)

Contributors ✨

Thanks goes to these wonderful people (emoji key):

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

LICENSE

MIT