uni-app学习方法及心得体会

2021计算机应用技术3班卿雯丽

已于 2023-06-18 16:35:51 修改

阅读量241

点赞数 1

文章标签： uni-app 学习方法

于 2023-06-18 16:02:20 首次发布

本文链接：https://blog.csdn.net/qq_67727684/article/details/131271753

版权

uni-app是一款由北京华三科技开发的基于UML建模语言的可视化建模工具。在uni-app中，用户可以通过拖拉拽的方式来构建自己所需要的系统，快速方便。同时还支持C#语言编程，更符合现在教育行业的发展需求。通过本文对uni-app学习方法和心得的介绍。

一、引言

uni-app支持多种数据表类型，可以更好地进行数据录入和数据显示。uni-app还可以与其他软件进行交互，例如与其他软件进行协同开发等。通过uni-app不仅能够提高工作效率，还能更好地满足用户需求。

二、需求分析

uni-app在需求分析中主要从用户的角度出发，了解用户的需求。对于同一个用户，在不同时期也会有不同的需求。例如学生对于学习资料的需求，在上学时期，可能是想要学习知识，提高成绩，在毕业后就需要购买学习资料了。因此我们需要根据这些情况来进行分析。同时，当我们对用户进行了解后，就可以和他们交流，获取他们想要的信息，最后经过对这些信息的整理和分析，就可以得出需求了。

在uni-app中还会提供一些图表来帮助我们分析用户需求。例如流程图，用例图等。

选择uni-app的原因：

1、开发者/案例数量更多

2、跨平台能力及扩展灵活性更强

3、性能体验优秀

4、周边生态丰富

5、学习成本低

6、开发成本低

三、流程设计

用户登录后，可以创建自己的课程表，创建课程表

需要有学生的信息，点击创建按钮。点击创建按钮后，会弹出一个创建界面，用户需要填写相关信息。如果学生想要退出自己的课程表，可以点击取消按钮。在这里学生需要输入自己的密码，如果忘记密码可以点击忘记密码。

用户填写完信息后，点击确认按钮。此时会弹出一个登录框，用户需要输入自己的密码并确认登录后才能进入自己的课程表页面。

在这里我们要注意的是系统默认设置学生的密码为空，如果学生需要修改自己的密码，可以在系统设置页面点击修改密码按钮进行修改。我们可以利用 python脚本对其进行编写，然后在uni-app中进行调用。

在uni-app中通过 python脚本编写代码后，会自动保存在本地硬盘中，我们需要在本地硬盘中新建一个文件夹将其保存下来。

学习uni-app前要进行开发软件下载

下载HBuilderX

HBuilderX官网下载地址：HBuilderX-高效极客技巧

选择对应的版本下载即可：

选择正式版，可以下载Windows版和Mac OS版，其各有两个版本，分别是标准版和APP开发版。其中，标准版可直接用于Web开发、MarkDown、字处理场景、小程序等。如果开发App.则需要手动安装插件。App开发版预置开发App所需的插件，开箱即用。如果只是开发小程序和H5，则安装标准版即可。这里下载的是App开发版。

HBuilder X下载完成后即可安装，Windows版和Mac OS版的安装都很简单，按提示操作即可。

四、接口设计

在进行接口设计时，首先要清楚什么是接口，接口的定义和使用范围。接口是为了实现需求而提供的一组方法和属性，在需求分析阶段，我们就需要设计出接口的定义，在本项目中，我们采用的是 UML中的类图来进行接口设计。

在进行接口设计时，首先要考虑清楚如何调用这个类中的方法和属性。本项目中我们使用到了 JSON来定义方法和属性。JSON是一种由 JavaScript语言定义的数据结构，它是一种用于在网页中传递信息的方式，它包含了许多语法结构。如果没有被使用的话，那么就不能使用 JSON来进行接口设计。

创建项目

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

第二步：选择

uni-app

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

最后：项目创建完成之后即可运行，打开项目的任意文件，如App.vue，选择“运行”-->"运行到浏览器“命令，选择浏览器，即可在浏览器中体验uni-app的H5版。

页面跳转

uni-app页面路由由框架统一管理，开发者需要在pages.json文件中配置每个页面路由的路径。uni-app有两种页面路由的跳转方式，即使用navigator组件跳转和API跳转。

<template>
	<view>
		<view class="page-body">
			<view class="btn-area">
				<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
					<button type="default">跳转到新页面</button>
				</navigator>
				<navigator url="redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">
					<button type="default">在当前页打开</button>
				</navigator>
				<navigator url="/pages/tabBar/extUI/extUI" open-type="switchTab" hover-class="other-navigator-hover">
					<button type="default">跳转tab页面</button>
				</navigator>
			</view>
		</view>
	</view>
</template>
<script>
// navigate.vue页面接受参数
export default {
	onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
		console.log(option.id); //打印出上个页面传递的参数。
		console.log(option.name); //打印出上个页面传递的参数。
	}
}
</script>

API路由跳转

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

示例：

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
	url: 'test?id=1&name=uniapp'
});

// 在test.vue页面接受参数
export default {
	onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
		console.log(option.id); //打印出上个页面传递的参数。
		console.log(option.name); //打印出上个页面传递的参数。
	}
}

// 在起始页面跳转到test.vue页面，并监听test.vue发送过来的事件数据
uni.navigateTo({
  url: 'pages/test?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' })
  }
})

// 在test.vue页面，向起始页通过事件传递数据
onLoad: function(option) {
  const eventChannel = this.getOpenerEventChannel();
  eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from test page'});
  eventChannel.emit('someEvent', {data: 'data from test page for someEvent'});
  // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on('acceptDataFromOpenerPage', function(data) {
    console.log(data)
  })
}

url有长度限制，太长的字符串会传递失败，可改用窗体通信、全局变量，另外参数中出现空格等特殊字符时需要对参数进行编码，如下为使用encodeURIComponent对参数进行编码的示例。

<navigator :url="'/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>

// 在test.vue页面接受参数
onLoad: function (option) {
	const item = JSON.parse(decodeURIComponent(option.item));
}

注意：

页面跳转路径有层级限制，不能无限制跳转新页面
跳转到 tabBar 页面只能使用 switchTab 跳转
路由API的目标页面必须是在pages.json里注册的vue页面。如果想打开web url，在App平台可以使用 plus.runtime.openURL或web-view组件；H5平台使用 window.open；小程序平台使用web-view组件（url需在小程序的联网白名单中）。在hello uni-app中有个组件ulink.vue已对多端进行封装，可参考。

参数的传递和接收

传递参数：

例如：在起始页面跳转到pages/news/index.vue页面并传递参数

uni.navigateTo({

url:'pages/news/index?id=1&title=新闻动态'

})

需要注意的是，url是有长度限制的，太长的字符串会传递失败，可以使用encodeURIComponent解决，代码示例如下：

uni.navigateTo({

url:"/pages/news/index?id=1&title="+encodeURIComponent('新闻动态')+""

})

接收参数：

例如：在pages/news/index.vue页面接受参数

onLoad(opts){//opts为object类型，会序列化上个页面传递的参数。

console.log(opts.id); //打印出上个页面传递的参数，值为1。

console.log(opts.title); //打印出上个页面传递的参数，值为新闻动态。

}

如果传递参数使用到了encodeURIComponent，则按照以下方法接收参数：

//在pages/news/index.vue页面接受参数

onLoad(opts){//opts为object类型，会序列化上个页面传递的参数。

console.log(decodeURIComponent(opts.title)); //打印出上个页面传递的参数，值为新闻动态。

}

uni-app常用API

API概述

uni-app的 js API 由标准 ECMAScript 的 js API 和 uni 扩展 API 这两部分组成。

标准 ECMAScript 的 js 仅是最基础的 js。浏览器基于它扩展了 window、document、navigator 等对象。小程序也基于标准 js 扩展了各种 wx.xx、my.xx、swan.xx 的 API。node 也扩展了 fs 等模块。

uni-app 基于 ECMAScript 扩展了 uni 对象，并且 API 命名与小程序保持兼容。

request发起请求

uni.request发起网络请求相当于之前vue里面的axios用于获取服务器端接口数据。

示例：

uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

var requestTask = uni.request({
	url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
	complete: ()=> {}
});
requestTask.abort();

const requestTask = uni.request({
	url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
	data: {
        name: 'name',
        age: 18
	},
	success: function(res) {
		console.log(res.data);
	}
});

// 中断请求任务
requestTask.abort();

uni.configMTLS({
    certificates: [{
        'host': 'www.test.com',
        'client': '/static/client.p12',
        'clientPassword': '123456789',
        'server': ['/static/server.cer'],
    }],
    success ({code}) {}
});

uploadFile文件上传

将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data。

如页面通过 uni.chooseImage 等接口获取到一个本地资源的临时文件路径后，可通过此接口将本地资源上传到指定服务器。

示例：

uni.chooseImage({
	success: (chooseImageRes) => {
		const tempFilePaths = chooseImageRes.tempFilePaths;
		uni.uploadFile({
			url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
			filePath: tempFilePaths[0],
			name: 'file',
			formData: {
				'user': 'test'
			},
			success: (uploadFileRes) => {
				console.log(uploadFileRes.data);
			}
		});
	}
});

var uploadTask = uni.uploadFile({
	url: 'https://www.example.com/upload', //仅为示例，并非真实接口地址。
	complete: ()=> {}
});
uploadTask.abort();

uni.chooseImage({
	success: (chooseImageRes) => {
		const tempFilePaths = chooseImageRes.tempFilePaths;
		const uploadTask = uni.uploadFile({
			url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
			filePath: tempFilePaths[0],
			name: 'file',
			formData: {
				'user': 'test'
			},
			success: (uploadFileRes) => {
				console.log(uploadFileRes.data);
			}
		});

		uploadTask.onProgressUpdate((res) => {
			console.log('上传进度' + res.progress);
			console.log('已经上传的数据长度' + res.totalBytesSent);
			console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);

			// 测试条件，取消上传任务。
			if (res.progress > 50) {
				uploadTask.abort();
			}
		});
	}
});

uni.downloadFile({
	url: 'https://www.example.com/file/test', //仅为示例，并非真实的资源
	success: (res) => {
		if (res.statusCode === 200) {
			console.log('下载成功');
		}
	}
});

如果希望返回一个 downloadTask 对象，需要至少传入 success / fail / complete 参数中的一个。例如：

var downloadTask = uni.downloadFile({
	url: 'https://www.example.com/file/test', //仅为示例，并非真实接口地址。
	complete: ()=> {}
});
downloadTask.abort();

const downloadTask = uni.downloadFile({
	url: 'http://www.example.com/file/test', //仅为示例，并非真实的资源
	success: (res) => {
		if (res.statusCode === 200) {
			console.log('下载成功');
		}
	}
});

downloadTask.onProgressUpdate((res) => {
	console.log('下载进度' + res.progress);
	console.log('已经下载的数据长度' + res.totalBytesWritten);
	console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);

	// 满足测试条件，取消下载任务。
	if (res.progress > 50) {
		downloadTask.abort();
	}
});

数据缓存

数据缓存可以将数据存储到本地缓存中，实现长期保存数据的功能，在uni-app中，分为2种存储方式：异步存储和同步存储，在实际开发中，经常用于保存会员登录状态信息、购物车数据、历史记录等场景。

交互反馈

交互反馈包括信息提示框、loading提示框、模态弹窗、操作菜单，这些都是在开发中常用的功能。

五、模块设计

模块设计主要是将系统中的各个功能进行分类，使其具有独立性和完整性，然后将这些功能进行合理的组织，形成一个可以被使用的模块。模块设计一般会使用 UML建模语言对各个模块进行描述，然后使用 UML中的图对其进行表示。图中包含了系统的所有功能模块，包括用户管理模块，系统设置模块和系统维护模块等。图中的功能流程图表示了每个功能在整个系统中的作用和实现方式。用户管理模块包括了用户登录，修改密码等操作；权限管理功能包括了管理员对系统权限的分配和修改；资源管理模块包括了资源的创建，删除等操作；系统设置部分主要是对一些参数进行设置；系统维护部分主要是对系统进行重启、更新等操作。

六、系统设计

系统设计主要包括需求分析，模块设计，接口设计和系统设计。在整个系统设计中，需求分析是第一步，主要包括功能分析和性能分析。功能分析主要是从用户的角度出发，确定出用户需要什么功能；性能分析主要是从服务器的角度出发，确定服务器需要什么功能；接口设计主要是从服务器和客户端的角度出发，确定客户端需要什么功能；系统设计主要是从系统的角度出发，确定系统需要实现什么功能。在整个系统设计中，如果出现一个需求变更，就需要对系统进行修改或者重新开发。

在学习过程中，对于系统的了解并不是很全面。而uni-app作为一个基于 UML的可视化建模工具，对于学习来说更加方便。同时通过使用uni-app搭建出的系统模型更加直观形象，更加容易理解和掌握。所以在学习过程中，要不断总结和梳理自己的知识体系，然后通过实际项目来巩固自己所学的知识。

七、综上总结

在uni-app的学习过程中，对于很多的问题我们都需要去做一个全面的了解，我们不能只看一两个功能就去学习uni-app，这样可能会让我们在以后的学习过程中出现遗漏。只有把整个系统都学习完，才能保证我们不会遗漏任何一个知识点，从而让我们在以后的工作中得心应手。

uni-app不仅是一个软件，它更像是一种理念，是一种工具，它不只是在技术方面帮助我们搭建起一个框架。我们不能仅仅依靠它来搭建自己的项目，要学会运用它来解决问题。uni-app只是一种工具，而不是万能的。在学习uni-app时，要注意知识之间的联系与区别。只有在掌握了uni-app之后才能把它运用到实际工作中去。

uni-app虽然很好，但是在学习时也要注意一定的方法和技巧，这样才能让自己的学习更加有效果。这篇文章我并没有很好的总结出uni-app的一些要点，可能也并没有将其全部写出来。但是我希望通过这篇文章让大家了解uni-app这款软件，了解它背后所蕴含的原理，同时也希望大家能在学习时有一定的方法和技巧。

2021计算机应用技术3班卿雯丽

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
uni-app学习方法及心得体会

uni-app不仅是一个软件，它更像是一种理念，是一种工具，它不只是在技术方面帮助我们搭建起一个框架。我们不能仅仅依靠它来搭建自己的项目，要学会运用它来解决问题。uni-app只是一种工具，而不是万能的。在学习uni-app时，要注意知识之间的联系与区别。只有在掌握了uni-app之后才能把它运用到实际工作中去。
复制链接

扫一扫