【uniapp】新课uniapp零基础入门到项目打包（微信小程序/H5/vue/安卓apk）全掌握

news2024/12/22 23:31:32

一、uniapp和HBuilderX介绍

uni-app官方网站：https://uniapp.dcloud.net.cn/

为什么要学习uniapp？

1、一套代码可以打包到不同的应用平台；一套代码编到十几个平台，这不是梦想。眼见为实，扫描以下二维码，亲自体验最全面的跨平台效果！

比较常用的平台如下

16ca95bbd21b448dba322b20f0c2a479.png

2、方便入手，就是使用vue语法写小程序；

3、丰富的生态环境，插件众多。

开发工具：HBuilderX，uniapp使用HBuilderX，两者都是一家公司的，DCloud公司（国产团队）。

主题：绿柔、雅蓝、酷黑

f8eb87b5a3e945adb9a4f3881c60ef03.png

二、

uni-app官网

2.1  新建项目、项目目录、预览uni项目

2.1.1 新建项目

1、新建项目。

40ee1e0493704d8c82aaed9c7cc90bcf.png

2、新建uni-app项目

新建uni-app项目、选择默认模板

项目名称、项目目录、选择vue2版本

b1e165eb1f8d4b98b6304d8246b84135.png

项目创建成功。

2.1.2 项目目录

项目基本构成

f6ba6e517b1b46418110729fb8127996.png

详细构成

2126538a3efd458d87c084669a7237d1.png

不适用unicloud时的项目目录及文件（上面有些目录和文件在下面没有提及，有的是打包后会生成的）

682ce9bdff9c4ca2970776fe90d14de8.png

2.1.3 预览uni项目

1 内置浏览器预览

选择运行，选择第2个，内置浏览器浏览

0e98991119bd40e9b6dbdc4534b852fa.png

2 外置浏览器浏览

1 配置，选择下面的配置Web服务器。

cabc646a9a474075b9e4583ee60f6369.png

2 选择谷歌浏览器打开的话，就配置谷歌浏览器的安装路径

37e15c39e50141f49a6242eac3795ed3.png

3 然后选择外置浏览器的chrome浏览器运行

04b88756012a40be87d9025d80fd34c3.png

运行成功，此时是pc端的页面。

691ea9c19bd44a96953b857d24ceae80.png

单击右键->检查->设备改为手机。

5ca46edd835f4b088d04dd68607c49fa.png

3 小程序浏览

1 配置

选择图示下面的运行设置

35b442cb999c4e7bb6de02428b21bc86.png

配置微信开发者工具的安装路径。

这里要安装微信开发者工具，且微信登陆。

58abf10ef24c4f1f926b7bda78a2e92e.png

2 运行，选择“运行到小程序模拟器”的第一项，微信开发者工具。

运行失败，到微信开发者工具里打开设置，找到安全设置，打开服务端口。

2b51d69928e146ca90b61b9b551324dd.png

此时再运行，即可在微信开发者工具里运行uni项目。

77f4bfa36b8d46779cf418fb65d1761f.png

以上介绍了浏览器和小程序上的预览，还可以打包成app，但是配置起来比较麻烦，先不说这么多了。

可以随便选择预览窗口，浏览器或者小程序都可以。

2.2 vue语法在uniapp中的使用

index.vue

vue的template里只能有一个盒子view。

<template>
	<view class="box">
		<h1>
			<span class="row">uniapp</span>入门
		</h1>
	</view>
</template>

<script>
	export default {
	}
</script>

<style lang="scss">
.box {
	width: 100px;
	height: 100px;
	background-color: lightpink;
	h1 {
		font-size: 40px;
		color: red;
		.row {
			font-style: italic;
		}
	}
}
</style>
  • 注意
    • 1 view可以用div替代
    • 2 style标签里加上lang="scss"，类名可以嵌套a9aa694c431b4e2493a456cbbe05a307.png
    • 3 不需要遵循uniapp里的东西，标签最终会解析成uniapp自己的代码标签5751a760c15b44b4aaa8d67cf7a510d7.png
    • 4 H5和小程序相同标签的显示效果不同。因此真正要写的时候要去学习uni组件的知识。所有盒子都可以使用这样的标签包裹。这种标签就是适配小程序。因此，现在上面的代码只适合开发H5页面，不适合开发小程序。dd78944641354903b6da3a80ab069e13.png4d04a0de51394cb7a5317396bd04a473.png 

微信开发者工具，个人体会，就是微信小程序的开发工具。

2.3 pages.json文件的页面配置和全局配置

2.3.1 创建新页面

pages文件夹，右键选择“新建页面”，按下图操作。

06bf9a8191834e609ce63c15851ba76c.png

创建成功后看到pages.json文件里多了一个新页面

e593ca3a680540f0ad1b2eee449aad6e.png

2.3.2 显示新页面

将list页面挪到index上面。

d4b172df8b9a45d391c4be0c5dbfcf26.png

这样list就放在首页了。

2af371a1daaa46f7bd7709c725279f07.png

通过这个操作，实现哪个页面，就显示当前页面。

2.3.3 页面配置

新页面标题

736affc6ffa14d81b24013182e1d4796.png

其他全局文件的配置。

找到网站的全局文件一栏https://uniapp.dcloud.net.cn/collocation/pages.html

e1384f3bfeed4d2d80180628fa7fde67.png57768408ced341dcb5bbe9a0e408e558.png

以下就是页面可配置的属性，不同小程序之间有一定的差异。

5ab5b66ddc1a4053b4af2123e22ed5ab.png

例如，配置页面导航栏的背景色和文字颜色。

b664701141064b41b16daee05a428383.png

页面效果如图

8401b9015e4f4b19b6d92573db5655ee.png

2.3.4 全局配置

主要是globalStyle

  • globalStyle代表页面窗体。
  • 全局配置，包容性大，作用域小一些。
  • navigationBarTitleText 
    • 如果页面设置标题，则使用页面设置的标题navigationBarTitleText；
    • 如果没有，则页面标题使用globalStyle的navigationBarTitleText 
  • navigationBarBackgroundColor、navigationBarTextStyle、 backgroundColor同理也是如此

36fb87bf197242f3adf234fb53a3d31c.png

2.4 uniapp组件

  • 为什么要学习uniapp组件
    • 上述讲的东西做H5没有问题，因为H5页面支持html标签。
    • 但是项目还需要支持小程序、App等。所以要遵循标准规范。
    • 因为小程序页面不支持html标签，所以要按照规则进行书写。

uniapp官网的组件https://uniapp.dcloud.net.cn/component/

小程序的组件https://developers.weixin.qq.com/miniprogram/dev/component/

上述两个的组件十分相似，因为在小程序出现后，uniapp才出现。而且uniapp通过微信小程序的写法完成了其他小程序的写法。

小程序官网有的东西，uniapp里都有。uniapp有的，小程序里没有。uniapp的包容性更强，东西更多，包含了vue组件等。

如果单纯想开发微信小程序，建议去学习微信小程序的课程。

其他组件，可以去简书、掘金里去找说明。

2.4.1 view 视图容器 块级标签 div

view标签比div标签更强，是uniapp自己封装的组件。

何为组件：组件可以理解为一个小模块，将公用的功能封装起来。

使用

<template>
	<view class="out">
		<view class="box">
		</view>
	</view>
</template>

类似以前用的div。

注意1：

.out {
	.box {
		
	}
}

会自动解析为

.out .box { }

注意2：

rpx：响应式单位。

例如，以px为单位的div，

.out {
	.box {
		width: 200px;
		height: 200px;
		background-color: pink;
	}
}

在不同机型上的绝对大小是一样的

而要是想生成一个全屏。

使用响应式单位rpx页面样式与布局 | uni-app官网

750*1334，是iphone6的屏幕分辨率，只需要记750。

以px为单位的固定大小的长度是不响应的，所以建议使用rpx响应式单位。

2.4.2 icon 图标组件 行级标签

icon | uni-app官网

每个平台的图标不完全相同。

8830ff47a1ee439ca6ef3fe8440e4e07.png

例如

		<view class="box">
			<icon type="success" size="26"/>
		</view>

效果

95b480d11d104127a0ebb8ec55466993.png

2.4.3 text 文本组件 行标签 span

text替换之前的span标签。

text还有一些特别的属性，可以去官网看text组件 | uni-app官网

2.4.4 scroll-view组件 可滚动视图容器

scroll-view | uni-app官网

滑动，左右滑动。

例如，这里有5个220rpx*220rpx大小的盒子，但是边框高度限制为220rpx

b3198589e2b94457b2d1f4c1bb08b2d5.png

代码

		<scroll-view class="scroll">
			<view class="group">
				<view class="item">
					111
				</view><view class="item">
					111
				</view><view class="item">
					111
				</view><view class="item">
					111
				</view><view class="item">
					111
				</view><view class="item">
					111
				</view>
			</view>
		</scroll-view>

样式style

.scroll {
	border: 1px solid red;
	box-sizing: border-box;
	height: 220rpx;
	.group {
		.item {
			width: 220rpx;
			height: 220rpx;
			background: blue;
		}
	}
}

问题：希望能将蓝色小块做成横向滑动的效果。

p7

首先，将蓝色小块改为行级块元素。处理一下后

scroll-view的滚动属性。

添加scroll-x横向滚动属性。

效果

蓝色盒子可以滑动，底部有滚动栏。

scroll-y同理，这里不再演示。

scroll-view的其他属性可以等js学习后再尝试。

2.4.5 swiper组件 滑块视图容器

像移动端轮播图的实现，就是通过swiper实现的。

与scroll-view左右滑动不同，swiper每次就滑动一屏。

swiper-item，swiper的子元素

属性circular，即循环滑动。

此外还有自动切换时间autoplay，用interval设置切换时间。

此外还有轮播图下面的指示点，有兴趣可以自己试一下。

2.4.6 image 图片组件

image和video是最常用的媒体组件。audio（音频）和video（视频）几乎一样。camera是相机组件。

image标签的使用

		<image src="/static/logo.png" mode=""></image>

注意：1、反斜杠/代表项目主体。2、src也可以是网络图片的地址

效果

效果：绿色的图变形了。

但是html支持的img标签对应的图片不会变形。（小程序不支持html标签）

原因：image组件有一个默认的宽高，320px*240px。

解决方法：1 外加一个类，来额外控制宽高。

p8 8:15

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

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

相关文章

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -用户投票实现

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -用户投票实现

锋哥原创的uniapp微信小程序投票系统实战&#xff1a; uniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibiliuniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )共计21条视频…
阅读更多...
爬虫利器一览

爬虫利器一览

前言 爬虫&#xff08;英文&#xff1a;spider&#xff09;&#xff0c;可以理解为简单的机器人&#xff0c;如此一个“不为名利而活&#xff0c;只为数据而生&#xff0c;目标单纯&#xff0c;能量充沛&#xff0c;不怕日晒雨淋&#xff0c;不惧寒冬酷暑”的家伙&#xff0c;…
阅读更多...
[嵌入式软件][入门篇] 搭建在线仿真平台(STM32)

[嵌入式软件][入门篇] 搭建在线仿真平台(STM32)

文章目录 一、注册平台二、创建首个项目三、硬件介绍 一、注册平台 进入官方&#xff0c;进行注册&#xff1a; 在线仿真地址 二、创建首个项目 ① 新建项目 ② 搭建一个电路 ③ 用STM32F103搭建一个简单电路 ④ 进入编码界面 三、硬件介绍 红框是必看文档&#xff…
阅读更多...
【RT-DETR有效改进】带你分析如何确定改进的基础模型，解决模型无法收敛精度很差的问题(ResNet官方一比一复现)

【RT-DETR有效改进】带你分析如何确定改进的基础模型，解决模型无法收敛精度很差的问题(ResNet官方一比一复现)

一、本文介绍 Hello&#xff0c;各位读者&#xff0c;距离第一天发RT-DETR的博客已经过去了接近两个月&#xff0c;这段时间里我深入的研究了一下RT-DETR在ultralytics仓库的使用&#xff0c;旨在为大家解决为什么用v8的仓库训练的时候模型不收敛&#xff0c;精度差的离谱的问…
阅读更多...
Maven 依赖管理项目构建工具 教程

Maven 依赖管理项目构建工具 教程

Maven依赖管理项目构建工具 此文档为 尚硅谷 B站maven视频学习文档&#xff0c;由官方文档搬运而来&#xff0c;仅用来当作学习笔记用途&#xff0c;侵删。 另&#xff1a;原maven教程短而精&#xff0c;值得推荐&#xff0c;下附教程链接。 atguigu 23年Maven教程 目录 文章目…
阅读更多...
Skywalking UI页面中操作的各种实用功能汇总

Skywalking UI页面中操作的各种实用功能汇总

刚刚接触skywalking不久&#xff0c;在这里总结一下在UI页面中操作的各种实用功能&#xff0c;随着使用的不断深入&#xff0c;我也会对文章进行持续补充。 本文skywalking 的ui入口是官方demo &#xff0c;版本是10.0.0-SNAPSHOT-593bd05 http://demo.skywalking.apache.org…
阅读更多...
【GO语言依赖】Go语言依赖管理简述

【GO语言依赖】Go语言依赖管理简述

在运行环境中&#xff0c;遭遇报错&#xff0c;显示找不到函数 经过研究后发现需要进行依赖管理&#xff0c;进行如下操作后解决&#xff1a; 起源 最早的时候&#xff0c;Go所依赖的所有的第三方库都放在GOPATH这个目录下面。这就导致了同一个库只能保存一个版本的代码。如…
阅读更多...
vite 搭建vue3 TS项目初始框架

vite 搭建vue3 TS项目初始框架

目录 仓库地址&#xff1a; 一.搭建项目 1.安装 Vite&#xff1a; 2.创建 Vue 3 项目&#xff1a; 3.进入项目目录&#xff1a; 4.安装依赖&#xff1a; 5.运行项目&#xff1a; 6.流程实操 二.修改项目结构&#xff0c;显示自定义的页面 1.整理静态样式文件 1.1.在 sr…
阅读更多...
安泰电子功率放大器在设计电路时应该注意什么

安泰电子功率放大器在设计电路时应该注意什么

在设计功率放大器电路时&#xff0c;有几个重要的因素需要特别注意。这些因素包括功率放大器的线性度、效率、稳定性、保护功能和适当的散热设计。下面将详细介绍每个因素&#xff0c;并说明在设计功率放大器电路时应该注意的要点。 线性度&#xff1a; 功率放大器的线性度是指…
阅读更多...
OpenHarmony4.0Release系统应用常见问题FAQ

OpenHarmony4.0Release系统应用常见问题FAQ

前言 自OpenHarmony4.0Release发布之后&#xff0c;许多小伙伴使用了配套的系统应用源码以及IDE作为基线开发&#xff0c;也遇到了各种各样的问题&#xff0c;这篇文档主要收录了比较常见的一些问题解答。 FAQ 系统应用源码在哪 目前OpenHarmony系统应用分为3种模式&#x…
阅读更多...
Realm Management Extension领域管理扩展之调试跟踪分析

Realm Management Extension领域管理扩展之调试跟踪分析

现代 Arm 系统包含大量功能以支持调试和性能分析。我们必须确保这些功能不能被用于危害系统安全。Arm 架构中，搭载 RME，提供了控制来限制系统的哪些部分可以进行调试。 本节假定读者熟悉 Armv9-A 中的基本功能，并总结了 RME 引入的变化。 外部调试 外部调试是指通过位于处…
阅读更多...
RPCMS跨站脚本漏洞(xss)

RPCMS跨站脚本漏洞(xss)

CNVD-ID: CNVD-2024-01190 漏洞描述: RPCMS是一个应用软件&#xff0c;一个网站CMS系统。 RPCMS v3.5.5版本存在跨站脚本漏洞&#xff0c;该漏洞源于组件/logs/dopost.html中对用户提供的数据缺乏有效过滤与转义&#xff0c;攻击者可利用该漏洞通过注入精心设计的有效载荷执行…
阅读更多...
深信服态势感知一体机SIP-1000 Y2100 3.0.1Y升级3.0.3Y步骤

深信服态势感知一体机SIP-1000 Y2100 3.0.1Y升级3.0.3Y步骤

当前版本&#xff1a;3.0.1Y 升级后版本&#xff1a;3.0.3Y PS&#xff1a;3.0.1Y不能直升3.0.3Y&#xff0c;需要先通过升级工具升级到3.0.2Y&#xff0c;再安装前置补丁从3.0.2Y升级到3.0.3Y&#xff1b;每一次升级时间为20-30分钟&#xff0c;设备升级会重启&#xff0c;需提…
阅读更多...
Black Hole Alliance发展蓝图：从数字化到生态建设

Black Hole Alliance发展蓝图：从数字化到生态建设

Black Hole Alliance 以WEB3.0生态产业为核心&#xff0c;以强大的技术及社区为依托&#xff0c;确立了 " 区块链 生态产业 AI与Web3融合​ " 的底层架构&#xff0c;将区块链技术与全球生态产业有机融合&#xff0c;以价值交换网络为切入点及立足点&#xff0c;链…
阅读更多...
【JAVA基础】JVM之类加载--双亲委派机制

【JAVA基础】JVM之类加载--双亲委派机制

目录 1. 类加载的过程描述&#xff1a;看图&#xff1a;解释&#xff1a; 2. 那么类加载器都有哪些呢3. 双亲委派机制3.1 双亲委派机制的过程3.2 图看委派过程3.3 为什么要设计双亲委派机制 4. 自定义类加载器4.1 如何定义自己的类加载器&#xff1f; 1. 类加载的过程 描述&am…
阅读更多...
kylin集群反向代理（健康检查）

kylin集群反向代理（健康检查）

前面一篇文章提到了使用nginx来对kylin集群进行反向代理&#xff0c; kylin集群使用nginx反向代理-CSDN博客文章浏览阅读349次&#xff0c;点赞8次&#xff0c;收藏9次。由于是同一个集群的&#xff0c;元数据没有变化&#xff0c;所以&#xff0c;直接将原本的kylin使用scp的…
阅读更多...
21道Java Spring MVC综合面试题详解含答案（值得珍藏）

21道Java Spring MVC综合面试题详解含答案（值得珍藏）

1.概述 1.1 什么是Spring MVC&#xff1f;简单介绍下你对Spring MVC的理解&#xff1f; Spring MVC是一个基于Java的实现了MVC设计模式的请求驱动类型的轻量级Web框架&#xff0c;通过把模型-视图-控制器分离&#xff0c;将web层进行职责解耦&#xff0c;把复杂的web应用分成…
阅读更多...
2023年全国职业院校技能大赛软件测试赛题—单元测试卷⑩

2023年全国职业院校技能大赛软件测试赛题—单元测试卷⑩

单元测试 一、任务要求 题目1&#xff1a;根据下列流程图编写程序实现相应处理&#xff0c;程序根据两个输入参数iRecordNum和IType计算x的值并返回。编写程序代码&#xff0c;使用JUnit框架编写测试类对编写的程序代码进行测试&#xff0c;测试类中设计最少的测试数据满足基路…
阅读更多...
Windows安装Rust环境（详细教程）

Windows安装Rust环境（详细教程）

一、 安装mingw64(C语言环境) Rust默认使用的C语言依赖Visual Studio&#xff0c;但该工具占用空间大安装也较为麻烦&#xff0c;可以选用轻便的mingw64包。 1.1 安装地址 (1) 下载地址1-GitHub&#xff1a;Releases niXman/mingw-builds-binaries GitHub (2) 下载地址2-W…
阅读更多...
C#编程-实现线程声明周期

C#编程-实现线程声明周期

实现线程声明周期 当System.Threading.Thread类的对象被创建的时候，线程的生命周期开始。线程的生命周期在完成任务时结束。在线程的生命周期中有各种状态。这些状态是： 未启动状态可运行状态不可运行状态死亡状态下图显示了线程的各种状态和引起线程从一个状态变为另一个状…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023