uniapp入门（一）-基本概念与常用组件

一套代码，运行到多个平台

基础概念

• 什么是uni-app
• 快速上手
• 如何学习uniapp

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

编辑器：HBuilderX-高效极客技巧

---

基础工程目录

详细见工程简介 | uni-app官网

┌─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源都应存放于此目录
├─uni_modules           存放uni_module
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─pages.json            配置页面路由、导航条、选项卡等页面类信息
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
└─uni.scss              内置的常用样式变量

很方便的内置浏览器开发方式（以内置浏览器方式运行）

常用小程序开发者工具

微信开发者工具

抖音开发者工具

vue文件结构

一个典型的 .vue 文件由三个部分组成：

• 模板（Template）： 模板是组件的 HTML 部分，它定义了组件的结构和布局。模板中的标记可以包含数据绑定和指令，使得 HTML 能够与 Vue 实例的数据和方法交互。

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="reverseMessage">Reverse Message</button>
  </div>
</template>

---

• 脚本（Script）： 脚本是组件的 JavaScript 部分，它允许开发者定义组件的行为。在这里，你可以使用 Vue 的 API 来创建数据属性、计算属性、方法、生命周期钩子等。

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('');
    }
  }
};
</script>

• 样式（Style）： 样式是组件的 CSS 部分，它定义了组件的外观。样式可以是普通的 CSS，也可以使用预处理器（如 SCSS、LESS）或 CSS 框架（如 Bootstrap）。在 .vue 文件中，样式默认是作用域于当前组件的，这意味着样式不会泄露到组件外部。

<style scoped>
h1 {
  color: blue;
}
button {
  margin-top: 20px;
}
</style>

页面路由pages.json

• 第一个页面：

  • 路径：pages/index/index
  • 导航栏标题：uni-app

• 第二个页面：

  • 路径：pages/main/main
  • 导航栏标题：main

运行演示效果：

uni-app常用组件

view元素内容

类似于传统html中的div，用于包裹各种元素内容。

常用属性名	说明
hover-class	按下样式

scroll-view区域滚动

可滚动视图区域。用于区域滚动。

常用属性名	说明
scroll-x	横向滑动 横向滑动样式： 1.父级元素样式不换行：white-space: nowrap; 2.子元素行级块元素：display: inline-block;
scroll-y	纵向滑动

swiper轮播图

一般用于左右滑动或上下滑动，比如banner轮播图。

常用属性名	说明
indicator-dots	是否显示面板指示点
indicator-color	指示点颜色
indicator-active-color	当前选中的指示点颜色
circular	是否采用衔接滑动，即播放到末尾后重新回到开头
autoplay	是否自动切换
interval	自动切换时间间隔
vertical	滑动方向是否为纵向

text文本内容

文本组件。用于包裹文本内容。

常用属性名	说明
selectable	文本是否可复制
space	空格展示调整

image图片组件

一般放在项目static文件夹中。

常用属性名	说明
src	图片资源地址
mode	图片裁剪、缩放的模式 aspectFill：常用方式，保持纵横比缩放图片，只保证图片的短边能完全显示出来 widthFix：宽度不变，高度自动变化，保持原图宽高比不变

navigator页面跳转

常用属性名	说明
url	应用内的跳转链接，值为相对路径或绝对路径，如："../first/first"，"/pages/first/first"，注意不能加 .vue 后缀！！！
open-type	跳转方式 navigateTo：默认，保留当前页面，跳转到应用内的某个页面 reLaunch：关闭所有页面，打开到应用内的某个页面，注意这种方式无法返回原有页面 redirectTo：关闭当前页面，跳转到应用内的某个页面
target	实现小程序间的跳转

button按钮

常用属性名	说明
size	按钮的大小
type	按钮的样式类型
plain	按钮是否镂空，背景色透明
disabled	是否禁用

input输入框

常用属性名	说明
value	输入框的初始内容
type	input 的类型 有效值 text：文本输入键盘 number：数字输入键盘 digit：带小数点的数字键盘 tel：电话输入键盘
placeholder	输入框为空时占位符，一般提示文字使用
placeholder-style	指定 placeholder 的样式
password	是否是密码类型
disabled	是否禁用，无法输入
maxlength	最大输入长度，设置为 -1 的时候不限制最大长度，最好做好限制
confirm-type	设置键盘右下角按钮的文字，仅在 type="text" 时生效。有效值，注意仅小程序生效