uni-app开发小程序技术要点解析——入门指引篇

1 前言

关于uni-app的褒贬，网上众说纷纭。称赞者有之，摒弃者亦有之。虽说uni-app不是很完美，也存在一些问题，但其他跨端框架又能如何呢？

正如uni-app的由来所述：很多人以为小程序是微信先推出的，其实，DCloud才是这个行业的开创者。这里不是广告，而是事实。

正如网友所抱怨的那样：小程序市场破坏了了前端的统一。而uni-app却解决了这一问题，想想能不感动？它所采用的vue语法，和vue生态深度融合，是初学者的福音。

废话就说这些，若非战略要求（竞争对手或自有一套体系），建议使用，希望对还在迷茫的你有些帮助。

注意，下面是个人的总结性文章，不是手摸手（新手级别）教程，需要你对uni-app、vue和小程序开发有一定的了解（看过官方教程就行，能整个demo那更好）。

2 安装与使用

uni-app 官方提供了两种项目建立方式：

2.1 通过 HBuilder X 可视化界面

这种方式，操作简单，所生成的项目结构简约。其将传统根目录存放的一些配置文件统一管理到 HBuilder X 编辑器对应用户配置文件中，源代码文件直接放置在根目录下，这对初学者可能有些不适应，需要摸索并熟悉配置文件的配置方式。

如到插件市场安装好 eslint-js 后，其配置文件具体操作路径是：工具->设置->插件设置->eslint-js 。然后点击 "打开文件.eslintrc.js进行配置"。

其优缺点如下：

优点：操作简单，无需对各种配置文件的进行特别的设置，即可使用默认配置进行快速开发、编译和打包发布。新手也能完成高工们的项目搭建和使用的活。由于配置是全局性的，所以同一套配置可以对多个项目生效。
缺点：所建立的项目不能在其他IDE中运行。对于习惯 vscode 编辑器的同学来说，切换到HBuilder X进行开发需要克服一些命令和快捷键不同所造成的麻烦。

2.2 通过vue-cli命令行

熟悉 vue 生态的同学，对 vue-cli 并不陌生。

它的优缺点是：

优点：可以在任何 IDE 中运行，HBuilder X 也支持的很好。
缺点：不同项目都要维护一套配置文件，尽管很多时候它们都是一样的。但如果想用 uni-app 开发 App（nvue 框架），你仍然需要使用 HBuilder X 编辑器。

3 认识项目结构

第2节中提到了两种项目建立方式，这两种方式所生成的项目目录结构有所不同。

3.1 HBuilder X生成的项目目录

这种方式建立的文件夹简约，其目录基础结构如下：

arduino 复制代码

├─.hbuilderx
├─components
├─pages
├─static
├─uni_modules
├─unpackage
│  └─dist
│      └─dev
├─utils
├─App.vue
├─index.html
├─main.js
├─manifest.json
├─pages.json
└─uni.scss

该方式，初始创建的项目没有我们熟悉的 node_modules 文件夹，只有 uni-app 的包管理文件夹 uni_modules。所有通过 uni-app 官方插件市场安装的包将被安装到 uni_modules 中。

但是这并不意味着我们不能使用 npm 上的包。有时候会发现在 uni-app 插件市场上没有合适的包可以使用，但是npm上的包又没有适配 uni-app 包管理方式。此时我们仍然可以使用 npm 来进行包管理 。我们只需要执行 npm init 命令生成 package.json 文件，然后再执行 npm install xx 安装对应的包即可。

【注意】npm方式安装的包，并不一定适配移动端或者小程序生态，需要大家辨别使用。不过纯JS的库，可以大胆使用，因为 uni-app 可以编译成合适的ES版本运行到移动端或者小程序，然后再由其进行运行。

3.2 vue-cli 生成的项目目录

这种方式生成的目录结构很熟悉，但有几点不同，具体目录如下：

css 复制代码

├─dist
│  └─build
│      └─h5
├─node_modules
├─src
│   ├─components
│   ├─pages
│   ├─static
│   ├─uni_modules
│   ├─utils
│   ├─App.vue
│   ├─main.js
│   ├─manifest.json
│   ├─pages.json
│   └─uni.scss
├─index.html
├─package.json
└─vite.config.js

不同之处在于 uni-app 相关的包管理文件夹 uni_modules、页面配置 pages.json 等在 src 目录下。不过不用担心，uni-app 采用了 easycom 组件模式，所以我们无需引用、注册，可以直接在页面代码中使用到 uni_modules 中安装的组件。

4 开发小程序

如果你不了解小程序也没关系（本人只了解微信小程序，你不了解也没什么关系，什么这个那个小程序我也不了解，让人眼花缭乱很是头晕），利用 uni-app 开发小程序很是方便。因为 uni-app 使用的是 vue 语法，没有各家小程序自定义的语法，所以你可以放心使用。不过使用过程中，你需要注意的主要有以下几点。

4.1 页面生命周期与vue生命周期关系

开发小程序，页面除了 vue 组件生命周期外，还包含小程序页面的生命周期。其生命周期，本人通过打印日志方式得出他们的顺序如下图所示，下图基于vue生命周期图示，增加了小程序页面生命周期钩子函数（黄色框显示）：

由上图生命周期图示，可以看出：

onLoad 时页面虚拟 DOM 已经创建，但是没有插入到页面中。此时可以拿到 vue 实例和初始数据，此时可以进行异步接口调用。
onShow 首次触发时，真实 DOM 不一定完成插入。第二次触发时，由于页面没有卸载，此时可以拿到真实 DOM。所以不建议在此处进行 DOM 操作
onReady 一定可以拿到真实 DOM，此时可以进行 DOM 操作。
onUnload 页面卸载发生在vue的卸载钩子函数（beforeDestroyed，为啥不是图示的 beforeUnmount，这个我也不清楚，官方是这样画，知道的同学麻烦评论下）前执行。

细心的你可能发现，还有 onHide 没有图示。这个钩子函数与 vue 生命周期没有太大的前后关系。

最后还有微信小程序的 onLaunch 钩子函数，这个属于应用级别，在小程序初次加载时触发，在 App.vue 中可以设置。

4.2 主题样式

uni-app 全局样式设置的地方有两处，一处是在 uni.scss 文件中。在该文件中，你可以改变 scss 变量来改变全局组件样式，也可以定义自己的 scss 全局样式变量。如下面代码，改变了 uview-ui（请认准官方2.0版本官网 uviewui.com/）的全局主题样式：

scss 复制代码

// uni.scss
@import '@/uni_modules/uview-ui/theme.scss';

$u-primary: #2a67f4;
$u-success: #30bb2f;
$u-warning: #ffa229;
$u-error: #e66a66;
// ...

第二处是在 App.vue 中，此处我们可以引入一些全局性的样式文件，或者自定义一些全局性的样式。如下面改变 uni-app 页面背景色：

vue 复制代码

<script>
export default {};
</script>

<style lang="scss">
/*每个页面公共css */
@import '@/uni_modules/uview-ui/index.scss';

uni-page-wrapper {
  background-color: $uni-bg-color-grey;
  padding: 40rpx 32rpx;
}
</style>

4.3 标签元素的变化

开发小程序时，我们不能使用 HTML 的标签元素了，需要使用小程序特有的标签元素。这里没什么难点，关键是需要熟悉相应的标签元素的特性。有个不太成熟的对应关系：

HTML标签元素	小程序标签元素
div	view
span	text
picker	select
a	navigator
img	image
iframe	web-view

其他一些标签元素如button、input、form等对应关系不用多说，一目了然。

小结

若在阅读过程中，存在障碍，建议查看官方文档相应名词解释。若您没啥障碍，心中有数，那您可以开始使用uni-app开发了。若有错误之处，欢迎指正！