Uniapp学习笔记

kunge1v5

已于 2025-06-09 08:19:22 修改

阅读量896

点赞数 9

分类专栏：笔记文章标签：前端编辑器 vue.js

于 2025-06-08 20:50:58 首次发布

本文链接：https://blog.youkuaiyun.com/kunge1v5/article/details/148517071

版权

笔记专栏收录该内容

3 篇文章

订阅专栏

在这里插入图片描述
我发现b站上只有一个小虾米讲Uniapp的视频，我这分享笔记也是让大家更容易入门Uniapp
下面是我看小虾米的Uniapp视频的笔记
Uniapp小虾米B站视频

Uniapp学习文档

学习Uniapp资料就一个官方文档就够了
uni-app快速上手 | uni-app官网
在这里插入图片描述

HBuilder编辑器(专门写Uniapp代码的)

HBuilderX下载步骤
下载和安装就跟着官方文档的就行
![[Uniapp/img/Pasted image 20250608172414.png]]

Uniapp模拟运行程序

运行->选择在哪个上面运行(第一次运行需要配置运行路径)
![[Uniapp/img/Pasted image 20250415170925.png]]

工具->设置->配置在哪里运行的路径
![[Uniapp/img/Pasted image 20250415171125.png]]

新建页面

右击pages文件夹->新建页面
在这里插入图片描述
跟着图片来😁

点击下面图片的红圈那里就可以运行

加粗样式新增页面的配置在pages.json文件里配置

view.“class名”跟vue的div."class名"效果一样的

![[Uniapp/img/Pasted image 20250415205715.png]]
下面是动态class的写法
在这里插入图片描述

新建页面模版

下面图右边的绿色√是新建页面的模版，可以自定义模版
点击自定义模版->选择自己定义好的模版文件->编辑你认为的模版代码
在这里插入图片描述

这是成功的效果

uniapp的生命周期

onLoad -> onShow > onReady
生命周期

生命周期	调用次数	触发时机	适用场景
onLoad	一次	页面加载时	参数读取，初始化数据
onShow	多次	页面显示时	页面激活后刷新或重新加载数据
onReady	一次	页面初次完全渲染后	DOM操作、动画、第三方组件初始化

vue模块自动导入插件

优点：不用手动导入，避免一些没有导入就报错
自动导入

页面跳转到tabar

在这里插入图片描述

Ui页面设计软件

设计ui界面的软件
即时设计
在这里插入图片描述

项目文件和文件夹的作用

在这里插入图片描述

长度单位

单位	所属平台	屏幕单位	如何换算	优势	适用场景
rpx	移动端（如 UniApp、小程序）	响应式像素单位	在设计稿是 750rpx 的情况下，页面宽度对应设备屏幕宽度。	✅ 自动根据屏幕宽度适配，保持视觉一致； ✅ 无需多次适配，方便移动端统一设计	移动端自适应布局，比如按钮、字体、容器大小等
px	PC 端网页	物理像素单位	每个 CSS px 对应一个屏幕像素点（受设备DPI影响），在移动端显示与屏幕密度相关	✅ 定位精确，适合对布局尺寸要求严格的场景； ✅ 浏览器兼容性好	PC 端页面、图标、精确布局、第三方组件

css:多的内容在一行显示不了，显示省略号

	overflow: hidden;//多的隐藏
	white-space: nowrap;//内容显示在一行
	text-overflow: ellipsis;//多的内容显示省略号

App项目的搭建

请求的处理

一般请求放在api文件夹下，uni.request需要配置一下，如下图
在这里插入图片描述

请求的格式

export const 方法名 =()=>{
	return reques({
		url，
		method,
		data
	})
}

注意：接收页面上的参数，联网取数据，更新data，在onLoad时机

下拉加载

用别人写好的插件
z-paging的官方文档
在这里插入图片描述

uniapp的z-paging插件
在这里插入图片描述
还可以加加载动画😁

微信小程序下载图片

开发微信小程序，将图片下载到相册的方法，saveImageToPhotosAlbum怎么用_微信小程序下载图片-优快云博客

打包

打包过程就直接跟着视频一步一步就行了

uniCloud自定义配置网站域名

uniCloud服务空间前端网页托管绑定自定义配置网站域名_unicloud的前端网页托管配置网址域名-优快云博客
结尾：
👉uniapp入门了可以自己做个项目巩固一下，会让自己学得更好哟😏

如果你在阅读过程中也有新的见解，或者遇到类似问题，🥰不妨留言分享你的经验，让大家一起学习。