aisuda-quickapp
v0.0.5
Published
基于 TypeScript 编写「快应用」模版。
Downloads
15
Readme
快应用运行时
组织结构
├── sign # 存储 rpk 包签名模块;
│ ├── debug # 调试环境证书/私钥文件
│ └── release # 正式环境证书/私钥文件
└── src
│ ├── static # 公用的资源(Images/Styles/字体...)
│ │ ├──images # 存储 png/jpg/svg 等公共图片资源
│ │ └──styles # 存放 less/css/sass 等公共样式资源
│ ├── helper # 项目自定义辅助各类工具
│ │ ├──apis # 存储与后台请求接口相关(已封装好)
│ │ ├──ajax.js # 对系统提供的 fetch api 进行链式封装
│ │ └──util.js # 存放项目所需公共工具类方法
│ ├── pages # 统一存放项目页面级代码
│ ├── app.ux # 应用程序代码的人口文件
│ └── manifest.json # 配置应用基本信息
└── package.json # 定义项目需要的各种模块及配置信息
如何使用
yarn && yarn start
# OR
npm i && npm start
此模版基于 babel-loader
方式,使得可以用 TypeScript 开发快应用;同时,为了做到开箱即用,有对模版做了加工处理;具体说明如下:
- 对项目结构进行优化;如上组织结构所示,将各资源模块,更专业的分门别类,使之可以便捷的去编写、维护、查找,同时也是基于前端开发既定共识去设计,更容易为初接触者所理解 & 上手;
- [X] 更优雅的处理数据请求;采用
Promise
对系统内置请求@system.fetch
进行封装,并抛出至全局,使得可以极简的进行链式调用,同时便捷地处理返回数据,并能够使用finally
,设计详情可参见如何优雅处理「快应用」数据请求 ; - [X] 内置了样式处理方案;「快应用」支持
less
,sass
的预编译;这里采取less
方案,并内置了部分变量,以及常用混合方法,使得可以轻松开启样式编写、复用、修改等; - [X] 封装了常用方法;在
helper/utils
路径下,有对日期、字符串、系统等常用方法,分别进行封装,统一暴露给global.$utils
,使得维护方式更加合理且健壮,同时又可以便捷的使用,高效开发;当然,你也可以根据需要自行增删、抑或扩展; - [X] **集成 Prettier;在检测代码中潜在问题的同时,统一团队代码规范、风格(
js
,less
,scss
等),从而促使写出高质量代码,以提升工作效率(尤其针对团队开发)。 - [X] 编写 prettier-plugin-quickapp 插件;为快应用编写
prettier
插件,使其可以针对.ux
/.mix
文件也能很好地工作,从而进一步完善代码风格及规范。 新增文件监听命令:引入 onchange 依赖来监听文件变化;使得在开发时,运行yarn prettier-watch
命令,即可对所修改的*.md
*.ux
*.js
等文件,进行 Prettier 格式化,从而大幅度提升编写效率。 - ......
如欲了解更多此项目模版的设计,可以参见以下几篇文章: