uni-app 基础知识

我爱学习_zwj2025-04-08 19:36

学习目标：

  • 掌握WXML获取节点信息的用法
  • 知道如何修改 uni-ui 扩展组件的样式
  • 掌握 uniForm 表单验证的使用方法
  • 能够在 uni-app 中使用自定义字体图标

一、uni-app 基础知识

uni-app 是组合了 Vue 和微信小程序的相关技术知识，要求大家同时俱备 Vue 和原生小程序的开发基础。

1.1 自定义组件

在 uni-app 中自定义组件的定义与 Vue 组件基本一致，不要参照原生小程序方式来定义组件。

1.1.1 easycom组件规范

easycom 是 uni-app 自定义的加载组件的规范，按该规范定义的组件可以实现自动导入，其规范要求如下：

  1. 安装在项目根目录的 components 目录下，并符合 components/组件名称/组件名称.vue
  2. 安装在 uni_modules 目录下，路径为 uni_modules/插件ID/components/组件名称/组件名称.vue
1.1.2 custom-tabs

标签页（tabs）的切换在开发中是经常会使用到的一种交互方式，【优医咨询】项目就用到这种交互方式，接下来我们自已封装一个标签页组件，按着 easycom 的规范创建组件目录及文件：

注意⚠️：建议组件命名以-分割

  1. custom-tabs 组件布局

    <script setup> // </script> <template> <view class="custom-tabs"> <view class="custom-tabs-bar active"> <text class="tabbar-text">关注</text> </view> <view class="custom-tabs-bar"> <text class="tabbar-text">推荐</text> </view> <view class="custom-tabs-bar"> <text class="tabbar-text">护肤</text> </view> <view class="custom-tabs-bar"> <text class="tabbar-text">减脂</text> </view> <view class="custom-tabs-bar"> <text class="tabbar-text">饮食</text> </view> <view class="custom-tabs-cursor"></view> </view> </template> <style lang="scss"> // 自定义tabbar .custom-tabs { display: flex; position: relative; padding: 0 30rpx; }

    .custom-tabs-bar {
    height: 80rpx;
    line-height: 80rpx;
    color: #979797;
    padding-right: 30rpx;
    position: relative;

    复制代码 
     &.active {
   color: #121826;
   font-weight: 500;
 }

    }

    .tabbar-text {
    font-size: 30rpx;
    }

    .custom-tabs-cursor {
    position: absolute;
    bottom: 3px;
    left: 20px;

    复制代码 
     width: 20px;
 height: 2px;
 border-radius: 2px;
 background-color: #2cb5a5;
 transition: all 0.3s ease-out;

    }
    </style>

  2. 在页面中引用 custom-tabs 组件，由于符合 easycom 组件自动导入规范，可以省略组件的导入步骤。

    <template> <custom-tabs></custom-tabs> </template>
1.1.3 组件样式隔离

在原生小程序中 自定义组件中如果引用其它的自定义组件时，无法对组件内部样式进行修改，通过设置原生小程序的样式隔离可以解决这个问题。

具体的设置方式如下代码所示：

复制代码 
<script setup>
  defineOptions({
    options: {
      styleIsolation: 'shared',
    },
  })
</script>

说明：可以同时在 vue 组件中使用选项式和组合式 setup 语法糖。

创建符合 easycom 组件规范的组件 custom-form ，以表单相关组件为例来进行演示：

复制代码 
<!-- components/custom-form/custom-form.vue -->
<template>
	<uni-forms label-width="0">
		<uni-forms-item>
			<uni-easyinput type="text" :clearable="false" placeholder="请输入手机号" />
		</uni-forms-item>
		<uni-forms-item>
			<uni-easyinput type="password" :clearable="false" placeholder="请输入密码" />
		</uni-forms-item>
		<uni-forms-item>
			<uni-easyinput type="textarea" :clearable="false" />
		</uni-forms-item>
	</uni-forms>
	<button type="primary">提交</button>
</template>

<script setup>
  defineOptions({
    options: {
      // 修改组件内部样式：微信小程序端写法
      styleIsolation: 'shared',
    },
  })
</script>

<style lang="scss">
	.uni-forms {
		margin: 20px;
	}

  /* ::v-deep  修改组件内部样式：H5 端的写法 */
	::v-deep .uni-easyinput__content-input {
		border: 1px solid red;
		padding: 10px;
	}
</style>

注意⚠️：在修改输入框 uni-easyinput 组件内部样式时就必须要指定 styleIsolation: 'shared' 否则在小程序中样式并不会生效。

效果如下:

1.2 uniForms 表单验证

表单数据的验证在开发中是最常处理的逻辑之一，然而原生小程序组件关于表单数据的获取的验证的能力非常弱，此时要么自行封装组件，要么使用第三方组件库，庆幸的是 uni-app 扩展组件 uni ui 提供了表单数据的获取的验证的能力，这节我们来学习 uniForms 的使用。

1.2.1 表单数据

大家是否记得原生小程序组件中关于表单数据的获取只能支持简易双向数据绑定，由于这个局限性，在 uni-app 开发中经常使用 uni-easyinput 增强组件替代 input 和 textarea ，通过 v-model 来获取表单的数据：

复制代码 
<!-- components/login-form/login-form.vue -->
<script setup>
  import { ref } from 'vue'

  // 表单数据
  const formData = ref({
    mobile: '13212345678',
    password: 'abc12345',
    alt: '关于我的描述',
  })
</script>

<template>
  <uni-forms label-width="0">
    <uni-forms-item>
      <uni-easyinput
        type="text"
        :clearable="false"
        v-model="formData.mobile"
        placeholder="请输入手机号"
      />
    </uni-forms-item>
    <uni-forms-item>
      <uni-easyinput
        type="password"
        :clearable="false"
        v-model="formData.password"
        placeholder="请输入密码"
      />
    </uni-forms-item>
    <uni-forms-item>
      <uni-easyinput
        type="textarea"
        v-model="formData.alt"
        :clearable="false"
      />
    </uni-forms-item>
  </uni-forms>
  <button class="uni-button" type="primary">提交</button>
</template>
1.2.2 验证规则

在对表单数据进行验证时不同的表单项，验证规则各不相同，在 uniForms 中通过 rules 属性来指定验证规则，语法格式如下：

复制代码 
<!-- components/custom-form/custom-form.vue -->
<script setup>
	import { ref } from 'vue'

  // 表单数据
  const formData = ref({
    mobile: '',
    password: '',
    alt: '关于我的描述',
  })
  
  // 表单验证规则
  const formRules = {
    mobile: {
      rules: [
        { required: true, errorMessage: '请填写手机号码' },
        { pattern: '^[1][3-8][0-9]{9}$', errorMessage: '手机号码格式不正确' },
      ],
    },
    password: {
      rules: [
        { required: true, errorMessage: '请输入密码' },
        { pattern: '^[a-zA-Z0-9]{8}$', errorMessage: '密码格式不正确' },
      ],
    },
  }
</script>
  • mobile、password 表示要验证的数据名称，该名称需要在组件中定义（后面步骤会介绍）
  • rules 表示具体验证数据的规则，规则可以有多条
  • required 表示是否必填（不能为空）
  • pattern 自定义正则表达式进行验证，正则中的 \ 需要进行转义，即要写成 \\,正则不需要//包裹
  • errorMessage 数据验证不合法时的提示文字

验证规则定义好之后，还有3件事需要处理：

  1. 是通过 rules 应用规则

  2. 是为通过 name 为待验证数据命名

  3. 是通过 model 指定验证的数据

    <template> <uni-forms label-width="0" :model="formData" :rules="formRules" > <uni-forms-item name="mobile"> <uni-easyinput type="text" :clearable="false" v-model="formData.mobile" placeholder="请输入手机号" /> </uni-forms-item> <uni-forms-item name="password"> <uni-easyinput type="password" :clearable="false" v-model="formData.password" placeholder="请输入密码" /> </uni-forms-item> <uni-forms-item> <uni-easyinput type="textarea" v-model="formData.alt" :clearable="false" /> </uni-forms-item> </uni-forms> <button class="uni-button" type="primary">提交</button> </template>
1.2.3 触发验证

在用户点击提交按钮时调用 uniForms 的方法来执行数据的验证：

  1. 通过 ref 获取组件实例

  2. 调用组件暴漏出来的方法

    <script setup> import { ref } from 'vue'

    // 组件 ref
    const formRef = ref()

    复制代码 
     // 省略前面部分代码...

    // 表单提交
    const onSubmit = async () => {
    try {
    // 执行表单的验证
    const res = await formRef.value.validate()
    console.log(res)
    } catch (error) {
    console.log(error)
    }
    }
    </script>

    <template> <uni-forms label-width="0" ref="formRef" :model="formData" :rules="formRules" > ... </uni-forms> <button @click="onSubmit" class="uni-button" type="primary">提交</button> </template>
1.3 自定义字体图标

扩展组件中的 uni-icons 内置了许多的图标，在内置的图标不能满足要求时还可以使用自定义图标。

1.3.1 单色图标

自定义单色图标的制作和使用与网页面几乎是一致的，首先在 iconfont.cn 平台制作字体图标，其次下载字体文件及配套的样式文件。

fonts.zip

  1. 将下载的字体文件及样式表放到 static/fonts 目录中。

  2. 在 App.vue 中全局导入 iconfont.css 样式，全局生效。

  3. 通过类名使用图标。

    <style lang="scss"> @import '@/static/fonts/iconfont.css'; </style>

在 App.vue 中引入字体文件后可以在任何页面使用字体图标了，使用的方式也网页中是一样的：

复制代码 
<!-- pages/my/index.vue -->
  <view class="icons rows">
    <!-- 自定义字体图标 -->
    <text class="iconfont icon-lanqiu"></text>
    <text class="iconfont icon-zuqiu"></text>
  </view>

上述用法是常规方式使用自定义图标，除此之个 uni-icons 也支持使用自定义图标：

复制代码 
<!-- pages/my/index.vue -->
<view class="icons rows">
  <!-- 常规方式使用自定义字体图标 -->
  <text class="iconfont icon-lanqiu"></text>
  <text class="iconfont icon-zuqiu"></text>
  <!-- uni-icons 方式使用自定义字体图标 -->
  <uni-icons size="30" custom-prefix="iconfont" type="icon-lanqiu" />
  <uni-icons size="30" custom-prefix="iconfont" type="icon-zuqiu" />
</view>

<style lang="scss">
  .iconfont {
    font-size: 30px;
  }
</style>
  • custom-prefix 指定自定义图标的公共类名
  • type 指定自定义图标的名称

扩展了解：

  1. 原生小程序中是不支持引入本地字体图标文件，必须为网络地址或 base64。
  2. 在 使用 uni-app 时引入的本地字体文件在打包后会处理成 base64，因此使用时可以引入本地字体文件
1.3.2 多色图标

多色图标一般是通过 svg 来支持的，然而早期版本微信小程序支持 svg 格式图片，所以在 uni-app 中多色图标只能用普通的图片来代替。

iconfont-阿里巴巴矢量图标库

虽然多色图标是用普通图片来实现的，但是我们可以让其的使用方式变得方便一些，即从形式上看仍是以字体图标的方式来使用。

  1. 安装 iconfont-tools 工具来处理多色图标，将图标转找成 base64 格式的图片。

    windows

    npm install -g iconfont-tools

    mac

    sudo npm install -g iconfont-tools

  2. 通过命令行切换到多色字体文件所在目录 ，执行 iconfont-tools

多色图标.zip

复制代码 
iconfont-tools

根据引导生成支持多色图标的文件，每个步骤中指定的名称自已可任意指定。

  1. 把生成的字体文件 colors.css 放到项目中，然后在 App.vue 文件中全局引入

    <style lang="scss"> /* 单色图标 */ @import '@/static/fonts/iconfont.scss'; /* 多色图标 */ @import '@/static/colors.css'; </style> <view class="icons rows"> <text class="t-colors t-colors-beianguanli"></text> <uni-icons custom-prefix="t-colors" type="t-colors-renyuanbeian" /> </view> <style lang="scss"> page { padding: 30px; box-sizing: border-box; }

    .icon-symbol {
    width: 30px;
    height: 30px;
    }
    </style>

注意事项：转换后的图片虽然使用方式上与字体图标相似，但是本质是是 base64 格式的图片，因此无法修改颜色，并且修改尺寸要修改其宽高来实现。

1.4 生命周期

uni-app 中支持3种类型的生命周期函数，分别是小程序应用级生命周期、小程序页面级生命周期，Vue 生命周期。

1.4.1 应用级

|----------|--------|--------|--------|
| 名称 | 应用是否可用 | 页面是否可用 | 组件是否可用 |
| onLaunch | 是 | 否 | 否 |
| onShow | 是 | 否 | 否 |
| onHide | 是 | 否 | 否 |

可以看出小程序应用级的生命周期只能用在应用级别，即只能在 App.vue 中应用。

1.4.2 页面级

|---------|--------|--------|--------|
| 名称 | 应用是否可用 | 页面是否可用 | 组件是否可用 |
| onLoad | 否 | 是 | 否 |
| onShow | 否 | 是 | 否 |
| onReady | 否 | 是 | 否 |
| onHide | 否 | 是 | 否 |

可以看出小程序页面级的生命周期只能用在页面中，组件中是不支持的。

1.4.3 组件级

|-----------------|--------|--------|--------|
| 名称 | 应用是否可用 | 页面是否可用 | 组件是否可用 |
| beforeCreate | 是 | 是 | 是 |
| created | 是 | 是 | 是 |
| beforeMount | 是 | 是 | 是 |
| mounted | 是 | 是 | 是 |
| beforeUpdate | 是 | 是 | 是 |
| updated | 是 | 是 | 是 |
| activated | 仅H5 | 仅H5 | 仅H5 |
| deactivated | 仅H5 | 仅H5 | 仅H5 |
| beforeDestoryed | 是 | 是 | 是 |
| destoryed | 是 | 是 | 是 |

当然上表是不需要大家死记硬背的，大家记这样一个原则即可：

  • 应用生命周期和页面生命周期以小程序的生命期为准
  • 自定义组件生命周期以 Vue 的生命周期为准

结合 Vue3 的 setup 语法使用【应用生命周期】和【页面生命周期】需要用到 @dcloudio/uni-app 包，这个包不需要单独安装，HBuilder X 中内置已经包含，在项目代码中直接使用即可。

复制代码 
<script setup>
  // Vue 组件生命周期
  import { onMounted } from 'vue'
  // 应用/页面生命周期（小程序生命周期）
  import { onLaunch, onLoad } from '@dcloudio/uni-app'
  
  // ...
</script>
相关推荐
明月与玄武15 小时前
HarmonyOS 5 开发环境全解析：从搭建到实战
华为·harmonyos·harmonyos 5开发环境
飞露15 小时前
HarmonyOS应用开发的工程目录结构
华为·harmonyos
白羊@1 天前
鸿蒙案例---生肖抽卡
前端·javascript·华为·harmonyos
幽蓝计划1 天前
HarmonyOS NEXT开发教程：全局悬浮窗
华为·harmonyos
H.ZWei1 天前
鸿蒙应用开发—鸿蒙app一键安装脚本
python·华为·harmonyos·安装·hdc
马剑威（威哥爱编程）1 天前
鸿蒙动画与交互设计：ArkUI 3D变换与手势事件详解
华为·交互·harmonyos·arkts
SuperHeroWu72 天前
【HarmonyOS 5】鸿蒙实现手写板
华为·harmonyos·鸿蒙·画布·手写板·pan
谢道韫6662 天前
鸿蒙公共通用组件封装实战指南：从基础到进阶
华为·harmonyos
江拥羡橙2 天前
2025年，HarmonyOS认证学习及考试
学习·华为·harmonyos·鸿蒙·华为证书·harmonyos认证·华为证书考试
程序猿阿伟2 天前
《探秘鸿蒙分布式软总线：开启无感发现与零等待传输新时代》
分布式·华为·harmonyos
热门推荐
01我决定放弃搞 Java 了02RAG 实践- Ollama+RagFlow 部署本地知识库03DeepSeek各版本说明与优缺点分析04Flutter Channel 通信机制05DeepSeek RAGFlow构建本地知识库系统06如何在WPS和Word/Excel中直接使用DeepSeek功能07Windows安装vcpkg教程（VS2022）08汽车上的各种质量：整备质量、总质量、装载质量、簧上质量、簧下质量09本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程10Mogao=Seedream 3.0？霸榜数天，神秘文生图模型曝光（附技术报告）