閱讀(3k) 書簽贊(0) 我要糾錯

快應用使用vue開發(fā)

2020-08-08 15:28 更新

本節(jié)主要介紹如何使用 Vue 框架來開發(fā)快應用，方便開發(fā)者利用自己更熟悉的 DSL（domain-specific language，領域特定語言）特性來加快項目上線。

準備工作

官方發(fā)布的快應用平臺的 1060 版本內部集成了 Vue 框架，使用的版本為：?2.5.3?，這樣開發(fā)者在快應用官方技術規(guī)范基礎上，使用 Vue 開發(fā)出來的項目就可以無縫運行；

整體的開發(fā)流程與標準 UX 文件后綴的開發(fā)基本一致，使用?hap-toolkit?腳手架初始化一個 Vue DSL 下的快應用項目，然后使用相同的命令，完成項目啟動、編譯構建等工作；

最后將對應的項目產出文件提交到審核平臺即可；

提示：華為快應用平臺未集成 Vue 框架，因此不支持 Vue DSL 的運行；

簡單介紹

Vue 是一個廣受歡迎的前端開發(fā)框架，規(guī)范的設計原則、優(yōu)雅的開放 API、簡單易用的特性，得到開發(fā)者的一致喜愛；

站在底層渲染的角度上，它仍然建立在 DOM 模型之上，為開發(fā)者提供了一套定制的 DSL，就像標準的 UX 文件一樣，也是一種 DSL；

支持 Vue 運行在快應用平臺之上，意味著快應用的底層設計，具備支持任何一種前端 DSL 的能力，甚至：基于小程序衍生出來的新型框架；

開發(fā)者可以通過下面的介紹，了解如何在平臺上運行 Vue 項目，提升項目的移植能力；

生成項目

確保 PC 環(huán)境上，全局或本地安裝 npm 類庫?hap-toolkit?，保證版本號大于 0.6.1，推薦使用 0.6.4 以上版本。

新建快應用項目?quickapp-vue-demo?

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

進入到?quickapp-vue-demo?目錄，執(zhí)行?npm i -d?安裝依賴包。安裝完成后執(zhí)行可以開啟兩個終端執(zhí)行

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

打開調試器可以看到以下結果

展示效果

項目開發(fā)

在 UX 文件中引入的各種接口可以放心遷移至 Vue 文件中，接口的使用與 UX 一致。除此之外，使用 Vue 開發(fā)快應用的時候需要注意以下幾點。

頁面生命周期

在 Vue 的原始的生命周期的基礎上，增加了底層原生能力的生命周期 ?onInit?、?onShow?、?onHide?、?onMenuPress?、?onBackPress?、?onRefresh?、?onConfigurationChanged?。

語法

請不要在 Vue 語法中混用快應用原始語法，包括 template 標簽內的各種綁定語法（for、if 等）以及block等標簽。如使用slot等標簽請遵循 Vue 的使用規(guī)則。

原生能力

依舊可以在方法內部調用?this.$app?獲取到 App 相關信息、?this.$page.setTitleBar?修改 titlebar 文字；也可以執(zhí)行特定 DOM 元素的方法，比如獲取元素并聚焦?this.$refs.input.focus()?。這些原生能力在 Vue 中得以保留，可以在放心使用。

構建項目

項目打包生成 rpk 后綴文件，與標準 UX 文件一致，使用：npm run build與npm run release分別完成打包；

注意提示

暫不支持樣式 scoped 配置

使用 Vue 開發(fā) web 應用的時候也會發(fā)生樣式覆蓋的問題，所以在組件內部會使用 scoped 進行隔離

目前快應用暫不支持屬性選擇器樣式，使用 scoped 編譯會出錯

所以建議開發(fā)者使用 css 模塊化bem進行解決。或者全局引用（如果全局樣式太多也會產生性能問題，建議使用頁面和組件模塊化 css）

展示效果

如何引入插件，如：less

有的開發(fā)者希望引入 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'
    })
  ]
}

由于添加了依賴，所以需要安裝。命令行執(zhí)行

npm i -D less-loader less

命令行再次執(zhí)行

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

在單文件index.vue內的 style 標簽使用lang="less"正常運行

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

快應用 使用vue開發(fā)