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

abigale032024-01-15 18:27

课程地址：【新课uniapp零基础入门到项目打包（微信小程序/H5/vue/安卓apk）全掌握】 https://www.bilibili.com/video/BV1mT411K7nW/?p=12\&share_source=copy_web\&vd_source=b1cb921b73fe3808550eaf2224d1c155

目录

一、uniapp和HBuilderX介绍

二、uniapp基础

[2.1 新建项目、项目目录、预览uni项目](#2.1 新建项目、项目目录、预览uni项目)

[2.1.1 新建项目](#2.1.1 新建项目)

[2.1.2 项目目录](#2.1.2 项目目录)

[2.1.3 预览uni项目](#2.1.3 预览uni项目)

[2.2 vue语法在uniapp中的使用](#2.2 vue语法在uniapp中的使用)

[2.3 pages.json文件的页面配置和全局配置](#2.3 pages.json文件的页面配置和全局配置)

[2.3.1 创建新页面](#2.3.1 创建新页面)

[2.3.2 显示新页面](#2.3.2 显示新页面)

[2.3.3 页面配置](#2.3.3 页面配置)

[2.3.4 全局配置](#2.3.4 全局配置)

[2.4 uniapp组件](#2.4 uniapp组件)

[2.4.1 view 视图容器 块级标签 div](#2.4.1 view 视图容器 块级标签 div)

[2.4.2 icon 图标组件 行级标签](#2.4.2 icon 图标组件 行级标签)

[2.4.3 text 文本组件 行标签 span](#2.4.3 text 文本组件 行标签 span)

[2.4.4 scroll-view组件 可滚动视图容器](#2.4.4 scroll-view组件 可滚动视图容器)

[2.4.5 swiper组件 滑块视图容器](#2.4.5 swiper组件 滑块视图容器)

[2.4.6 image 图片组件](#2.4.6 image 图片组件)

[2.4.7 video 视频组件](#2.4.7 video 视频组件)

[2.4.8 audio 音频组件](#2.4.8 audio 音频组件)

[2.4.9 live-player 和 live-pusher 实时音视频录制和播放](#2.4.9 live-player 和 live-pusher 实时音视频录制和播放)

[2.4.10 camera 相机组件](#2.4.10 camera 相机组件)

[2.4.11 表单组件](#2.4.11 表单组件)

[1 button](#1 button)

[2 input](#2 input)

[2.4.12 navigator 页面跳转组件](#2.4.12 navigator 页面跳转组件)

[1 url](#1 url)

[2 open-type](#2 open-type)

[3 delta](#3 delta)

[2.4.13 配置tabBar导航菜单](#2.4.13 配置tabBar导航菜单)

[2.4.14 open-type跳转差异](#2.4.14 open-type跳转差异)

一、uniapp和HBuilderX介绍

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

为什么要学习uniapp？

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

比较常用的平台如下

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

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

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

主题：绿柔、雅蓝、酷黑

二、uniapp基础

uni-app官网

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

2.1.1 新建项目

1、新建项目。

2、新建uni-app项目

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

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

项目创建成功。

2.1.2 项目目录

项目基本构成

详细构成

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

2.1.3 预览uni项目

1 内置浏览器预览

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

2 外置浏览器浏览

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

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

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

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

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

3 小程序浏览

1 配置

选择图示下面的运行设置

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

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

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

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

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

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

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

2.2 vue语法在uniapp中的使用

index.vue

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

html 复制代码 
<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"，类名可以嵌套
    • 3 不需要遵循uniapp里的东西，标签最终会解析成uniapp自己的代码标签
    • 4 H5和小程序相同标签的显示效果不同。因此真正要写的时候要去学习uni组件的知识。所有盒子都可以使用这样的标签包裹。这种标签就是适配小程序。因此，现在上面的代码只适合开发H5页面，不适合开发小程序。

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

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

2.3.1 创建新页面

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

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

2.3.2 显示新页面

将list页面挪到index上面。

这样list就放在首页了。

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

2.3.3 页面配置

新页面标题

其他全局文件的配置。

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

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

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

页面效果如图

2.3.4 全局配置

主要是globalStyle

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

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自己封装的组件。

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

使用

html 复制代码 
<template>
	<view class="out">
		<view class="box">
		</view>
	</view>
</template>

类似以前用的div。

注意1：

css 复制代码 
.out {
	.box {
		
	}
}

会自动解析为

css 复制代码 
.out .box { }

注意2：

rpx：响应式单位。

例如，以px为单位的div，

css 复制代码 
.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官网

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

例如

html 复制代码 
		<view class="box">
			<icon type="success" size="26"/>
		</view>

效果

2.4.3 text 文本组件 行标签 span

text替换之前的span标签。

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

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

scroll-view | uni-app官网

滑动，左右滑动。

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

代码

html 复制代码 
		<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

css 复制代码 
.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 | uni-app官网

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

image标签的使用

html 复制代码 
		<image src="/static/logo.png" mode=""></image>

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

效果

效果：绿色的图变形了。

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

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

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

p8 8:15

mode不同取值对应的效果。

一般只显示最小的边，也就是aspectFill，长边多余的地方会裁剪掉。

其他的了解下就行了，用到的时候再说。

除了mode之外，还有其他的属性

懒加载 lazy-load，指定位置后才会加载图片，这样加载速度比较快。（没看明白为什么速度快）

webp 等等

2.4.7 video 视频组件

video与html的video是一样的，只是增加了一些属性和方法。

html 复制代码 
		<video src="../../static/logo.mp4" mode=""></video>

video | uni-app官网

video的属性和方法

1、H5不允许自动播放，所以autoplay不生效；

2、muted可以自动播放，不过是静音播放；

3、loop 循环播放；

4、initial-time 视频初始播放位置；

其他的属性可以用到的时候好好研究下。

2.4.8 audio 音频组件

audio | uni-app官网

2.4.9 live-player 和 live-pusher 实时音视频录制和播放

直播模块会用到。

2.4.10 camera 相机组件

老师多做H5和微信小程序，由于camera不支持H5，兼容性太差，所以没有对此有了解。

属性比较简单，用到的话可以去研究下。

2.4.11 表单组件

  • 表单，用于收集用户信息，手机、邮箱、日期选择等等，包含如下组件，
    • button
      • uniapp提供的按钮样式太少了
      • 后期会用到uView的按钮，按钮样式多，兼容性更好一些。
    • checkout

p10 3:00

1 button

button | uni-app官网

举例

html 复制代码 
		<button size="mini"></button>
  • button的属性
    • size属性，有default、mini属性。
    • type，type属性有default、primary和warn三种类型。
    • plain，是否镂空，为false表示不镂空，为true表示镂空。
    • loading，显示加载中。
    • form-type，用于form组件，点击分别会触发form组建的submit和reset事件。
    • 剩下就是只有某些平台才能用的属性了。
2 input

input | uni-app官网

  • input的属性
    • type
      • 有文本输入：text
      • 数字输入：number
      • ...
  • 最后有演示案例。

此外还有picker，平台差异化，所以也就不说了。

uView还提供了Calendar日历，Slider滑动选择器，Picker选择器，效果更好一些。

后面通过案例练习。

navigator | uni-app官网

该组件类似html的a组件，但只能跳转本地页面。目标页面必须在pages.json中注册。

navigator的属性

例如，实现list和index页面的跳转。

在index页面添加一个navigator组件

1 url
html 复制代码 
<navigator url="/pages/list/list">新闻列表</navigator>

效果

点击新闻列表，会跳转到list页面。

在list页面添加navigator组件，点击时可以跳回index首页。

html 复制代码 
<navigator url="/pages/index/index">今日新闻</navigator>

效果，点击今日新闻，跳回首页。

注意1：

点击标题左边的箭头，可以返回上一个页面。

2 open-type

这是open-type属性控制的，默认取值是navigate。

（1）open-type取值为navigate时，对应uni.navigateTo的功能。对应：保留当前页面，跳转到应用内的某个页面。所以首页还是保留的，只是跳转到了list页面。

（2）open-type取值为redirect的时候，关闭当前页面，跳转到应用内的某个页面。

与navigate不同在于，取值为redirect时，相当于打开了新的页面，此时没有返回键（标题左侧箭头）。

html 复制代码 
<navigator url="/pages/list/list" open-type="redirect">新闻列表</navigator>

效果，

此时标题"新闻列表"左侧没有箭头。

场景：希望点开的新页面是一个独立的页面，且有些分享按钮，此时要求新页面不可追溯到上一个页面，那么就将open-type属性值置为redirect。

navigate和redirect都显示跳转到非tabBar页面。当页面最下方有相应菜单的时候，此时无法进行跳转。

（3）open-type取值为switchTab时，跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。uni.navigateTo(OBJECT) | uni-app官网

相当于关闭所有页面。

如果想要跳转tabBar页面时，就需要使用switchTab页面。不过reLaunch用的比较多。与navigate和redirect是一对一样，switchTab与reLaunch也是一对。两者区别在于，reLaunch路径可以携带参数，switchTab路径后面不能带参数。这两个都是可以打开导航菜单的内容的。

（4）navigateBack，返回上一页。一般会通过页面栈的方式实现。关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。uni.navigateTo(OBJECT) | uni-app官网

以上就是open-type的属性取值方式，也就是跳转方式如何选择的问题。html的a标签也有多种跳转方式，本窗口打开还是新窗口打开。

3 delta

当 open-type 为 'navigateBack' 时有效，表示回退的层数

剩下的就是交互的问题了。

注意：navigator组件不仅可以插入文字，还可以插入图片。这里就不多余记录了。

电脑查看京东手机端，电脑打开京东网页，F12，切到手机端浏览。

2.4.13 配置tabBar导航菜单

在小程序下方创建一个导航菜单，需要做一个配置文件。

官方方式

步骤1，打开官网的全局文件。
pages.json 页面路由 | uni-app官网

步骤2，打开pages.json文件，（此时有3个页面，首页、新闻列表、关于我们），配置好3个页面的标题。

步骤3，打开tabBar说明。

pages.json 页面路由 | uni-app官网

tabBar是对象类型，可以看下面的官网案例。

步骤4，在pages.json文件中添加tabBar对象，注意，tabBar与pages和globalStyle是同层级的，

添加tabBar对象如下，

效果，

实现了分tab跳转。

注意1：iconfont下载图标

iconfont-阿里巴巴矢量图标库

选中时的样式，也下载下来。

然后将tabBar需要的文件都放到static文件夹下。

2.4.14 open-type跳转差异

注意2：添加tabBar后，之前页面的跳转会失效，即navigator组件的跳转（方式选navigate和redirect都不能跳转）。

看下图，navigator组件在open-type取navigate时，url要填非tabBar页面的路径。

分析一下：在A页面可以跳转B页面，同时B页面标题左侧会有返回上一页的箭头。但是A和B页面都是tabBar页面。单独点击B页面对应的tab按钮，此时如果B页面标题左侧有箭头，那么点击这个箭头应该返回到哪个页面？这就不合适了。

但是可以怎么跳转呢？加open-type="reLanuch"，对应uni.reLanuch,关闭所有页面，打开到应用内的某个页面。uni.navigateTo(OBJECT) | uni-app官网。这样就可以打开tabBar页面了。

记忆方式：open-type默认是navigate，什么都不设置就是navigate；另外就是reLanuch（设置tabBar）；由于switchTab路径不能携带参数，所以干脆就reLanuch（路径可携带参数）。

使用reLanuch，在A页面点击可以跳转到B页面，同时点击tabBar也可以打开B页面。

插播：学习git操作的网站：learn git branching。

相关推荐
江城开朗的豌豆4 分钟前
Vue 3.0真香！用了半年后我来告诉你为什么这么爽
前端·javascript·vue.js
七八书14 小时前
Vue3 组件通信全解析：从基础到进阶的实用指南
vue.js
用户38022585982414 小时前
vue3源码解析：模块总览
vue.js
等一个晴天丶15 小时前
element-ui elemant-plus el-tree展开按钮变成加减号
vue.js
HelloWord15 小时前
从零到一搭建vue3+ts项目
前端·vue.js
会敲代码的柯基16 小时前
vue3和elementPlus里配置多语言切换vue-i18n
vue.js
独立开阀者_FwtCoder16 小时前
Nginx 通过匹配 Cookie 将请求定向到特定服务器
java·vue.js·后端
coding丨17 小时前
自制微信小程序popover菜单，气泡悬浮弹窗
前端·javascript·vue.js
北凉温华19 小时前
Vue 3 + AntV X6 实现流程编辑功能
前端·vue.js
独立开阀者_FwtCoder19 小时前
从卡顿到丝滑，AI 应用体验跃升的幕后推手是它！
前端·vue.js·面试
热门推荐
01Coze扣子平台完整体验和实践（附国内和国际版对比）02DeepSeek各版本说明与优缺点分析03KGG转MP3工具|非KGM文件|解密音频04扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解05零代码入门 | Coze——让大模型接入自己的数据库06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07AI Agent | Coze 插件使用指南：从功能解析到实操步骤08扣子空间的使用教程与大模型技术思考09YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】10ADS仿真低噪声放大器学习笔记