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

一、uniapp和HBuilderX介绍

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

为什么要学习uniapp？

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

比较常用的平台如下

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

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

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

主题：绿柔、雅蓝、酷黑

二、

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。

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

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

使用

类似以前用的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官网

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

例如

效果

2.4.3 text 文本组件 行标签 span

text替换之前的span标签。

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

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

scroll-view | uni-app官网

滑动，左右滑动。

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

代码

		
			
				
					111
				
					111
				
					111
				
					111
				
					111
				
					111
				
			
		

样式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标签的使用

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

效果

效果：绿色的图变形了。

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

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

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

p8 8:15