codecamp

快应用 使用vue开发

本节主要介绍如何使用 Vue 框架来开发快应用,方便开发者利用自己更熟悉的 DSL(domain-specific language,领域特定语言)特性来加快项目上线。

准备工作

官方发布的快应用平台的 1060 版本内部集成了 Vue 框架,使用的版本为:​2.5.3​,这样开发者在快应用官方技术规范基础上,使用 Vue 开发出来的项目就可以无缝运行;

整体的开发流程与标准 UX 文件后缀的开发基本一致,使用​hap-toolkit​脚手架初始化一个 Vue DSL 下的快应用项目,然后使用相同的命令,完成项目启动、编译构建等工作;

最后将对应的项目产出文件提交到审核平台即可;

提示:华为快应用平台未集成 Vue 框架,因此不支持 Vue DSL 的运行;

简单介绍

Vue 是一个广受欢迎的前端开发框架,规范的设计原则、优雅的开放 API、简单易用的特性,得到开发者的一致喜爱;

站在底层渲染的角度上,它仍然建立在 DOM 模型之上,为开发者提供了一套定制的 DSL,就像标准的 UX 文件一样,也是一种 DSL;

支持 Vue 运行在快应用平台之上,意味着快应用的底层设计,具备支持任何一种前端 DSL 的能力,甚至:基于小程序衍生出来的新型框架;

开发者可以通过下面的介绍,了解如何在平台上运行 Vue 项目,提升项目的移植能力;

生成项目

确保 PC 环境上,全局或本地安装 npm 类库​hap-toolkit​,保证版本号大于 0.6.1,推荐使用 0.6.4 以上版本。

新建快应用项目​quickapp-vue-demo

npx hap init quickapp-vue-demo --dsl=vue

进入到​quickapp-vue-demo​目录,执行​npm i -d​安装依赖包。安装完成后执行可以开启两个终端执行

npx hap servernpx hap watch --include-dsl-from-lib

打开调试器可以看到以下结果

展示效果

项目开发

在 UX 文件中引入的各种接口可以放心迁移至 Vue 文件中,接口的使用与 UX 一致。 除此之外,使用 Vue 开发快应用的时候需要注意以下几点。

页面生命周期

在 Vue 的原始的生命周期的基础上,增加了底层原生能力的生命周期 ​onInit​、​onShow​、​onHide​、​onMenuPress​、​onBackPress​、​onRefresh​、​onConfigurationChanged​。

语法

请不要在 Vue 语法中混用快应用原始语法,包括 template 标签内的各种绑定语法(for、if 等)以及block等标签。如使用slot等标签请遵循 Vue 的使用规则。

原生能力

依旧可以在方法内部调用​this.$app​获取到 App 相关信息、​this.$page.setTitleBar​修改 titlebar 文字;也可以执行特定 DOM 元素的方法,比如获取元素并聚焦​this.$refs.input.focus()​。这些原生能力在 Vue 中得以保留,可以在放心使用。

构建项目

项目打包生成 rpk 后缀文件,与标准 UX 文件一致,使用:npm run build与npm run release分别完成打包;

注意提示

暂不支持样式 scoped 配置

使用 Vue 开发 web 应用的时候也会发生样式覆盖的问题,所以在组件内部会使用 scoped 进行隔离

目前快应用暂不支持属性选择器样式,使用 scoped 编译会出错

所以建议开发者使用 css 模块化bem进行解决。或者全局引用(如果全局样式太多也会产生性能问题,建议使用页面和组件模块化 css)

展示效果

如何引入插件,如:less

有的开发者希望引入 less 预编译 css。

hap-toolkit目前支持自定义resolve、module和plugins配置,这里演示如何让 Vue 项目支持 less。

在quickapp-vue-demo的根目录新增文件hap.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
      },
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'vue-loader',
            options: {
              hotReload: false, // 关闭热重载
              compilerOptions: {
                preserveWhitespace: false
              }
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
      filename: '[name].css.json'
    })
  ]
}

由于添加了依赖,所以需要安装。命令行执行

npm i -D less-loader less

命令行再次执行

npx hap servernpx hap --watch --include-dsl-from-lib

在单文件index.vue内的 style 标签使用lang="less"正常运行

注意,目前的 hap.config.js 支持 resolve、module 和 plugins 字段的配置,语法同 webpack

相关参考


快应用 自动化测试
快应用 toolkit工具
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

快应用 参考手册

快应用 安全

快应用 声音音频

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }