请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

技术分享 快应用开发教程(2):项目框架搭建

2
回复
81
查看
[复制链接]

8

主题

76

帖子

420

积分

 楼主| 2018-11-27 20:05:44 显示全部楼层 |阅读模式
本帖最后由 vivo技术弟 于 2018-11-27 10:08 编辑

上一篇文章我们讲了如何搭建一个完整的快应用开发环境,这一篇文章开始我们进入实际的快应用开发,首先我们需要一个快应用开发的脚手架,当然从零开始搭建也是可以的,不过很多东西都是重复繁琐的,为了节省时间我们直接用官方脚手架进行开发。
这一次的目标是开发一个电影信息的快应用。先不要担心API和UI的问题,后面会慢慢一步一步的讲到。

一、初始化项目IDE的方式
IDE_init_ui.png

IDE_init1_ui.png

命令行的方式
  • 使用hap init <project-name>初始化一个快应用项目。
    hap_init.png
  • 进入项目目录,然后运行npm install安装项目依赖。
    npm_install.png
  • 依赖安装完成后,使用hap watch命令编译整个快应用项目,上一篇有讲到hap watch命令会实时监测项目中文件的变化,检测到变化后会自动打包编译,省却了开发中我们需要频繁手动编译的麻烦。
  • 接下来我们需要运行hap server命令,开启一个本地的服务,开启成功后会输出一个二维码,用手机调试器扫码即可在手机预览效果。默认端口是12306,你也可以使用自定义端口hap server --port <port>。
    hap_server.png

二、优化项目结构
上面我们通过hap init生成的项目跑起来了一个脚手架快应用,可以看到项目的结构。
  1. ├── sign                      rpk包签名模块
  2. │   └── debug                 调试环境
  3. │       ├── certificate.pem   证书文件
  4. │       └── private.pem       私钥文件
  5. ├── src
  6. │   ├── Common                公用的资源和组件文件
  7. │   │   └── logo.png          应用图标
  8. │   ├── About                 页面目录
  9. │   |   └── index.ux          页面文件,可自定义页面名称
  10. │   ├── Demo                  页面目录
  11. │   |   └── index.ux          页面文件,可自定义页面名称
  12. │   ├── DemoDetail            页面目录
  13. │   |   └── index.ux          页面文件,可自定义页面名称
  14. │   ├── app.ux                APP文件,可引入公共脚本,暴露公共数据和方法等
  15. │   └── manifest.json         项目配置文件,配置应用图标、页面路由等
  16. └── package.json              定义项目需要的各种模块及配置信息
复制代码

配置babel插件
如果你使用的hap-toolkit版本低于0.0.37那么你就无法在快应用中使用spread和rest语法,所以我们需要手动增加一个babel插件babel-plugin-transform-object-rest-spread,这个插件可以通过以下步骤安装配置。
  • 使用命令npm install babel-plugin-transform-object-rest-spread --save-dev安装插件并添加开发依赖;
  • 在项目根目录下新建文件.babelrc,在文件中写入内容
    1. {
    2.   "presets": [
    3.     "env"
    4.   ],
    5.   "plugins": [
    6.     "babel-plugin-transform-object-rest-spread"
    7.   ]
    8. }
    复制代码

重新运行下hap watch即可生效,现在你就可以在项目中使用spread和rest语法了。

增加UI组件库
由于目前快应用官方并没有UI组件规范,原生的组件又不是很美观,所以我们采用一套目前开源的UI组件库作为我们的项目基础,节省我们调整原生组件样式的时间。这一套组件库叫做Quist-UI,使用方法如下。
  • 使用命令npm install quist-ui -D安装并添加依赖;
  • 在项目目录下新建config文件夹,并在config文件夹下新增webpack.config.js文件,在文件中写入
    1. var path = require('path')
    2. module.exports = {
    3.   postHook: function(webpackConf, options){
    4.     webpackConf.resolve.alias = Object.assign(webpackConf.resolve.alias || {}, {
    5.      '@quist-ui': path.join(process.cwd(), 'node_modules/quist-ui/components')
    6.     })
    7.   }
    8. }
    复制代码

重启服务即可在项目中使用组件库的组件了,具体的组件使用方法可以参考文档

调整项目结构
现在我们删除掉脚手架中不需要的页面和目录About和DemoDetail,修改一下目录的命名,为common目录下增加picture目录和component目录,调整后的目录是下面这样的。
  1. ├── sign                      rpk包签名模块
  2. │   └── debug                 调试环境
  3. │       ├── certificate.pem   证书文件
  4. │       └── private.pem       私钥文件
  5. ├── config                    项目配置文件目录
  6. │   └── webpack.config.js     webpack配置文件
  7. ├── src
  8. │   ├── common                公用的资源和组件文件
  9. │   │   └── picture           公用图片资源  
  10. │   │   │   └── logo.png      应用图标
  11. │   │   └── component         公共组件
  12. │   ├── page                  应用页面
  13. │   │   └── index             应用首页目录
  14. │   │   │   └── index.ux      应用首页文件
  15. │   ├── app.ux                APP文件,可引入公共脚本,暴露公共数据和方法等
  16. │   └── manifest.json         项目配置文件,配置应用图标、页面路由等
  17. └── package.json              定义项目需要的各种模块及配置信息</span>
复制代码
调整之后不要忘了修改manifest.json文件中对应的字段icon、router和display
  1. {
  2.   "package": "com.quick.movie",
  3.   "name": "quick-movie",
  4.   "versionName": "1.0.0",
  5.   "versionCode": "1",
  6.   "minPlatformVersion": "101",
  7.   "icon": "/common/picture/logo.png",
  8.   "features": [
  9.     { "name": "system.prompt" },
  10.     { "name": "system.router" },
  11.     { "name": "system.shortcut" }
  12.   ],
  13.   "permissions": [
  14.     { "origin": "*" }
  15.   ],
  16.   "config": {
  17.     "logLevel": "off"
  18.   },
  19.   "router": {
  20.     "entry": "page/index",
  21.     "pages": {
  22.       "page/index": {
  23.         "component": "index"
  24.       }
  25.     }
  26.   },
  27.   "display": {
  28.     "titleBarBackgroundColor": "#f2f2f2",
  29.     "titleBarTextColor": "#414141",
  30.     "menu": true,
  31.     "pages": {
  32.       "page/index": {
  33.         "titleBarText": "首页",
  34.         "menu": false
  35.       }
  36.     }
  37.   }
  38. }
复制代码
以上调整完成后,我们便可以在src/page/index/index.ux文件中开发我们豆瓣电影快应用的第一个页面了。


作者:dadong
时间:2018.11.21


回复

使用道具 举报

5

主题

24

帖子

145

积分

前天 17:18 显示全部楼层

回复

使用道具 举报

5

主题

24

帖子

145

积分

昨天 09:36 显示全部楼层
"minPlatformVersion": "101",这样设置可以么,没用过,一般都写全
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册