前端学习--uniapp部分

前端学习–uniapp部分

前言

uniapp官网：https://uniapp.dcloud.net.cn/

推荐一个网站（一个字绝！）：https://www.qingnian8.com/

1.组件

uniapp中的基础组件与Vue2中的组件有一些区别，比如在template标签中不再使用div标签，而是使用view标签。想了解其他常用组件请前往官网中的组件板块（在页面上方导航栏），并在该板块下查阅基础组件列表（在页面最右侧导航栏中）。

注：接下来老师讲的view、icon、text、scroll-view、swiper、image、video、audio、表单组件等都在基础组件列表中找到，直接点击跳转到对应页面，使用方法就在下面（下拉滚动条）。

下面是关于表单组件的实际应用：

<template>
	<view>
		<!-- 携带form中的数据触发submit事件 -->
		<form @submit="onSubmit">
			<view class="row">
				<!-- 这个name是为了能在控制台打印出来数据 -->
				<input type="text" name="username" placeholder="输入姓名..." />
			</view>
			<view class="row">
				<textarea name="content" placeholder="输入内容..."></textarea>
			</view>
			<radio-group name="sex">
				<label>
					<radio value="男" /><text>男</text>
				</label>
				<label>
					<radio value="女" /><text>女</text>
				</label>
			</radio-group>
			<picker :range="array" :value="index" @change="change" name="hobby">
				<view>爱好：{{array[index]}}</view> 
			</picker>
			<view>
				<button form-type="submit" type="primary">提交</button>
				<button form-type="reset">重置</button>
			</view>
			
		</form>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				array: ['唱歌', '跳舞', '吃饭'],
				index:0
			}
		},
		methods: {
			onSubmit(e){
				console.log(e)
			},
			change(e){
				this.index=e.detail.value
			}
		}
	}
</script>

<style lang="scss">
.row{
	margin: 10rpx;
	border: 1px solid darkgray;
}
</style>

2.tabBar

• 在实际开发中导航菜单是必不可少的功能，在uniapp中我们通过配置tabBar实现这一功能。再次打开官网点击全局文件板块（在页面上方导航栏），然后点击pages.json页面路由（在页面最左侧导航栏中），找到配置项列表（在页面中间下拉滚动条）。

• 导航总是伴随着图标，阿里巴巴矢量图标库：https://www.iconfont.cn/

• 注：tabBar的使用方法也在对应页面的下方（下拉滚动条即可查看）。

• 存在导航页面的问题（在官网tabBar常见问题中）

  官网给出的解决方案是在navigator标签中加上open-type="switchTab"，因为open-type的值navigate与redirect不支持tabBar页面跳转。

3.Vue

1.Vue的基础知识

这里开始讲解vue的知识点，不过仅仅是大概的介绍一下，并没有过深的讲解（个人认为只适合复习）；建议去我的博客主页看一下Vue的笔记，推荐的配套课程是B站尚硅谷天禹老师的Vue课程。下面笔记内容重点。

2.组件的引入

在uniapp中采用easycom自动导入组件，不再像传统Vue需要引入和注册组件，只需要建立对应文件夹。

路径规范如下（文件名不可乱起）：

• 安装在项目根目录的components目录下，路径为components/组件名称/组件名称.vue
• 安装在uni_modules下，路径为uni_modules/插件ID/components/组件名称/组件名称.vue

3. .sync 修饰符

<template>
	<view>
		<!-- 父组件 -->
		<!-- 最原始的自定义事件 -->
		<!-- <myitem :state="mystate" @stateEnv="onstateEnv"></myitem> -->
		<!-- 这步只是为了好理解 -->
		<!-- <myitem :state="mystate" @update:state="state"></myitem> -->
		{{mystate}}
		<!-- 其实只要记住:state.sync与update:state配对使用就好 -->
		<myitem :state.sync="mystate"></myitem>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mystate:false
			}
		},
		methods: {
			// 因为已经自定事件了
			/* state(e){
				this.mystate=e
				console.log(this.mystate)
			} */
		}
	}
</script>

<!-- myitem组件 -->
<template>
	<view>
		<!-- 子组件 -->
		<button @click="onClick">
			点击
		</button>
	</view>
</template>

<script>
	export default {
		props:['state'],
		name:"myitem",
		data() {
			return {
				
			};
		},
		methods:{
			onClick(){
				// console.log(e)
				this.mystate=!this.mystate
				// 使用.sync一定要搭配update:
				this.$emit("update:state",this.mystate)
				
			}
		}
	}
</script>

4.生命周期

在uniapp中直接使用传统Vue的生命周期即可；网络请求推荐使用生命周期中的created（速度较快）；如果想在DOM体渲染完毕之后进行操作，推荐使用mounted；觉得区分比较麻烦可以直接写在mounted。

简单介绍一下小程序的生命周期（了解即可）：

<!-- App.vue文件 -->
<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
		created() {
			console.log('App created')
		}
	}
</script>

//正常Vue文件
		methods: {
			...
		},
		created() {
			console.log('created')
		},
		mounted() {
			console.log('mounted')
		},
		onLoad() {
			console.log('onLoad')
		}

5.API

uniapp中的API和传统Vue中的API相比有很大的不同移步到官网进行查看，查看位置与使用方法（官网也有，在页面下方）如下所示：

1.页面与路由

		methods: {
			onClickOne(){
				// 这里即将跳转的页面是一个tabBar页面，所以不用navigateTo
				// 需要注意的是switchTab不能传参
				uni.switchTab({
					url: "/pages/about/about"
				});
			},
			onClickTow(){
				uni.navigateTo({
					// 如果传递多个参数用&符号
					url: "/pages/demo_api/demo_api?id=1&name=uniapp"
				});
			},
			// 进行参阅，$route用来读路由，$router用来写路由
			mounted() {
			console.log(this.$route.query.name)
			}
		}

注：页面栈getCurrentPages()很重要；它的使用场景是想知道一共打开了多少页，用它来监听；具体使用方法移步到官网，它的位置在API--页面与路由--页面，也可以直接在右侧搜索文档中直接搜索。

• 解決小程序中不支持vue-router的问题：

  因为小程序不支持vue-router，所以当我们想获取参数的时候，要采用onLoad()和getCurrentPages()搭配使用。

  		onLoad(e) {
  			// 通过getCurrentPages()来获取所有页面对象
  			console.log(getCurrentPages())
  		}
  

  注：如果一定要使用vue-router来获取参数的话，只能下载插件。

2.界面

• 页面交互效果在官网中的API--界面--交互反馈，想了解更过内容请前往查看。

  		methods: {
  			onClick(){
  				// 这里即将跳转的页面是一个tabBar页面，所以不用navigateTo
  				uni.showToast({
  					title:"跳转成功",
  					icon:"success",
  					mask:true,
  				});
  				setTimeout(()=>{
  					uni.switchTab({
  						url: "/pages/about/about"
  					});
  				},1000)
  			}
  		},
  

  注：uni.showLoading()需要在页面加载完成之后再添加的，所以要放在onLoad()生命钩子中。它的作用是显示 loading 提示框。

• 设置导航条的时候要仔细查看一下该API在什么情况（平台）下中才支持使用，以及它能在什么生命周期中使用；想了解更多内容请前往API--界面--设置导航条进行查看。

• tabBar中的iconfont不推荐使用，还是iconPath会好用一些；想了解更多内容请前往API--界面--设置TabBar进行查看。

3.网络

• request在官网中的API--网络--发起请求，想了解更过内容请前往查看。

• 测试接口：

  • 小狗照片：https://dog.ceo/api/breeds/image/random
  • 猫咪照片：https://api.thecatapi.com/v1/images/search?limit=1
  • 土味情话：https://api.uomg.com/api/rand.qinghua
  • 测试接口（国外的网站）：https://jsonplaceholder.typicode.com/posts
  • 测试接口的使用手册：https://jsonplaceholder.typicode.com/

• uni.request()中的method有post和get两种请求方式。

4.数据缓存

• 在官网中的API--数据缓存，想了解更过内容请前往查看；一般情况下使用同步的，异步的使用起来较为复杂。

  //同步使用，可以直接拿过来，不用try...catch...
  uni.setStorageSync('storage_key', 'hello');
  

• 推荐使用uni.removeStorage()和uni.removeStorageSync()；不推荐使用uni.clearStorage()和uni.clearStorageSync()，因为后者会把所有本地数据缓存都清理掉。