uni-app 开发入门

一、什么是 uni-app？

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。开发者编写一套代码，可发布到 iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台，几乎覆盖所有流量平台。

二、环境搭建

1. 开发工具

在开始开发之前，你需要确保已经安装了：

• HBuilderX：这是官方推荐的 IDE，提供了代码提示、项目模板、插件市场等功能。
• Node.js：uni-app 的编译过程依赖于 Node.js 环境。
• 微信开发者工具：如果你需要编译到微信小程序，这个工具是必须的。
• WebStrome：基于 JetBrains 编写的前端开发 IDE，相对于 HBuilderX 有更多的智能提示，可选。

HBuilderX 是通用的前端开发工具，但为 uni-app 做了特别强化。

建议下载App开发版，可开箱即用；如使用cli方式创建项目，可下载标准版。

2. 创建 uni-app 项目

打开 HBuilderX，点击工具栏里的文件 -> 新建 -> 项目：

• 选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建 uni-app。

3. 运行 uni-app 项目

• 浏览器运行：进入项目，点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器，即可在浏览器里面体验uni-app 的 H5 版。

• 真机运行：连接手机，开启USB调试，进入项目，点击工具栏的运行 -> 真机运行 -> 选择运行的设备，即可在该设备上体验uni-app。

• 小程序运行：进入项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。

三、uni-app 开发

1. 框架结构

uni-app 采用了 Vue.js 语法规范，同时补充了App及页面的生命周期。

• pages: 业务页面文件存放的目录

• static: 存放应用引用静态资源（如图片、视频等）的地方，static 目录下的文件不会被编译

• App.vue: 应用配置，用来配置App全局样式以及监听、应用生命周期

• main.js: Vue初始化入口文件

• manifest.json: 配置应用名称、appid、logo、版本等打包信息。

• pages.json: 配置页面路由、导航条、选项卡等页面类信息。

在开发之前，你需要在 manifest.json 填入你的 appid。

2. 页面结构

uni-app 页面文件遵循 Vue 单文件组件 (SFC) 规范，每个 .vue 文件包含三个部分：

<template>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
			
		},
	}
</script>

<style>
</style>

• template: 模板，用 HTML 语法描述页面的结构

• script: 脚本，用 JavaScript 编写页面的业务逻辑

• style: 样式，用 CSS 语法描述页面的样式

3. 独有拓展内容

有关 Vue 的部分，此处不再赘述，下面介绍 uni-app 独有的内容。

a. 视图容器

view: 类似于 HTML 中的 div 标签，是视图层的基本组成单元。

<view>
  <text>Hello, Uni-app!</text>
</view>

scroll-view: 可滚动视图区域，常用于展示长列表或内容超过屏幕范围的情况。

<template>
  <scroll-view style="height: 300rpx;">
    <view v-for="item in items" :key="item.id">{{ item.text }}</view>
  </scroll-view>
</template>

swiper: 轮播图组件，常用于展示图片或广告等内容。

<template>
  <view>
    <!-- indicator-dots 显示指示点，autoplay 自动播放，interval 间隔时间 -->
    <uni-swiper :indicator-dots="true" :autoplay="true" :interval="3000">
      <uni-swiper-item>
        <image src="https://example.com/image1.jpg"></image>
      </uni-swiper-item>
      <uni-swiper-item>
        <image src="https://example.com/image2.jpg"></image>
      </uni-swiper-item>
      <uni-swiper-item>
        <image src="https://example.com/image3.jpg"></image>
      </uni-swiper-item>
    </uni-swiper>
  </view>
</template>

b. 基础内容

text: 用于显示文本，支持丰富的文本样式设置。

<template>
  <view>
    <!-- text 组件不可被点击 -->
    <text>{{ message }}</text>
    
    <!-- 使用 <view> 组件显示可点击文本 -->
    <view @click="handleClick">{{ clickableText }}</view>
  </view>
</template>

rich-text: 用于显示富文本内容，支持 HTML 标签渲染。

<template>
  <view>
    <!-- 使用 <rich-text> 组件显示富文本内容 -->
    <rich-text :nodes="richTextContent"></rich-text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      richTextContent: '<div style="color: red;">This is <b>rich text</b> content.</div>'
    };
  }
}
</script>

image: 用于显示图片，支持设置图片路径、模式、裁剪等属性。

<template>
  <view>
    <!-- 显示本地图片 -->
    <image src="/static/logo.png"></image>
    
    <!-- 显示远程图片 -->
    <image src="https://example.com/image.jpg"></image>
  </view>
</template>

uni-icons: 用于显示图标，支持使用 iconfont 图标库。

<template>
  <view>
    <!-- 使用 <uni-icons> 组件显示图标 -->
    <uni-icons type="star" size="24" color="#f90"></uni-icons>
  </view>
</template>

progress: 进度条组件，用于展示任务进度

<template>
  <view>
    <!-- 使用 <uni-progress> 组件显示进度条 -->
    <uni-progress :percent="progressPercent" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      progressPercent: 50
    };
  }
}
</script>

c. 表单组件

picker: 选择器组件，支持日期选择、时间选择、地区选择等。

<template>
  <view>
    <picker mode="date" start="2022-01-01" end="2024-12-31" @change="handleChange">
      <view>{{ selectedDate }}</view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: ''
    };
  },
  methods: {
    handleChange(event) {
      this.selectedDate = event.mp.detail.value;
      uni.showToast({
        title: '已选择日期：' + this.selectedDate,
        icon: 'none'
      });
    }
  }
}
</script>

switch: 开关组件，用于切换状态。

<template>
  <view>
    <switch v-model="switchValue" @change="handleChange" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      switchValue: false
    };
  },
  methods: {
    handleChange(value) {
      uni.showToast({
        title: '开关状态：' + value,
        icon: 'none'
      });
    }
  }
}
</script>

d. 导航

navigator: 页面链接组件，用于跳转到其他页面。

<template>
  <view>
    <navigator url="/pages/otherPage">跳转到其他页面</navigator>
  </view>
</template>

tabbar: 底部选项卡导航，常用于切换不同的页面模块。

<template>
  <view>
    <tabbar>
      <tabbar-item icon="home" text="首页" url="/pages/home"></tabbar-item>
      <tabbar-item icon="list" text="列表" url="/pages/list"></tabbar-item>
      <tabbar-item icon="user" text="我的" url="/pages/my"></tabbar-item>
    </tabbar>
  </view>
</template>

navigation-bar: 自定义导航栏，用于定制导航栏样式和功能。

<template>
  <view>
    <navigation-bar title="自定义标题" background="#fff" color="#000" />
  </view>
</template>

e. 媒体组件

video: 视频播放组件，支持播放网络视频或本地视频。

audio: 音频播放组件，支持播放网络音频或本地音频。

camera: 摄像头组件，用于拍摄照片或视频。

live-player: 直播播放器组件，用于播放直播流。

f. 地图

map: 地图组件，支持显示地图、标记点、路线等功能。

g. 画布

canvas: 画布组件，用于绘制图形、图像等内容。

h. 开放能力

open-data: 用于展示微信开放数据，如用户信息、微信运动步数等。

web-view: 用于嵌入网页视图，支持加载外部网页。

四、总结

uni-app 提供的丰富组件极大地简化了跨平台应用开发流程，开发者可以根据项目需求选择合适的组件进行开发，并通过组件的属性、事件等进行定制化配置。

以上只是一些常用组件的介绍，更多组件信息请参考 uni-app 官方文档。