novelQuick

快应用 图书模版

1、文件结构

├── sign                # 存储 rpk 包签名模块;
│   ├── debug           # 调试环境证书/私钥文件
│   └── release         # 正式环境证书/私钥文件
└── src
│   ├── assets          # 公用的资源(images/styles/字体...)
│   │   ├──images       # 存储 png/jpg/svg 等公共图片资源
│   │   └──styles       # 存放 less/css/sass 等公共样式资源
│   │   └──js           # 存储公共 javaScript 代码资源
│   │   └──data         # 模拟数据（开发时应使用真实接口数据）
│   │   └──iconfont     # 存放图标字体
│   ├── helper          # 项目自定义辅助各类工具
│   │   ├──apis         # 存储与后台请求接口相关(已封装好)
│   │   ├──ajax.js      # 对系统提供的 fetch api 进行链式封装
│   │   └──utils        # 存放项目所封装的工具类方法
│   ├── pages           # 统一存放项目页面级代码
│   ├── app.ux          # 应用程序代码的人口文件
│   ├── manifest.json   # 配置快应用基本信息
│   └── components      # 组件
└── package.json        # 定义项目需要的各种模块及配置信息

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

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

3、模版说明

本项目为快应用图书模版。

main 页面：

• 书架：
  • 编辑：点击“编辑”，可以删除收藏图书，点击“完成”确认删除，点击“取消”则取消删除操作。
  • 点击收藏的图书，进入 book-content 页面。
• 书城：
  • 点击图书的swiper、榜单、列表，进入 book-detail 页面。
  • 滚动到底部，加载更多图书。
• 查找：
  • 输入框：填写内容后，按 “enter” 或点查询按键，进入 search 页面；如果输入框为空，则提示“输入不能为空”。
  • 大家都在搜：点击图书标签，进入 search 页面；点击刷新按键，更新图书标签。

book-content页面：

• 图书内容。
• 点击“上一章/下一章”，切换章节。
• 点击“目录”，进入 contents 页面。

book-detail 页面：

• 图书信息：图片、标题、评分、作者、字数、简介。
• 章节：点击进入 contents 页面。
• 热门评论：点击进入 comment-all 页面。
• 相似图书推荐：点击图书，进入 book-detail 页面。
• 加入书架：点击将图书加入书架，在 main 页面 - “书架” 可以查看加入的图书。
• 开始阅读：点击进入 book-content 页面。

search 页面：

• 进入页面时，根据带入的初始值进行查询。
• 输入框：填写内容后，按 “enter” 或点查询按键，展示搜索结果（只有搜索到 src/assets/data/book-list.js 中的图书）；点击搜索出的图书，进入 book-detail 页面。

contents页面：

• 图书目录。
• 点击“倒序/正序”图标，切换目录排序。
• 点击“上一页/下一页”，切换目录页面。
• 点击章节，进入 book-content 页面。

comment-all 页面

• 滑动到底部，加载更多评论。
• 点击“发表评论”，进入 comment 页面。
• 点击评论下的消息图标，进入 comment-reply 页面。

comment 页面、comment-reply 页面：

• 填写评论或回复。

4、如何使用

4.1 快应用开发工具调试(推荐 ✅✅)

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

4.2 命令行调试

cd book-template && yarn
yarn start # 推荐 ✅✅

# 或者运行以下命令
yarn server & yarn watch

# 或者在终端一 Tab 下运行：
yarn server
# 在终端另一 Tab 下运行：
yarn watch

# ✨ 新增「快应用」页面
yarn gen YourPageName

用一台 Android 手机，下载安装「快应用」调试器，打开后操作扫码安装，扫描如上命令生成的二维码，即可看到效果；更多讯息，请参见快应用环境搭建。

5、Tips:

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

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

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

• 简化开始开发流程； 注入 Concurrently 插件，使可以运行 yarn start 即可开始开发，而无需更多命令，从而简洁开发流程；

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

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

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

• 优化本地开发端口设定；「快应用」默认端口为 12306，可自定义端口，但使用体验却不够友好；此处参考 creat-react-app 设定，对本地开发地址端口使用进行优化：如果指定端口(默认: 8080)被占用，则向上递增寻找新的可用端口(如：8081 / 8082 / … )；

• 浏览器打开调试主页二维码；运行 yarn start，会启动 HTTP 调试服务器，并将该地址在命令行终端显示，手机用快应用调试器扫码，即可下载并运行 rpk 包；当终端积累的信息流多了，就造成扫码不便，故增设在浏览器打开调试主页二维码；如想不使用此功能，在 command/server.js 文件中，将 autoOpenBrowser 设置为 false 即可；

6、内置命令

命令	描述	备注
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	对变化代码文件格式、实时美化	极大提升代码编写效率，强烈推荐 ✔️