快应用demo及教程.zip

## 什么是快应用 简单地说快应用是国内的十大主流手机厂商比如小米、华为、ov等联合推出的一种新型应用。无需安装，秒开，体验媲美原生。还提供了像原生应用一样的入口：应用商店，搜索页等。 ## 开发前准备 接下来会教大家如何搭建、启动、预览和调试快应用项目。和[官方文档](https://doc.quickapp.cn/)类似，这里我增加了一些我在这过程中遇到的坑及解决方法。 ### 创建项目 #### 安装 NodeJS 官方说需安装 6.0 以上版本的 NodeJS，推荐 v6.11.3，但我本机 NodeJS 是 v9.3.0，暂时没发现异常就没切到 6.0。 #### 安装 hap-toolkit hap-toolkit 是快应用的开发者工具，帮助开发者通过命令行工具辅助开发工作的完成，主要包括创建模板工程，升级工程，编译，调试等功能。类似 vue-cli。 ```bash npm install -g hap-toolkit ``` 安装之后查看下版本号看是否安装成功。 ```bash hap -V ``` #### 创建项目 运行如下命令会在当前目录下创建 `<ProjectName>` 目录作为项目的根目录。 ```bash hap init <ProjectName> ``` 这个项目已经包含了项目配置与示例页面的初始代码，项目根目录主要结构如下。 ``` ├── sign rpk 包签名模块 │ └── debug 调试环境 │ ├── certificate.pem 证书文件 │ └── private.pem 私钥文件 ├── src │ ├── Common 公用的资源和组件文件 │ │ └── logo.png 应用图标 │ ├── Demo 页面目录 │ | └── index.ux 页面文件，可自定义页面名称 │ ├── app.ux APP 文件，可引入公共脚本，暴露公共数据和方法等 │ └── manifest.json 项目配置文件，配置应用图标、页面路由等 └── package.json 定义项目需要的各种模块及配置信息 ``` #### 安装依赖 ```bash npm install ``` ### 启动项目 编译 ``` npm run build ``` 编译生成的 `dist` 目录里才是最终产物：`rpk` 文件。 这一步可能会遇到报错（我就遇到了）。 ``` Cannot find module '.../node_modules/hap-tools/webpack.config.js' ``` 主要是因为创建项目后就有一个 `node_module` 文件夹了，里面有一个 `hap-tools` 包。如果 `npm install` 安装依赖，高版本的 `npm` 可能会把 `node_module` 原有的包清空再安装依赖，这时只要再手动安装下 `hap-tools` 就行了 ```bash npm install hap-tools ``` 如果要监听源码变化自动编译，可以运行 watch 命令。 ```bash npm run watch ``` 到这一步一个 hello world 的快应用就打包好了，下面需要在手机上把它跑起来。 ### 预览 首先需要安装手机[调试器](https://www.quickapp.cn/docCenter/post/69)。  只安装这个快应用调试器会发现上面的按钮都是灰色不可点击的，这时还需要安装平台预览版调试器，总之[快应用文档](https://www.quickapp.cn/docCenter/post/69)上的手机调试器都要安装才能调试。 安装好调试器后就把快应用安装包安装到手机上就可以了。 #### 扫码安装 需要启动一个本地 HTTP 服务器。 ```bash npm run server ```  如果命令行中的二维码扫了没反应，可以把那个地址在浏览器中打开在扫码试试（我就是这样），因为命令行中的二维码可能绘制的有问题。 #### 本地安装 把 `rpk` 文件传到手机上安装即可。 #### 在线更新 快应用调试器右上角可以设置服务器地址，运行以下命令每次改了代码就可以点击在线更新就可以更新了，不用每次都扫码或本地安装。 ```bash npm run server npm run watch ``` ### 调试 可以手机上预览，也可以使用 chrome devtools 调试界面，还可以查看调试日志。手机上预览上面说了，其他调试按[官方步骤](https://doc.quickapp.cn/tools/debugging-tools.html)来就好了。 **可能的坑**：在用chrome devtools调试的时候可能打不开调试界面，或者调试界面空白。这时需检查： - 在手机调试器上点击了开始调试（点了就会自动在 pc chrome 上打开 devtools） - 确保手机和电脑在同一个网段 - 检查代理，设置了代理的把代理关了试试（我就是因为设置了代理 devtools 空白）  ## 5 分钟上手教程 以一个列表页和详情页为例说明快应用的代码，数据来源[迅雷影评](http://movie.xunlei.com/)。 先看下[demo运行效果](./doc/demo.mp4) ### Manifest.json 在 `manifest.json` 中配置路由后就可以写代码了，生成的模板有例子。注意不能配置动态路由。 注意用到的[系统接口](https://doc.quickapp.cn/features/)要先在 `manifest.json` 的 `feature` 中声明。看 [manifest 的文档](https://doc.quickapp.cn/framework/manifest.html)了解具体的配置项。 ```json { "package": "com.xunlei.movie", "name": "迅雷影评", "versionName": "1.0.0", "versionCode": "1", "minPlatformVersion": "101", "icon": "/Common/logo.png", "features": [ { "name": "system.prompt" }, { "name": "system.router" }, { "name": "system.shortcut" }, { "name": "system.fetch" }, { "name": "system.webview" } ], "permissions": [ { "origin": "*" } ], "config": { "logLevel": "debug", "designWidth": 640 }, "router": { "entry": "List", "pages": { "List": { "component": "index" }, "Detail": { "component": "index" }, "About": { "component": "index" } } } } ``` ### 列表 列表使用了快应用的list组件，这个组件是Native组件，对长列表滚动性能更好，list组件还有一个onscrollbottom事件，方便下拉加载。 image组件和前端的img标签类似，但是alt属性不同，alt是用来显示占位图的，只能是本地图片，在图片没加载出来前显示。 list-item组件中的type是必填的，要实现DOM片段的复用，要求相同type属性的DOM结构完全相同；所以设置相同type属性的list-item是优化列表滚动性能的关键。 ```html <template> <list class="list-main" onscrollbottom="loadData"> <list-item class="list-item" type="review" for="{{item in list}}"> <image class ="art-pic" src="{{item.img}" alt="../Common/assets/img/default.png"> </image> <text class="art-title">{{item.title}}</text> </list-item> <!-- 加载更多，type属性自定义命名为loadMore --> <list-item type="loadMore" class="load-more" show="{{hasMore}}"> <progress type="circular" class="round"></progress> <text>加载更多</text> </list-item> </list> </template> ``` 快应用的网络请求是用fetch方法，是callback的形式，不方便调用，官方给了一个封装成promise的例子，可以用async/await的方式调用。 将封装好的fetch方法在app.ux中导出就可以全局使用了，由于我使用的接口都返回json，所以直接就在这一层解析了。实际开发时要注意JSON.parse的报错处理。 ```javascript // app.ux const natives = { /** * 网络请求 * @param options * @return {Promise} */ async fetch (options) { const p1 = new Promise((resolve, reject) => { options.success = function (data, code) { data = JSON.parse(data.data) resolve({ data, code }) } options.fail = function (data, code) { reject({ data, code }) } nativeFetch.fetch(o