uni-app 心得体会

2301_78466479

已于 2024-06-04 20:50:55 修改

阅读量982

点赞数 32

文章标签： vue.js 前端

于 2024-06-01 18:50:40 首次发布

本文链接：https://blog.csdn.net/2301_78466479/article/details/139376856

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、uni-app是什么
二、内容
- 1、uni-app环境搭建
- 2、uni-app项目运行
总结

前言

不知不觉来到了大二下学期，这学期里我们学习了新的知识，更进一步的面向未来的工作方面。uni-app便是我们这学期学的，它主要用于小程序开发，而且由于uni-app基于Vue.js开发，它的性能较好，拥有更高效的数据绑定、组件渲染、事件处理等特点。下面就简单讲讲关于uni-app的内容。

一、uni-app是什么？

uni-app 是一个使用 Vue.js 开发的所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/淘宝）、快应用等多个平台。而且uni-app作为一个使用Vue.js开发跨平台应用的前端框架，具备“编写一次代码可发布到多个平台”的特点，节省了开发成本，提升了开发的效率。

二、内容

1.uni-app环境搭建

环境搭建步骤：

一、下载HBuilderX

1、打开浏览器，查询uni-app官方网站。

2、在网站找到下载的相关链接，点击进入HBuilder X的下载页面。

3、根据操作系统（Windows、MacOS等)，选择对应的下载版本。

二、安装HBuilderX

1、下载完成后，找到下载的HBuilderX安装包。

2、双击安装包，开始安装。

3、安装完成。

二、下载安装微信开发者工具

要使用uni-app开发，需要打开微信小程序开发者工具的服务端口，进行微信小程序开发者工具，选择"设置"-->"安全设置"命令，将"服务端口"改完打开状态。

三、打开HBuilderX工具，选择【工具】-->【设置】-->【运行设置】，在微信开发者工具路径输入框中填入微信开发者工具的安装路径。

四、搭建完成

2.uni-app项目运行

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

二、命名，选择模板，点击创建。

三、项目创建完成之后即可运行，选择“运行”-->"运行到浏览器“命令，选择浏览器，即可在浏览器中看到运行效果。

3.知识点

一、基础配置

1、全局配置

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

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

2、应用配置

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

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

3、页面配置

属性	类型	默认值	描述
path	String	无	配置页面的路径
style	Object	无	配置页面的窗口表现（样式）

二、内置组件

外部资源的引入

1、本地图片或视频的引入

绝对路径,需提供完整的 URL 地址，包括协议、域名和资源路径。

例如：<image src="https://example.com/images/image.jpg">
相对路径，需提供相对于当前文件的路径

例如：<image src="../../static/images/image.jpg">

2、js文件的引入

例如：import "../../common/js/index.js" 具体相对路径请根据实际文件夹情况来设置

3、css文件的引入

@import "@/styles/common.css" 具体相对路径请根据实际文件夹情况来设置

组件信息

属性	描述
view	类似于h5里面的div标签，用于包裹各种元素内容，是页面最常用的标签
scroll-view	(可视滚动区域)用于区域滚动，使用非常广泛，如内容溢出时滚动显示内容、横向滚动、纵向滚动、支持下拉刷新、上拉加载等
swiper	滑块视图容器。一般用于左右滑动或上下滑动，比如banner轮播图
text	类似于h5里面的span标签，文本组件，用于包裹文本内容；text组件不支持嵌套其它组件或自定义组件，否则会引发在不同平台的渲染差异
button	uni-app的button组件的功能性非常强大，可以实现获取用户信息、获取手机号码、分享等功能。

页面样式

uni-app尺寸单位

在 uni-app 中，可以使用以下几种尺寸单位来定义页面元素的大小：

1、px : 像素（Pixel）是最常见的尺寸单位，表示固定大小的像素值。在 uni-app 中，1px 相当于设备上的一个物理像素。

2、rpx : rpx（Responsive Pixel）是相对长度单位，可以根据屏幕宽度进行自适应缩放。在不同密度的屏幕上，1rpx 会被转换成不同的物理像素数，保证在不同屏幕下的显示效果一致。通常在 uni-app中推荐使用rpx来定义长度单位，特别是用于移动端小程序和 App 的开发。

3、百分比（%）: 百分比是相对长度单位，基于父元素的大小来定义元素的大小。可以使用百分比来实现响应式布局，让页面元素根据父元素的大小进行自适应调整。