渐进式小程序开源框架 wxa.js

前端下午茶

共 1988字,需浏览 4分钟

 ·

2020-09-25 12:58

 



极速上手,零配置,可无痛迁移。提供更好的工程化、代码复用能力,提高开发效率并改善开发体验。

 

微信发布小程序后,微众银行众多业务都出现了小程序开发的需求。当时,小程序官方无法提供有效的工程化能力支持, 由于小程序架构上与 Web 端开发割裂,无法直接享受 Web 端现有的技术,经常需要开发手工 Ctrl+C,V ,并且还要改动源码移植到小程序中,而且 2 年多前市面上的小程序框架,脏检查机制和组件方案深受诟病。如何提升小程序开发效率,又能保障高质量(银行体系的开发每一步都不能疏忽,大家都懂得成为迫在眉睫不得不解决的问题。

 

所以,微众银行前端开发部在 2017 年初开始着手开发自己的渐进式小程序框架,经过多个产品的成功打磨,验证和用户检视,在2018年项目组自发组织将 wxa.js 向技术社区开源, 经过了 2 年多的悄悄成(摩)(擦),已经从一个萌新小程序开源框架蜕变为更加成熟,完备的资深小程序开源框架。借此,我们希望为大家的小程序项目提供一个更好的框架选择。


目前微众银行、小鹅花钱、微众银行汽车金融、微众银行视频客服等 20 余个自用小程序产品及众多合作伙伴小程序已经在使用 wxa 开源框架。
 
项目地址:
https://github.com/WeBankFinTech/wxa
https://gitee.com/webank/wxa


 


wxa 框架优势


  • 真正零成本接入

原生小程序无需修改,即可使用 wxa 构建。当然,如果您愿意使用 wxa 提供的语法,则立马能享受到原生小程序中享受不到的顺滑体验,譬如状态管理、表单校验等。超低迁移成本,原生小程序只需安装好依赖就可以马上在 @wxa/cli2 中跑起来。支持原生和 wxa 混杂开发。

  • 强大的依赖分析算法

自研的依赖分析算法,支持分包、最大限度减少代码包体积。这不但能加快小程序速度,而且开发者再无需人工删减项目中多余的代码及图片等文件。

  • 优秀的组件化及工程化能力

任意第三方组件库,随时安装即可使用,完美适配 weui,vant-weapp, wux-weapp, iview-weapp 等组件库。NPM 依赖,打包、编译、压缩资源文件全解析,让你高效优雅地开发小程序。

  • 满足多端兼容需求

允许一次性编译出多个三方项目或其他平台的小程序,如头条、QQ 小程序。10 月版本更新将适配支付宝、百度小程序。


wxa 技术特性


wxa 基于 AOP 的思想,使用装饰器(运行时改写,拦截)和预编译等手段在不侵入小程序基础接口的前提下提供开发增强能力,按需引入,即插即用。专注于小程序原生开发,既保留小程序简单入门、快速开发的特点,同时提供一系列能力,解决工程化、代码复用的痛点,提高开发效率并改善开发体验。

  

  • Fetch 队列管理网络请求,单个请求自动防重;

  • Router 简洁的 API、预加载特性;

  • Lock 防止重复执行函数,前端防重利器;

  • Debounnce 防抖动;

  • Mixin 混合代码,代码复用;

  • watch、computed 数据监听与计算属性。

 
预编译过程中,实现了对小程序项目的依赖解析树的构建,利用依赖树对整个工程进行管理,以此为基础适配了 NPM、单文件开发、云开发、三方开发、多构建等。开发语法方面支持最新的 ES* 语法(包括 Async/Await)、Sass/Scss、Stylus,可根据开发习惯注入更多的语法支持。



学习及接入成本

标准项目无需任何配置即可运行,没有额外的学习门槛,能够完美的贴合使用原生小程序语法开发。良好的原生兼容,使原有的小程序项目在不改动代码的情况下,能快速迁移接入到 wxa ,只需要稍加配置,旧的小程序项目就可以顺滑享受 wxa 提供的便利。

( 简洁明了的 API )

 


了解更多


wxa.js 教程

  • GitHub https://webankfintech.github.io/wxa/

  • Gitee https://webank.gitee.io/wxa/

wxa.js 项目地址

  • GitHub https://github.com/WeBankFinTech/wxa

  • Gitee  https://gitee.com/webank/wxa



加入 wxa 项目


wxa 是微众银行小程序的基础设施,我们会长期的维护更新,并希望为大家的小程序项目提供一个完善的开发解决方案选择。因此,诚邀关注小程序开发的你一同参与到 wxa 开源项目中来,我们欢迎任何形式的贡献,有各种建议或意见可在 GitHub/ gitee / 微信群中提 issue。



浏览 16
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报