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

Uni-App-01

news 2025/10/26 11:11:17

在这里插入图片描述

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

19c补丁后oracle属主变化，导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

编程新知 2025/10/24 2:00:11

业务系统对接大模型的基础方案：架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

编程新知 2025/10/25 15:34:52

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

编程新知 2025/10/23 16:55:43

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

编程新知 2025/10/20 8:39:33

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

编程新知 2025/10/19 17:19:35

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

编程新知 2025/7/20 13:23:05

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

编程新知 2025/10/13 4:15:41

【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

编程新知 2025/10/24 9:17:28

Caliper 配置文件解析：fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件，通常包含以下内容： test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

编程新知 2025/10/24 15:14:02

高防服务器价格高原因分析

高防服务器的价格较高&#xff0c;主要是由于其特殊的防御机制、硬件配置、运营维护等多方面的综合成本。以下从技术、资源和服务三个维度详细解析高防服务器昂贵的原因&#xff1a; 一、硬件与技术投入 大带宽需求 DDoS攻击通过占用大量带宽资源瘫痪目标服务器&#xff0c;因此…...

编程新知 2025/10/17 8:25:51