uni-app快速入门指南

七安anananan

已于 2024-04-10 18:38:51 修改

阅读量1.6k

点赞数 41

文章标签： uni-app

于 2024-04-10 18:37:28 首次发布

本文链接：https://blog.csdn.net/2301_78435164/article/details/137600232

版权

一、快速了解uni-app

1.1、概述

uni-app是一个基于Vue.js框架的跨平台应用开发框架，可以用来开发同时运行在多个平台的应用，包括iOS、Android、Web、以及各种小程序平台（如微信小程序、支付宝小程序、百度小程等）。uni-app的特点是一套代码可以同时运行在多个平台上，开发者只需要编写一次代码，就可以生成多个平台的应。

uni-app提供了一套完整的开发工具和组件库，开发者可以使用Vue.js的语法来开发应用，且通过uni-app提供的编译工具将代码编译成各个平台所需要的原生代码，从而实现跨平台的应开发。uni-app还提供了丰富的组件库和插件，可以帮助开发者更快速地构建应用。

1.2、特点

跨更多平台

（2）、一套代码，多平台运行

（3）、运行体验好，性能高

（4）、开发生态、周边生态丰富（组件丰富）

（5）、通用技术栈，学习/开发成本低

二、uni-app基础知识及配置

2.1、基础知识

2.1.1 、开发规范

uni-app开发规范遵循以下原则：

（1）、页面文件遵循Vue单文件组件

（2）、组件标签规范类似于微信小程序规范。

（3）、接口能力（JS API）规范类似微信小程序规范，但需要将wx前缀改为uni。

（4）、数据绑定及事件处理同Vue.js规范，同时额外补充了uniapp本身的App及页面的生命周期的规范。

（5）、为了更好的兼容多端运行，建议使用Flex布局进行开发。

2.1.2、uni-app文件目录结构

2.2、基础配置

2.2.1、全局配置

全局配置主要在page.json文件里进行配置，可以配置页面路径、窗口样式、导航显示、底部tabBar的显示等等。

属性	类型	必填	描述
globalStyle	Object	否	设置默认页面的窗口表现
pages	Object Array	是	设置页面路径及窗口表现
tabBar	Object	否	设置底部 tab 的表现
condition	Object	否	启动模式配置
easycom	Object	否	组件自动引入规则
subPackages	Object Array	否	分包加载配置
uniIdRouter	Object	否	自动跳转相关配置，新增于HBuilderX 3.5.0

2.2.2、应用配置

应用配置主要在manifest.json文件里进行配置，用于指定应用的名称、图标、权限等。HBuilderX 创建的工程此文件在根目录，CLI 创建的工程此文件在 src 目录。

属性	类型	默认值	描述
name	String	无	应用名称
appid	String	新建 uni-app 项目时，DCloud 云端分配。	应用标识
description	String	无	应用描述
versionName	String	无	版本名称，例如：1.0.0。详见下方Tips说明
versionCode	Number	无	版本号，例如：36

2.2.3、页面配置

页面配置主要配置页面的样式、标题、导航栏等等，主要在page.json文件中的pages节点进行页面的配置。注：页面配置的权重高于全局配置

属性	类型	默认值	描述
path	String		配置页面路径
style	Object		配置页面窗口表现，配置项参考下方 pageStyle
needLogin	Boolean	false	是否需要登录才可访问

三、uni-app的组件

Uni-app提供了丰富的组件库，以下是其中一些常用的组件：

3.1、视图容器组件

<view>：类似于HTML中的<div>，用于包裹其他组件。
<scroll-view>：滚动视图容器，用于展示超出容器尺寸的内容，并支持纵向和横向滚动。
<swiper>：轮播组件，用于实现图片轮播效果。

3.2、基础内容组件

<text>：文本内容组件，用于显示文本内容。
<icon>：图标组件，用于显示图标。

3.3、表单组件

<input>：输入框组件，用于用户输入文本。
<textarea>：文本域组件，用于多行文本输入。
<button>：按钮组件，用于触发事件。

3.4、导航组件

<navigator>：页面跳转组件，类似于HTML中的<a>标签，用于跳转到其他页面。

3.5、多媒体组件

<image>：图片组件，用于显示图片。
<audio>：音频组件，用于播放音频文件。
<video>：视频组件，用于播放视频文件。

3.6、动画组件

<animation>：动画组件，用于实现各种动画效果。

3.7、其他组件

<picker>：选择器组件，用于从预设的选项中选择值。
<slider>：滑动选择器组件，用于在一个区间内选择值。
<progress>：进度条组件，用于显示任务进度。

四、uni.request网络请求封装

uni.request() 方法

uni.request() 方法是uni-app中用于发起网络请求的主要方法。它类似于浏览器端的XMLHttpRequest对象或者现代的fetch API。

语法：uni.request(Object object)

简单OBJECT 参数说明

参数名	类型	必填	默认值	说明
url	String	是		开发者服务器接口地址
data	Object/String/ArrayBuffer	否		请求的参数
header	Object	否		设置请求的 header，header 中不能设置 Referer
method	String	否	GET	有效值详见下方说明
timeout	Number	否	60000	超时时间，单位 ms
dataType	String	否	json	如果设为 json，会对返回的数据进行一次 JSON.parse，非 json 不会进行 JSON.parse
responseType	String	否	text	设置响应的数据类型。合法值：text、arraybuffer

示例：

uni.request({
  url: 'http://example.com/api/data',
  method: 'GET',
  data: {
    key1: 'value1',
    key2: 'value2'
  },
  success: function (res) {
    console.log('请求成功', res.data);
  },
  fail: function (err) {
    console.error('请求失败', err);
  }
});

五：数据缓存

5.1、uni.setStorage

uni.setStorage：将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

示例：

uni.setStorage({
  key: 'userInfo',
  data: {
    username: 'JohnDoe',
    email: 'john@example.com'
  },
  success: function () {
    console.log('用户信息存储成功');
  },
  fail: function (err) {
    console.error('用户信息存储失败', err);
  }
});

参数说明：

key：存储到本地缓存中的键名，用于后续获取数据时使用。

data：需要存储的数据，可以是字符串、数字、对象等，但不支持存储函数等特殊类型。

success：数据存储成功的回调函数，可选参数。

fail：数据存储失败的回调函数，可选参数。

5.2、uni.setStorageSync

uni.setStorageSync：将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

示例：

try {
  uni.setStorageSync('key', 'data'); // 将数据存储到本地缓存中
  console.log('数据存储成功');
} catch (e) {
  console.error('数据存储失败', e);
}

参数说明：

第一个参数 'key' 是存储到本地缓存中的键名，用于后续获取数据时使用。

第二个参数 'data' 是需要存储的数据，可以是字符串、数字、对象等，但不支持存储函数等特殊类型。

5.3、uni.getStorage

uni.getStorage：从本地缓存中异步获取指定 key 对应的内容。

示例：

uni.getStorage({
  key: 'key', // 本地缓存中指定的 key
  success: function (res) {
    console.log('数据获取成功', res.data);
  },
  fail: function (err) {
    console.error('数据获取失败', err);
  }
});

参数说明：

key：需要获取的数据对应的键名，用于从本地缓存中获取指定数据。

success：数据获取成功的回调函数，可选参数。回调函数的参数 res 包含了获取到的数据。

fail：数据获取失败的回调函数，可选参数。

5.4、uni.getStorageSync

uni.getStorageSync：从本地缓存中同步获取指定 key 对应的内容。

示例：

try {
  const value = uni.getStorageSync('key'); // 从本地缓存中同步获取指定 key 的数据
  if (value) {
    console.log('数据获取成功', value);
  } else {
    console.log('数据为空');
  }
} catch (e) {
  console.error('数据获取失败', e);
}

参数说明：

key：需要获取的数据对应的键名，用于从本地缓存中获取指定数据。

六、总结

uni-app是一款基于Vue.js的跨平台开发框架，其简便性和跨平台特性是其最大的优势。通过uni-app，开发者可以使用熟悉的Vue.js语法进行开发，降低了学习成本和上手难度。同时，uni-app支持一套代码同时运行在多个平台上，包括小程序、H5、App等，大大提高了开发效率和覆盖范围。uni-app提供了丰富的组件库，覆盖了常见的UI组件和功能组件，开发者可以快速搭建页面和实现功能。灵活的配置方式也使得开发者可以根据需求进行定制，提高了开发的灵活性和可定制性。鼓励读者通过进一步的学习和探索，深入了解uni-app的高级功能和应用场景，例如路由管理、状态管理、性能优化等方面，以更好地应用uni-app进行跨平台应用的开发。

以上就是小编对uni-app基础知识的编写，谢谢观看！