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

Uni-App-01

news 2025/12/13 22:16:02

在这里插入图片描述

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

C++：std::is_convertible

C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

编程新知 2025/6/11 15:23:57

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

编程新知 2025/7/23 9:09:08

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2025/12/10 7:13:40

C++ 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2025/12/10 15:23:01

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

编程新知 2025/12/9 6:32:26

【论文阅读28】-CNN-BiLSTM-Attention-（2024）

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

编程新知 2025/12/9 6:34:51

【VLNs篇】07：NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

编程新知 2025/12/9 1:05:05

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

编程新知 2025/9/3 5:42:53

C语言中提供的第三方库之哈希表实现

一. 简介 前面一篇文章简单学习了C语言中第三方库&#xff08;uthash库&#xff09;提供对哈希表的操作&#xff0c;文章如下&#xff1a; C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...

编程新知 2025/11/9 14:40:17

LOOI机器人的技术实现解析：从手势识别到边缘检测

LOOI机器人作为一款创新的AI硬件产品&#xff0c;通过将智能手机转变为具有情感交互能力的桌面机器人&#xff0c;展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家&#xff0c;我将全面解析LOOI的技术实现架构&#xff0c;特别是其手势识别、物体识别和环境…...

编程新知 2025/6/10 21:22:04