uniapp的基本使用

工欲善其事必先利其器，使用uniapp开发就需要用到两个工具，HBuilderX以及微信开发者工具！

HBuilderX的下载地址：HBuilderX-高效极客技巧 

微信开发者工具下载地址：稳定版 Stable Build | 微信开放文档

工具已经准备好了！下面开始吧！

使用HBuilderX新建一个uniapp项目，文件-》新建-》项目

 

直接运行到浏览器即可，效果如下图：

 如何运行到微信开发者工具呢？

再打开微信开发者工具就可以看到效果了：

注意：

1、大家在运行到微信开发者工具的时候可能会报错，解决方案：微信开发者工具-》设置-》安全，将这个服务端口打开即可！

2、如果是第一次使用微信开发者工具，有一个路径需要填写：

 如何做呢？桌面上-》右键打开文件所在的位置-》把这个目录填写到HBuilderX中弹出的提示框中就可以了！

 接下来可以到pages.json文件中（pages.json文件可以配置页面路由、导航条、选项卡等页面类信息），pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

所以就来仔细看一下globalStyle属性！

 以上有需要注意的点：类型为HexColor的就只支持像这种十六进制的编码。如：#00CD66等。

首先使用使用navigationBarBackgroundColor属性，那现在我想改为一个红色，于是我修改：

 第二个属性：navigationBarTextStyle，只有两个值，white和black。我们将它设置为white。

 第三个属性：backgroundColor，默认情况下看不见，只有下拉的时候才看的到！所以就需要通过设置enablePullDownRefresh为true，才能够开启下拉。

 箭头所指的地方就是背景颜色，可以通过backgroundColor进行设置！于是我就设置背景颜色为紫色，看一下效果：

 接下来就是：backgroundTextStyle属性，有两个取值：dark和light

默认情况下是暗的！

 然后将backgroundTextStyle设置为light

 以下是navigationBarTitleText属性：

尽管改成了today，但是页面上依旧是uni-app，因为尽管了删掉全局的，但是每个页面还是有的！

 

 将style属性删掉即可

 二、创建页面和页面的配置

创建页面，首先要创建目录，然后创建vue文件即可！

以下就已经添加好了一个页面，如何直接运行这个页面呢？还是需要在pages.json文件修改！

也就是默认运行哪个页面，哪个页面的路径就需要放在最上面！

除了以上，还可以设置h5的样式：

设置h5的样式就是只在浏览器中有效，在微信开发者工具中没有效果的！

pullToRefresh是下拉刷新：可以指定它的颜色

三、tabbar

四、condition启动模式的配置

 那如何在微信开发者工具进入detail页面呢？

浏览器器中如何进入detail页面呢？

五、text组件的基本使用

text组件就相当于html中span标签，它是不换行的，如果需要换行可以拿view组件包裹它。

1、selectable属性

 2、space属性

 

六、view视图容器

 1、hover-class属性

默认：

鼠标点击：

2、hover-stop-propagation属性

<template>
	<view>
		<view class="box2" hover-class="box2_hover">
			<view class="box" hover-class="box_hover">
				这是一个容器盒子
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style>
	.box{
		width: 100px;
		height: 100px;
		background-color: #4CD964;
	}
	.box2{
		width: 200px;
		height: 200px;
		background-color:#F0AD4E;
	}
	.box_hover{
		width: 100px;
		height: 100px;
		background-color:#007AFF;
	}
	.box2_hover{
		width: 200px;
		height: 200px;
		background-color:#555555;
	}
</style>

 效果图：

 当我点击小的容器时，后面大的容器也会发生改变

 所以我们可以：在小容器中设置hover-stop-propagation值

 这样的话，点击小容器，大容器还是原本的颜色

 下面是hover-start-time和hover-stay-time属性：

 七、button组件

以下演示button组件的size、type、plain、disabled、loading等属性

 效果图：

 

 八、image组件

就是用来显示图片的 

 

代码如下：

效果图：

 九、uni中的样式

 rpx就是响应式px，比如你的字体如果是30px的话在不同的设备上都是30px，大小不会改变，如果是rpx的话，就会自动适应。

假设我们用30px：

 

无论选择什么尺寸，它的字体大小都是30px。

APP.vue中的样式为全局样式

 首先将局部样式去掉，添加一个全局样式：

 

效果图如下：

 如果该选择器有局部样式，就会变成它局部样式的颜色！

 

接下来就是使用字体图标：

如果想要在全局使用，就需要在App.vue文件中去导入

导入之后会报错：

原因：

 解决方案就是进入到iconfont.css文件中，加上以下的路径即可

 如何使用字体图标呢？

步骤是这样没错，但是我的图标就是出不来啊，咋办啊？？？

使用scss样式：

工具-》插件安装-》安装scss插件 

 

$uni-bg-color-byme其实是来自于uni.scss文件中

 

效果图：

 view组件中有text组件，给text组件设置样式：

十一、数据绑定

<template>
	<view>
		<view>{{title}}</view>
		<view>{{flag?'真的':'假的'}}</view>
		<view>{{3+2}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				flag:false
			}
		},
		onLoad() {
	
		},
		methods: {
	
		}
	}
</script>

<style>
</style>

 

<template>
	<view>
		<image :src="imageUrl"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageUrl:'../../static/微信图片_20211026174522.jpg'
			}
		},
		onLoad() {
	
		},
		methods: {
	
		}
	}
</script>

<style>
</style>

<template>
	<view>
		<!-- item表示arrlists中的每一项,i就是索引 -->
		<view v-for="(item,i) in arrlists" :key="item.id">
			序号:{{i}}名字:{{item.name}},年龄:{{item.age}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arrlists:[
					{id:1001,name:'小明',age:10},
					{id:1002,name:'小里',age:11},
					{id:1003,name:'小哈',age:12},
					{id:1004,name:'小百',age:15}
				]
			}
		},
		onLoad() {
	
		},
		methods: {
	
		}
	}
</script>

<style>
</style>

 效果图：

<template>
	<view>
		<button v-on:click="btnClick">按钮</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
	
		},
		methods: {
			btnClick(){
				console.log('你点了一下');
			}
		}
	}
</script>

<style>
</style>

 如果事件没有传参数，e就是事件的对象

 如果传了参数：

 如果既想传参数也想将事件对象传入：

十二、uni生命周期

uni中的生命周期分为两类，应用生命周期和页面生命周期

 

 运行应用，控制台会输出：

最小化浏览器，再回到这个界面：

 除了以上的应用生命周期函数，还有onError

 于是控制台就会报以下错误：

 

 十三、下拉刷新学习

页面生命周期函数：

 

 

 

 

 

 

十四、上拉加载

上图，距离底面两百的时候会触发该事件 

十五、发送get请求

 

 

 

十六、数据缓存

 

 

 小程序中：

接下来是获取数据：

 

 

 

十七、图片上传和预览

 

 

这样图片就可以直接显示出来了

十八、条件编译跨端兼容 

 

十九、两种方式导航跳转和传参

 

 因为message是tabBar页面，所以我们可以设置open-type属性为switchTab

 

 当open-type为redirect时，跳转到另外一个界面后会有下图所示红色正方形中的返回箭头，可以返回到上一个页面

普通跳转就不会有返回箭头，前一页就会被销毁

 

二十、组件的创建使用和生命周期函数

 

 

 

 

所以说，如果想操作dom，就在mounted函数中操作

v-if如果等于true，组件就存在，反之

 综上所述，初始化数据可以在created函数中，mounted中可以操作dom，

二十一、组件之间的通讯方式

 

 

 

 

兄弟组件之间的传值：

 

然后就可以在页面中直接使用了：

 

uni.$on注册一个全局事件，uni.$emit触发全局事件 

 二十二、uni组件库的基本使用

 以上内容已经全部讲完了，之后就开始做项目了！

项目开始：

一、创建项目和清理结构和配置基本外观

新建一个uniapp项目

 运行到微信小程序，但是报了如下错误：

TypeError: Cannot read property 'forceUpdate' of undefined

原因是在HBulider X中没有配置APPID

首先配置一下导航条顶部的样式：

 

接下来实现底部的tabBar：

我们在pages目录上，右键选择新建页面：

 

 这样我们就创建好了四个页面。

 然后就去配置tabBar：

 

选中之后的文字颜色指的是：

 接下来做一个轮播的图的效果：

图片来自于接口，所以我新建一个.net5的api接口