uni-app开发小程序技术要点解析——Vue3/Vite开发篇

1 前言

前文新手指引篇中我们讲到 uni-app 使用 vue 语法进行开发，不特别说明指的是 vue2 版本。但 vue3 又该如何支持和使用呢？本文带你一探究竟。

下面以基于 vite 工程来描述如何使用 vue3 开发小程序。当然使用 vue-cli 创建的工程也可以使用 vue3 语法来开发，不过本文不讨论，后续有时间讲讲 vue-cli 如何迁移到 vite。

本文是总结性文章，可作为官方文档的一个补充，可搭配着一起阅读。

2 vite 工程的建立与配置

2.1 创建 vite 工程

uni-app 官方已经支持基于 vite 的工程创建方式，方法也很简单，执行以下命令：

bash 复制代码

# 创建稳定版本工程
npx degit dcloudio/uni-preset-vue#vite my-vue3-project

本文写作时，官方只提供了一种模板，所以无可选模板使用。

若项目执行 npm install 失败，请检查 node 的版本，保证是符合这个要求： ^14.18.0 || >=16.0.0 。

如新手指引篇所述，通过该方式创建的项目，不能使用 HBuilder X 提供的默认配置，需要我们自行引入必要的开发工具包，如 eslint、sass、prettier等。

2.2 代码校验配置

我们仍然使用 eslint 来完成项目的代码校验。首先执行下面命令来安装必要依赖：

bash 复制代码

npm i eslint@^8.7.0 eslint-plugin-vue vue-eslint-parser@^8.0.0

【注意】这里限制了下 eslint 和 vue-eslint-parser 版本，最新版本截止本文写作时未能生效。

然后创建 .eslintrc.json 文件，为何不是 .js 文件格式，是因为 vite 创建的项目使用 ESM 方式加载文件，不能识别 require 方式加载的文件。使用 .json 格式可以规避这个问题。

文件大致如下配置：

json 复制代码

{
  "root": true,
  "env": {
    "node": true,
    "browser": true,
    // "es6": true, // 这个版本已经很老了
    "es2021": true
  },
  "extends": ["plugin:vue/recommended", "eslint:recommended"],
  "parserOptions": {
    "sourceType": "module", // 指定来源的类型，"script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)
    "allowImportExportEverywhere": true // 不限制eslint对import使用位置
  },
  // 配置小程序全局对象或方法
  "globals": {
    "swan": true,
    "wx": true,
    "uni": true,
    "getApp": true,
    "getCurrentPages": true,
    "plus": true
  },
  // add your custom rules here
  // it is base on "https"://github.com/vuejs/eslint-config-vue
  "rules": {
    // ...
  }
}

上面本人设置编译后的版本是 es2021 ，而不是 es6 ，因为 es6 版本其实已经很老了，主流浏览器已经支持的很好。

另外，配置了 globals ，主要就是小程序中使用的一些全局对象和方法，包括 uni-app 和微信小程序中用到的全局对象和方法。

2.3 vscode 编辑体验配置

为了在 vscode 中获得更好的编辑体验，我们设置 jsconfig.json 和 .editorconfig 两个文件。

在 jsconfig.json 文件中配置 @ 符路径别名，以便跳转引用不至于失效。具体如下

json 复制代码

{
  "compilerOptions": {
    "target": "ES2021",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

上述配置详细，参见 jsconfig.json Reference 。

然后配置 .editorconfig 文件，用于基础代码的格式化。实例如下：

ini 复制代码

# 告诉EditorConfig插件，这是根文件，不用继续往上查找
root = true

# 匹配全部文件
[*]
# 设置字符集
charset = utf-8
# 缩进风格，可选space、tab
indent_style = space
# 缩进的空格数
indent_size = 2
# 结尾换行符，可选lf、cr、crlf
end_of_line = lf
# 在文件结尾插入新行
insert_final_newline = true
# 删除一行中的前后空格
trim_trailing_whitespace = true

# 匹配md结尾的文件
[*.md]
insert_final_newline = false
trim_trailing_whitespace = false

更多配置解释，参考 editorconfig.org/ 。

3 vue3 开发

在上述创建的基于 vite 的 uni-app 项目中，使用 vue3 开发非常丝滑，遵循 vue3 官方语法书写即可，这里以组合式开发方式为例说明。

3.1 小程序周期函数使用

小程序中经常需要切换底部导航栏，切换时会触发页面的 onShow 或 onHide 钩子函数。这两个函数使用如下：

vue 复制代码

<template>
  <view class="page-container home">
    <!-- ... -->
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';

const orderList = ref([]);

function onSearch() {
  // 异步获取数据 ...
}

onShow(() => {
  onSearch();
});
</script>

<style lang="scss" scoped>
// ...
</style>

如果不使用 onShow 钩子函数来调用 onSearch 方法的话，切换页面不会刷新数据，这样有可能是错误的。如果详情页面操作了数据，改变了状态，但是返回列表页却没有任何变化，这从业务上来说是不对的。因此我们需要在 onShow 钩子函数刷新下数据，保证每次返回页面时都能获取到最新数据。

更多 vue3 生命周期钩子函数和小程序页面生命周期钩子函数之间的关系，可以参考本人的新手指引篇 - 页面生命周期与vue生命周期关系中所述，使用方法和上述 onShow 类似。

3.2 不能使用的 API

由于 uni-app 或者小程序的限制，有些 vue 的函数或方法不能在微信小程序中使用，下面罗列下微信小程序中不能使用的常见函数或方法。

函数或方法	描述	H5	App端	微信小程序
h	创建虚拟节点，jsx 语法时常用	√	x	x
nextTick	回调函数在下一个 DOM 更新周期执行	√	x	x
activated	被 `keep-alive` 缓存的组件激活时调用	√	x	x
deactivated	被 `keep-alive` 缓存的组件失活时调用	√	x	x
directives	组件实例中自定义的指令	√	√	x
inheritAttrs	创建嵌套组件时，希望继承 attribute 属性并运用到子组件的根元素上	√	√	x
$attrs	传递过来的非 `props` 属性	√	√	x
$el	组件实例的根元素	√	x	x

更多详细信息请查看 uni-app Vue3-api。

3.3 状态管理

目前 vue 官方提供了两个状态管理的库，分别是 vuex 和 pinia。两个库都有支持在 vue2 和 vue3 中使用的版本（vuex 4.x 支持 vue3）。既然我们已经用了 vue3 组合式语法，那使用 pinia 会更加友好，毕竟它就是为这准备的状态库。

使用说明在此不赘述，官方文档很详细。

4 小结

在 uni-app 中使用 vue3，大部分语法都能使用，无需有过多心智负担。不熟悉 vue3 语法的同学赶紧学起来，这是趋势，也是机遇。