Uni-App-01

news2024/10/26 1:38:44

在这里插入图片描述

HBuilder安装卸载

安装

  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官方提供的API
				uni.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. 使用组件
    在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2223688.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Flutter项目打包ios, Xcode 发布报错 Module‘flutter barcode_scanner‘not found

Flutter项目打包ios, Xcode 发布报错 Module‘flutter barcode_scanner‘not found

报错图片 背景 flutter 开发的 apple app 需要发布新版本&#xff0c;但是最后一哆嗦碰到个报错&#xff0c;这个小问题卡住了我一天&#xff0c;之间的埪就不说了&#xff0c;直接说我是怎么解决的&#xff0c;满满干货 思路 这个报错 涉及到 flutter_barcode_scanner; 所…
阅读更多...
智能园艺：Spring Boot植物健康系统

智能园艺：Spring Boot植物健康系统

1系统概述 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的管理显得特别重要。因此&#xff0c;使用计算机来管理植物健康系统的相关信息成为必然。开发合适…
阅读更多...
《面向对象系统分析与设计》三级项目

《面向对象系统分析与设计》三级项目

文章目录 一、项目总体要求<设计模式应用>第一次文档要求第二次文档要求 二、示例第一次文档 - 设计原则应用1、题目描述2、设计:(1&#xff09;优化理由陈述(2&#xff09;类图(3)实现代码 第二次文档 - 设计模式应用1、题目描述2、设计:(1) 优化理由陈述(2&#xff09;…
阅读更多...
PostGis空间（下）:空间连接与空间索引

PostGis空间（下）:空间连接与空间索引

目录 1、简介2、空间连接3、空间索引3.1 索引操作3.2 空间索引的工作原理3.2.1 R-Tree 3.3 空间索引函数3.4 仅索引查询3.5 ANALYZE3.6 VACUUMing3.7 函数列表 PS 1024到啦&#xff01;&#xff01;&#xff01; 先祝各位程序员或者想成为程序员正在奋斗中的伙伴1024程序员节快…
阅读更多...
pdf免费压缩软件 pdf文件压缩免费软件 软件工具方法

pdf免费压缩软件 pdf文件压缩免费软件 软件工具方法

pdf文件压缩免费软件&#xff1f;对于提升日常工作效率至关重要。在繁忙的工作流程中&#xff0c;寻找一种既高效又合适的压缩策略显得尤为重要。那么&#xff0c;我们该如何优化工作流程呢&#xff1f;在职场中&#xff0c;良好的开端是制定一套清晰的工作方案。只有明确了目标…
阅读更多...
Konva 组，层级

Konva 组，层级

代码&#xff1a; <template><div class"rect"><div class"header"> <!-- <el-button type"primary" click"show">展示</el-button>--> <!-- <el-button type"success&quo…
阅读更多...
算法设计与分析——动态规划

算法设计与分析——动态规划

1.动态规划基础 1.1动态规划的基本思想 动态规划建立在最优原则的基础上&#xff0c;在每一步决策上列出可能的局部解&#xff0c;按某些条件舍弃不能得到最优解的局部解&#xff0c;通过逐层筛选减少计算量。每一步都经过筛选&#xff0c;以每一步的最优性来保证全局的最优性…
阅读更多...
UniHttp 框架，请求http接口

UniHttp 框架，请求http接口

项目案例下载地址： https://download.csdn.net/download/jinhuding/89902024 1.快速开始 2.1引入依赖 <dependency><groupId>io.github.burukeyou</groupId><artifactId>uniapi-http
阅读更多...
react18中使用redux管理公共数据仓库实现数据immutable更新

react18中使用redux管理公共数据仓库实现数据immutable更新

Immutable.js出自Facebook&#xff0c;是最流行的不可变数据结构的实现之一。它实现了完全的持久化数据结构&#xff0c;使用结构共享。所有的更新操作都会返回新的值&#xff0c;但是在内部结构是共享的&#xff0c;来减少内存占用。Immutablejs官网 在上一篇介绍redux的文章&…
阅读更多...
Docker 部署 JDK11 图文并茂简单易懂

Docker 部署 JDK11 图文并茂简单易懂

部署 JDK11 ( Docker ) [Step 1] : 下载JDK11 - JDK 11 | Oracle 甲骨文官网 [Step 2] : jdk11上传服务器/root/jdk11 可自行创建文件夹 进入目录 /root/jdk11 解压文件 tar -zxvf jdk-11.0.22_linux-x64_bin.tar.gz解压后 进入 /root/jdk11/jdk-11.0.22 创建 jre 文件 ./bi…
阅读更多...
基于RK3588/算能BM1684 AI盒子：综合视频智能AI分析系统建设方案（三）安全帽、睡岗检测、电瓶车、吸烟场景

基于RK3588/算能BM1684 AI盒子：综合视频智能AI分析系统建设方案（三）安全帽、睡岗检测、电瓶车、吸烟场景

安全帽反光衣检测算法 功能说明 安全帽反光衣检测是指在监控场景中预先设定监测区域&#xff0c;在区域内人员没有穿戴安全帽反光衣的现象&#xff0c;及时触发告警。检测目标在1080p图像中的分辨率大小不小于30*30像素。 推荐场景 场景要求&#xff1a;可室内外使用&#x…
阅读更多...
VS无法安装Win10SDK_10.0.2200，快捷方法

VS无法安装Win10SDK_10.0.2200，快捷方法

Visual Studio无法安装Win10SDK_10.0.2200&#xff0c;我在安装VS2019、2022提示&#xff0c;软件就不能编译。 因为之前安装过VS软件&#xff0c;重新安装软件提示“无法安装”。 原因 之前安装在D盘&#xff0c;现在没有D盘了 说明 因为电脑第一次安装VS&#xff0c;会自动安…
阅读更多...
安全见闻---清风

安全见闻---清风

注&#xff1a;本文章源于泷羽SEC&#xff0c;如有侵权请联系我&#xff0c;违规必删 学习请认准泷羽SEC学习视频:https://space.bilibili.com/350329294 安全见闻1 泷哥语录&#xff1a;安全领域什么都有&#xff0c;不要被表象所迷惑&#xff0c;无论技术也好还是其他方面…
阅读更多...
Python爬虫教程：从入门到精通

Python爬虫教程：从入门到精通

Python爬虫教程&#xff1a;从入门到精通 前言 在信息爆炸的时代&#xff0c;数据是最宝贵的资源之一。Python作为一种简洁而强大的编程语言&#xff0c;因其丰富的库和框架&#xff0c;成为了数据爬取的首选工具。本文将带您深入了解Python爬虫的基本概念、实用技巧以及应用…
阅读更多...
若依RuoYi-Vue 定时任务 速学

若依RuoYi-Vue 定时任务 速学

1.若依定时任务模块&#xff08;ruoyi-quartz&#xff09; 那么从一个简单的入门示例开始&#xff0c;掌握定时任务的使用吧&#xff01; 2. 入门示例&#xff08;学会制作一个简单定时任务&#xff09; 首先打开定时任务模块中的task包&#xff0c;这里已经有一个已经写好的R…
阅读更多...
51单片机——OLED显示图片

51单片机——OLED显示图片

取模软件&#xff1a;链接:https://pan.baidu.com/s/1UcrbS7nU4bsawNxsaaULfQ 提取码:gclc 1、如果图片大小和格式不合适&#xff0c;可以先用Img2Lcd软件进行调整图片大小&#xff0c;一般取模软件使用的是.bmp图片&#xff0c;可以进行输出.bmp格式。软件界面如下&#xff1…
阅读更多...
【Javaee】网络原理—TCP协议的核心机制

【Javaee】网络原理—TCP协议的核心机制

前言 TCP/IP五层协议是互联网中的主流模型&#xff0c;为网络通信提供了一个稳固的框架。 主要包含了应用层&#xff0c;传输层&#xff0c;网络层&#xff0c;数据链路层&#xff0c;物理层。 本篇主要介绍传输层的TCP协议的核心机制 一. 确认应答&#xff08;ack&#xf…
阅读更多...
ESP32-S3学习笔记：常用的ESP-IDF命令总结

ESP32-S3学习笔记：常用的ESP-IDF命令总结

参考资料&#xff1a;1.esptool.py工具 2.idf.py工具 后续文章的讲解需要用到IDF命令行工具&#xff0c;当前文章简单介绍一下。 目录 打开命令行的小技巧 一、读flash信息 二、擦除flash 三、读flash数据 四、写flash数据 打开命令行的小技巧 大家安装完IDF开发包后…
阅读更多...
关于小程序审核需要提交订单列表页面path的修改办法

关于小程序审核需要提交订单列表页面path的修改办法

小程序又又又又又搞事情啦&#xff5e;&#xff5e;&#xff5e; 从12月31号起&#xff0c;所有有订单生成逻辑的小程序在审核过程中&#xff0c;必须要填写订单列表页面的path才可以进行审核 在代码层面上会有一些小的改动&#xff0c;下面就告诉大家怎么去修改吧。 第一步…
阅读更多...
算法笔记day07

算法笔记day07

目录 1.最长回文子串 2.买卖股票的最好时机(一) 3.过河卒 1.最长回文子串 最长回文子串_牛客题霸_牛客网 算法思路&#xff1a; 使用中心扩散算法&#xff0c;枚举所有的中点&#xff0c;向两边扩散&#xff0c;一个中点需要枚举两次&#xff0c;一次当回文串是奇数另一次回…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023