flypxx / quick-app-demo

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

快应用示例模版

文件结构

├── sign                # 存储 rpk 包签名模块;
│   ├── certificate.pem # 证书文件
│   └── private.pem     # 私钥文件
└── src
│   ├── assets          # 公用的资源(images/styles/字体...)
│   │   ├──images       # 存储 png/jpg/svg 等公共图片资源
│   │   └──styles       # 存放 less/css/sass 等公共样式资源
│   │   └──js           # 存储公共 javaScript 代码资源
│   │   └──iconfont     # 存放图标字体
│   ├── CardDemo        # 快应用卡片示例页面
│   ├── helper          # 项目自定义辅助各类工具
│   │   ├──ajax.js      # 对系统提供的 fetch api 进行链式封装
│   │   └──utils        # 存放项目所封装的工具类方法
│   ├── pages           # 统一存放项目页面级代码
│   ├── app.ux          # 应用程序代码的人口文件
│   ├── manifest.json   # 配置快应用基本信息
│   └── components      # 存放快应用组件
└── package.json        # 定义项目需要的各种模块及配置信息

如果需要轻粒子统计功能服务

首先需要前往轻粒子官网注册, 在创建应用之后可以获得 app_key,然后需要在 /src/assets/js/statistics.config.js 文件中配置好自己的 app_key。

模版说明

本项目为快应用模版(含卡片,CardDemo 目录)。

  • Demo 页面:示例页面;
  • DemoDetail页面:详情页面;

CardDemo 页面:快应用卡片示例页面,快应用卡片开发各厂商的实现方式不同,需到各个厂商的开发者平台查看具体文档。

如何使用

推荐下载快应用开发工具,可以进行扫码调试 / USB 调试,还有模拟器预览、语法提示等功能。使用方法,请参见快应用开发工具文档

  • 更优雅的处理数据请求;采用 Promise 对系统内置请求 @system.fetch 进行封装,并抛出至全局,使得可以极简的进行链式调用,并能够使用 finally

  • 内置样式处理方案;「快应用」支持 less, sass 的预编译;这里采取 dart sass 方案,并内置了部分变量,以及常用混合方法,使得可以轻松开启样式编写、复用、修改等;

  • 封装常用方法;在 helper/utils 路径下,有对日期、字符串、系统等常用方法,分别进行封装,统一暴露给 global.$utils,使得维护方式更加合理且健壮,同时又可以便捷的使用,高效开发;当然,你也可以根据需要自行增删、抑或扩展;

  • 添加新增页面命令脚本;如果需要新建页面,只需运行:yarn gen YourPageName ,当然,也可以根据需要,自行定定制模板:/command/gen/template.ux

  • 集成 Prettier & Eslint;在检测代码中潜在问题的同时,统一团队代码规范、风格(jslessscss等),从而促使写出高质量代码,以提升工作效率(尤其针对团队开发);

  • 新增文件监听命令:引入 onchange 依赖来监听文件变化;开发时,运行 yarn prettier-watch 命令,即可对所修改的 *.ux *.js 等文件,进行 Prettier 格式化,从而大幅度提升编写效率;

内置命令

强烈推荐使用快应用开发工具,进行快应用开发;当然,如果您喜欢命令行,本模版也内置了些常用命令,供您参考:

命令 描述 备注
yarn start 开启服务(server)和监听(watch) 如不嫌麻烦,可使用,不推荐
yarn server 开启服务(server) 如不嫌麻烦,可使用,不推荐
yarn watch 开启监听(watch) 如不嫌麻烦,可使用,不推荐
yarn build 编译打包,生成 rpk 对内置 hap build 命令的转接
yarn release 生成 rpk包并增加签名 对内置 hap release 命令的转接
yarn gen 新增「快应用」页面 助你高效生成页面,模版可自定义,推荐 ✓
yarn prettier 一键美化代码(js/css/less/ux) 实在是团队开发好帮手,推荐 ✓
yarn prettier-watch 对变化代码文件格式、实时美化 极大提升代码编写效率,强烈推荐 ✔️

About


Languages

Language:JavaScript 99.4%Language:SCSS 0.6%