当前位置： 首页 > news >正文

Uni-App-01

news 2026/2/8 17:20:14

在这里插入图片描述

HBuilder安装卸载

安装

官网地址：https://www.dcloud.io/hbuilderx.html

  1. 下载HBuilder最新版

    在这里插入图片描述

  2. 解压到安装目录，路径中不要有中文和空格

    在这里插入图片描述

  3. 在桌面上增加快捷方式

    在这里插入图片描述

卸载

  1. 执行reset.bat

    在这里插入图片描述

  2. 删除HBuilder文件夹（如果提示文件被占用，杀死相关进程再删除）

    在这里插入图片描述

夜神模拟器安装

安装

  1. 下载夜神模拟器

    网址：https://www.yeshen.com/

    在这里插入图片描述

  2. 安装夜神模拟器

    双击运行安装，目录中不要有中文和空格

    在这里插入图片描述

移动端应用开发方式分类

移动端开发

技术实现机制优势
1NativeApp原生App原生App，Android使用Java，IOS使用OC编写的直接运行操作系统中的App可以直接调用底层系统接口、性能高开发复杂，成本高
2H5使用HTML/CSS/JS编写的网页，部署在服务器上，客户端使用手机中的浏览器/内嵌浏览器来浏览编写简单，兼容性好，便于分享运行性能低，功能有限，用户使用粘性低
3WebApp使用HTML/CSS/JS编写的网页，打包安装到用户的手机中，使用内置的WebView组件来浏览编写简单，兼容性好，用户使用粘性高运行性能低，功能有限
4HybridApp混合/混编App,使用HTML/CSS/JS + Nativ.js+Java/OC编写的App，打包安装到用户的手机中运行性能比较高，功能丰富，开发方式灵活如果项目中需要的原生代码较多时，开发反倒更复杂
5各类小程序运行于专有App平台的小型App(<2MB)“无需安装”，点开即用不跨平台
6华为鸿蒙AppArkUI平台，ArkTS语言，专用于鸿蒙系统，有自己专有的解释运行平台性能高，功能丰富只用于鸿蒙系统
7Flutter App2019年Google开发的新技术，直接在GPU绘图芯片上绘图，使用Dart语言性能高，兼容性高用户和案例偏少，“未来可期”

H5：

  1. HTML5的简称
  2. 使用HTML5、CSS、JS开发的基于网页的应用程序，优势在于快速开发、上线、分享、迭代

不同前端框架可以开发哪些移动端应用程序？

  1. Vue.js: PC网站、H5站、WebApp
  2. uni-app: PC网站、H5站、WebApp、各类小程序
  3. React: PC网站、H5站、WebApp、NativeAPP

Uni-App概述

官网：https://dcloud.io

Uni-App是什么

在这里插入图片描述

Uni-App功能框架图

​ 在这里插入图片描述

案例1

​ 创建一个示例项目，在浏览器中运行 - 即uni-app编译为H5网站

  1. 创建项目

    在这里插入图片描述

  2. 配置项目

    在这里插入图片描述

  3. 创建项目

    在这里插入图片描述

  4. 打开pages/index/index.vue

    在这里插入图片描述

  5. 运行项目到浏览器

    在这里插入图片描述

  6. 等待下载插件

    HBuilder采用插件模式，工作时自动下载安装所需插件

  7. 等待编译后自动打开浏览器访问页面(如果没有自动打开手动访问控制台提示的地址)
    在这里插入图片描述

  8. 通过HBuilder内置浏览器打开页面(可能会需要下载内置浏览器插件)在这里插入图片描述

    在这里插入图片描述

案例2

创建一个示例项目，在安卓手机中调试运行 - 即uni-app编译为WebApp

  1. 安装运行Android模拟器(夜神\雷电\逍遥等都可以)

    在这里插入图片描述

  2. 找到模拟器的nox_adb.exe

    ADB：Android Debugger，安卓调试器，理解为PC机与安卓模拟器之间的“USB数据线”

    在这里插入图片描述

  3. 为HBuilder配置adb

    在这里插入图片描述

    在这里插入图片描述

  4. 运行到Android模拟器中

    在这里插入图片描述

    在这里插入图片描述

  5. 最终效果

在这里插入图片描述

Uni-App项目结构

Uni-App目录结构

在这里插入图片描述

components目录

自定义组件所在的目录，需要手动创建，且必须叫这个名字

在这里插入图片描述

index.vue

在这里插入图片描述

static目录

静态资源所在目录

index.html

SPA应用中唯一的HTML页面

在这里插入图片描述

main.js

编译入口文件

在这里插入图片描述

App.vue

根组件

在这里插入图片描述

pages.json

路由配置文件

在这里插入图片描述

mainfest.json

配置清单文件

在这里插入图片描述

项目开发

产品原型：

https://www.axureshop.com/

https://www.axureshop.com/a/1504177.html

在这里插入图片描述

创建页面

登录页

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

我的页

在这里插入图片描述

物业页

在这里插入图片描述

社区页

在这里插入图片描述

路由配置文件

路由配置文件中自动生成了路由配置

在这里插入图片描述

页面基础配置

首页

在这里插入图片描述

登录页

将登录页变为启动页：放置到数组第一位

去除导航栏

在这里插入图片描述

我的页

在这里插入图片描述

社区页

在这里插入图片描述

物业页

在这里插入图片描述

全局配置

在这里插入图片描述

页签

页签：处于应用底部的用于页面跳转的链接：
在这里插入图片描述

配置页签

在这里插入图片描述

UniApp中的标签

uni-app中的标签需要保证兼容各个平台（H5、WebApp、小程序），一般不要使用HTML标签

https://uniapp.dcloud.net.cn/component/

内置组件

可以编译为任意平台可用的标签

view(视图)、scroll-view、swiper、text、rich-text、image、button、input…

在这里插入图片描述

扩展组件

uni-ui组件库(官方+第三方)

扩展组件需要安装后才可以使用

uni-list、uni-card、uni-rating、uni-datetimer-picker…

  1. 安装扩展组件

    在这里插入图片描述

  2. 直接下载扩展组件到HBuilder

    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

  3. 使用扩展组件
    在这里插入图片描述

  4. 最终效果
    在这里插入图片描述

  5. 下载扩展组件在本质

下载的扩展组件，

本质上是浏览器调用的HBuilder中的uni_modules插件

下载了指定扩展组件放置到了项目的uni_modules目录下

在这里插入图片描述

  1. 手动下载并导入扩展插件（直接导入不行使使用此方法）

    在这里插入图片描述

    在这里插入图片描述

自定义组件

创建自定义组件必需的文件：

文件必须创建在@/components目录下，且有同名父目录

在使用该组件的文件中声明自定义组件

正式使用自定义组件

  1. 创建组件

在components目录下创建

在这里插入图片描述

  1. 编写组件代码
<template><view class="go-top" @click="go"><text>返回顶部</text></view>
</template><script>export default {methods: {go(){//滚动到页面顶部——uni-app官方提供的APIuni.pageScrollTo({scrollTop: 0,	//滚动到距离顶部的位置duration: 100,  //滚动动画耗时多少毫秒})}}}
</script><!-- scoped：局部作用域的样式 -->
<!-- lang： language，指定预编译样式语言 -->
<style scoped  lang="scss">
.go-top {//固定定位到页面右下角position: fixed;right: 20rpx;		//rpx：响应式像素数bottom: 180rpx;width: 110rpx;height: 110rpx;background-color: #fff;border: 1px solid #aaa;border-radius: 50%;text-align: center;opacity: .5;font-size: 38rpx;&:active {			//SCSS中的&表示“当前元素”opacity: 1;}
}	
</style>

小程序、uni-app支持的全新尺寸单位：Responsive Pixel —— rpx，响应式像素数

因为不同的手机屏幕尺寸不同，如果做适配的话，传统的尺寸很麻烦；小程序引入了全新的尺寸单位，rpx —— 不论实际物理屏幕尺寸有多大，一律认为是750rpx

320px <=> 750rpx

360px <=> 750rpx

414px <=> 750rpx

这样一来，假设有个图片占屏幕宽度一半，width应该设定为 750rpx/2 = 375rpx

  1. 使用组件
    在这里插入图片描述

相关文章：

Uni-App-01

HBuilder安装卸载 安装 官网地址&#xff1a;https://www.dcloud.io/hbuilderx.html 下载HBuilder最新版 解压到安装目录&#xff0c;路径中不要有中文和空格 在桌面上增加快捷方式 卸载 执行reset.bat 删除HBuilder文件夹&#xff08;如果提示文件被占用&#xff0…...

编程日记 2024/10/30 4:58:35

Java版本鸿鹄工程项目管理系统源码概述

项目背景 随着企业规模的扩大和业务的复杂化&#xff0c;传统的工程项目管理方式已经无法满足高效、准确、实时的管理需求。为了提高工程管理效率、优化资源配置、降低风险并控制成本&#xff0c;企业决定通过数字化转型&#xff0c;构建一个基于Spring Cloud、Spring Boot、M…...

编程日记 2024/10/30 4:53:31

基于echarts、php、Mysql开发的数据可视化大屏

大屏效果展示 管理员进入数据可视化页面将看到数据可视化大屏。大屏内容包括两个条形图&#xff0c;用于统计当前网站所有用户的MBTI 16型人格分布&#xff1b;玫瑰图&#xff0c;用于展示当前网站用户MBTI四个维度&#xff0c;八个字母的占比&#xff1b;折线图&#xff0c;用…...

编程日记 2024/10/30 4:50:28

Me-and-My-Girlfriend-1

Me-and-My-Girlfriend-1 解题 信息收集 nmap扫描存活主机 我的虚拟机为131 所以发现130为目标靶机。 查看网站&#xff0c;找到可利用点 使用浏览器查看&#xff0c;使用xff伪造本地用户。 注册用户cat&#xff0c;观察url有url_id,改为5&#xff0c;发现alice用户。 将…...

编程日记 2024/10/30 4:48:26

R语言实现GWAS meta分析（1）

1、基于数据集的Meta分析 datafilenamec("data1.txt","data2.txt"), setwd(workdir) library(Metalgwas) a1 name1c() for(i in datafilename){ assign(paste("file",a,sep""),data.table::fread(paste(getwd(),"/","…...

编程日记 2024/10/30 4:46:18

Kafka-代码示例

一、构建开发环境 File > New > Project 选择一个最简单的模板 项目和坐标命名 配置maven路径 添加maven依赖 <dependencies><!-- https://mvnrepository.com/artifact/org.apache.kafka/kafka-clients --><dependency><groupId>org.apache.kaf…...

编程日记 2024/10/30 4:45:18

LLVM - 编译器前端-llvm 基本块、指令、函数 的关系

一：基础概念： 在 LLVM 中，基本块、指令和函数是构建中间表示（IR）的核心概念，它们之间有着紧密的关系，首先了解下基本概念。 1. 基本块（Basic Block） 定义：基本块是一个不包含任何跳转指令的线性代码段，执行顺序是从头到尾。每个基本块至少有一个入口和一个出口。特…...

编程日记 2024/10/30 4:43:15

探索人工智能在自然语言处理中的应用

探索人工智能在自然语言处理中的应用 前言1. 机器翻译2. 情感分析3. 智能客服4. 文本生成未来展望 结语 前言 在信息爆炸的时代&#xff0c;自然语言处理&#xff08;NLP&#xff09;作为人工智能&#xff08;AI&#xff09;的一个重要分支&#xff0c;正以前所未有的速度改变着…...

编程日记 2024/10/30 4:38:07

IFC模型文本的含义

以下代码是一个STEP文件&#xff08;ISO-10303-21标准&#xff09;&#xff0c;它是一种用于表示产品数据的国际标准。STEP文件通常用于在不同的计算机辅助设计&#xff08;CAD&#xff09;系统之间交换数据。下面是对这段代码的逐行解释&#xff1a; HEADER部分&#xff1a; …...

编程日记 2024/10/30 4:37:05

构建高效评奖系统：SpringBoot在教育领域的应用

摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了学生评奖评优管理系统的开发全过程。通过分析学生评奖评优管理系统管理的不足&#xff0c;创建了一个计算机管理学生评奖评优管理系统的方案。文章介绍了学生评奖…...

编程日记 2024/10/30 4:36:04

「二叉树进阶题解：构建、遍历与结构转化全解析」

文章目录 根据二叉树创建字符串思路代码 二叉树的层序遍历思路代码 二叉树的最近公共祖先思路代码 二叉搜索树与双向链表思路代码 从前序与中序遍历序列构造二叉树思路代码 总结 根据二叉树创建字符串 题目&#xff1a; 样例&#xff1a; 可以看见&#xff0c;唯一特殊的就…...

编程日记 2024/10/30 4:34:01

在使用代理IP时，需要注意以下几点：

1. 代理IP的质量和稳定性直接影响爬虫的效果。因此&#xff0c;我们需要定期更新代理IP列表&#xff0c;并筛选出可用的代理IP。 2. 有些代理IP可能存在被目标网站封禁的风险。因此&#xff0c;我们需要合理使用代理IP&#xff0c;避免过度频繁地访问目标网站。 3. 在使用代…...

编程日记 2024/10/30 4:32:00

深入理解Java基础概念的高级应用（1/5）

目录 1. Java内存模型&#xff1a;堆、栈与方法区 示例代码&#xff1a;对象存储位置 2. 类加载器的工作原理 示例代码&#xff1a;自定义类加载器 3. JVM如何执行字节码 字节码指令示例 4. Java基础数据类型的存储与操作 自动装箱与拆箱 示例代码&#xff1a;基础类型…...

编程日记 2024/10/30 4:25:52

高可用HA软件

高可用HA&#xff08;High Availability&#xff09;软件在分布式系统架构设计中至关重要&#xff0c;它们能够减少系统停机时间&#xff0c;确保应用程序持久、不间断地提供服务。以下是四款常用的高可用HA软件介绍&#xff1a; Keepalived Keepalived起初是为LVS&#xff08;…...

编程日记 2024/10/30 4:24:51

《近似线性可分支持向量机的原理推导》 拉格朗日函数 公式解析

本文是将文章《近似线性可分支持向量机的原理推导》中的公式单独拿出来做一个详细的解析&#xff0c;便于初学者更好的理解。 公式 9-41 解释&#xff1a; L ( w , b , ξ , α , μ ) 1 2 ∥ w ∥ 2 C ∑ i 1 N ξ i − ∑ i 1 N α i ( y i ( w T x i b ) − ( 1 − ξ …...

编程日记 2024/10/30 4:20:47

9.指针和字符串string类型

指针和字符串string类型 1.指针2.字符串string类型 1.指针 C完全兼容C语言指针&#xff0c;C多出一个this指针 交换两数 #include <iostream>using namespace std;void swap(int *a,int *b){int temp;temp *a;*a *b;*b temp; }int main() {//交换前int a 50;int b …...

编程日记 2024/10/30 4:17:42

八，Linux基础环境搭建（CentOS7）- 安装Mysql和Hive

Linux基础环境搭建&#xff08;CentOS7&#xff09;- 安装Mysql和Hive 大家注意以下的环境搭建版本号&#xff0c;如果版本不匹配有可能出现问题&#xff01; 一、Mysql下载及安装 MySQL是一个关系型数据库管理系统&#xff0c;由瑞典MySQL AB 公司开发&#xff0c;属于 Orac…...

编程日记 2024/10/30 4:16:40

海量数据面试题

⭐️前言⭐️ 本篇文章主要针对在面试时可能涉及到的海量数据的面试题&#xff0c;该类型面试题常常考虑通过位图、布隆过滤器或者哈希的方式来解决。 &#x1f349;欢迎点赞 &#x1f44d; 收藏 ⭐留言评论 &#x1f349;博主将持续更新学习记录收获&#xff0c;友友们有任何…...

编程日记 2024/10/30 4:15:39

基于SSM积分商城管理系统的设计与实现(源码+lw+部署文档+讲解等)

前言 伴随着基础网络设施的不断进步和终端电子设备的高度普及&#xff0c;互联网用户规模越来越大。现在人们越来越离不开计算机网络、互联网所带来的好处了&#xff0c;现如今不同的网站系统遍地都是&#xff0c;现在已经不同于以往的传统的管理方式了&#xff0c;只有跟上时代…...

编程日记 2024/10/30 4:14:39

MLP预售开启，革新去中心化通信生态：智能手机与AI Agent齐上阵

2024年10月22日&#xff0c;Matrix Layer Protocol&#xff08;MLP&#xff09;宣布其备受期待的第一期产品正式进入预售阶段。随着Web3世界的不断发展&#xff0c;去中心化技术已经深入到我们日常生活的方方面面。作为Web3世界中炙手可热的创新项目&#xff0c;Matrix Layer P…...

编程日记 2024/10/30 4:11:34

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

编程新知 2026/2/8 4:37:06

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

编程新知 2025/12/14 17:38:17

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

编程新知 2026/2/1 19:08:45

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

编程新知 2026/2/6 9:24:15

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2026/1/29 16:36:27

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

编程新知 2025/11/30 11:30:47

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

编程新知 2026/2/7 5:16:05

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

编程新知 2026/2/6 2:13:58

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

编程新知 2026/1/25 4:19:49

排序算法总结（C++）

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

编程新知 2026/1/25 9:33:23