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

快应用 Mar 12, 2019

上一篇文章我们讲了如何搭建一个完整的快应用开发环境,这一篇文章开始我们进入实际的快应用开发,首先我们需要一个快应用开发的脚手架,当然从零开始搭建也是可以的,不过很多东西都是重复繁琐的,为了节省时间我们直接用官方脚手架进行开发。

这一次的目标是开发一个电影信息的快应用。先不要担心API和UI的问题,后面会慢慢一步一步的讲到。

一、初始化项目

IDE的方式

IDE_init_ui
IDE_init1_ui-1

命令行的方式
  1. 使用hap init <project-name>初始化一个快应用项目。

    hap_init

  2. 进入项目目录,然后运行npm install安装项目依赖。

    npm_install

  3. 依赖安装完成后,使用hap watch命令编译整个快应用项目,上一篇有讲到hap watch命令会实时监测项目中文件的变化,检测到变化后会自动打包编译,省却了开发中我们需要频繁手动编译的麻烦。

  4. 接下来我们需要运行hap server命令,开启一个本地的服务,开启成功后会输出一个二维码,用手机调试器扫码即可在手机预览效果。默认端口是12306,你也可以使用自定义端口hap server --port <port>

    hap_server

二、优化项目结构

上面我们通过hap init生成的项目跑起来了一个脚手架快应用,可以看到项目的结构。

├── sign                      rpk包签名模块
│   └── debug                 调试环境
│       ├── certificate.pem   证书文件
│       └── private.pem       私钥文件
├── src
│   ├── Common                公用的资源和组件文件
│   │   └── logo.png          应用图标
│   ├── About                 页面目录
│   |   └── index.ux          页面文件,可自定义页面名称 
│   ├── Demo                  页面目录
│   |   └── index.ux          页面文件,可自定义页面名称 
│   ├── DemoDetail            页面目录
│   |   └── index.ux          页面文件,可自定义页面名称
│   ├── app.ux                APP文件,可引入公共脚本,暴露公共数据和方法等
│   └── manifest.json         项目配置文件,配置应用图标、页面路由等
└── package.json              定义项目需要的各种模块及配置信息
配置babel插件

如果你使用的hap-toolkit版本低于0.0.37那么你就无法在快应用中使用spreadrest语法,所以我们需要手动增加一个babel插件babel-plugin-transform-object-rest-spread,这个插件可以通过以下步骤安装配置。

  1. 使用命令npm install babel-plugin-transform-object-rest-spread --save-dev安装插件并添加开发依赖;

  2. 在项目根目录下新建文件.babelrc,在文件中写入内容

    {
      "presets": [
        "env"
      ],
      "plugins": [
        "babel-plugin-transform-object-rest-spread"
      ]
    }
    

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

增加UI组件库

由于目前快应用官方并没有UI组件规范,原生的组件又不是很美观,所以我们采用一套目前开源的UI组件库作为我们的项目基础,节省我们调整原生组件样式的时间。这一套组件库叫做Quist-UI,使用方法如下。

  1. 使用命令npm install quist-ui -D安装并添加依赖;

  2. 在项目目录下新建config文件夹,并在config文件夹下新增webpack.config.js文件,在文件中写入

    var path = require('path')
    module.exports = {
      postHook: function(webpackConf, options){
        webpackConf.resolve.alias = Object.assign(webpackConf.resolve.alias || {}, {
          '@quist-ui': path.join(process.cwd(), 'node_modules/quist-ui/components')
        })
      }
    }
    

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

调整项目结构

现在我们删除掉脚手架中不需要的页面和目录AboutDemoDetail,修改一下目录的命名,为common目录下增加picture目录和component目录,调整后的目录是下面这样的。

├── sign                      rpk包签名模块
│   └── debug                 调试环境
│       ├── certificate.pem   证书文件
│       └── private.pem       私钥文件
├── config                    项目配置文件目录
│   └── webpack.config.js     webpack配置文件
├── src
│   ├── common                公用的资源和组件文件
│   │   └── picture           公用图片资源  
│   │   │   └── logo.png      应用图标
│   │   └── component         公共组件
│   ├── page                  应用页面
│   │   └── index             应用首页目录
│   │   │   └── index.ux      应用首页文件
│   ├── app.ux                APP文件,可引入公共脚本,暴露公共数据和方法等
│   └── manifest.json         项目配置文件,配置应用图标、页面路由等
└── package.json              定义项目需要的各种模块及配置信息

调整之后不要忘了修改manifest.json文件中对应的字段iconrouterdisplay

{
  "package": "com.quick.movie",
  "name": "quick-movie",
  "versionName": "1.0.0",
  "versionCode": "1",
  "minPlatformVersion": "101",
  "icon": "/common/picture/logo.png",
  "features": [
    { "name": "system.prompt" },
    { "name": "system.router" },
    { "name": "system.shortcut" }
  ],
  "permissions": [
    { "origin": "*" }
  ],
  "config": {
    "logLevel": "off"
  },
  "router": {
    "entry": "page/index",
    "pages": {
      "page/index": {
        "component": "index"
      }
    }
  },
  "display": {
    "titleBarBackgroundColor": "#f2f2f2",
    "titleBarTextColor": "#414141",
    "menu": true,
    "pages": {
      "page/index": {
        "titleBarText": "首页",
        "menu": false
      }
    }
  }
}

以上调整完成后,我们便可以在src/page/index/index.ux文件中开发我们豆瓣电影快应用的第一个页面了。


作者:dadong

vivo developer

快应用引擎、工具开发者、快应用生态拓展达人(vivo)。

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.