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

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

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

主题

25

帖子

150

积分

2018-12-15 17:18:59 显示全部楼层
回复

使用道具 举报

5

主题

25

帖子

150

积分

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

使用道具 举报

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