Web前端----学习uniapp的第二天

此文章是对uniapp进行的一些基础的学习。

---

前言

随着计算机的不断发展，Web前端这门技术也越来越重要，很多人都开启了前端的学习，本篇文章就是简单的写了一下uniapp的语法，用来对uniapp进行基础的学习。

---

一、uni-app是什么

uni-app是一个使用Vue-JS开发所有前端应用的框架，开发者编写一套代码，可发布到IOS、Android、Web（响应式）、以及各种小程序等多个平台。

二、在外部封装JS的方法

在我们平常的时候，有很多文件的使用，同一个方法时，需要在每个页面都需要写入一遍。

代码示例如下：

<view class="">{{timeDate1}}</view>   
methods: {
	getTime() {
			    let date = new Date()
			    let year = date.getFullYear()
			    let mounth = date.getMonth()
			    let day = date.getDate()
			    let time = date.getHours()
			    let min = date.getMinutes()
			    let sec = date.getSeconds()
			    let str = year + '-' + mounth +'-' + day + ' ' + time +':' + min + ':' + sec
			    return str
		}	
}

然后我们就需要在外部做一个封装，根目录/utils/文件名.js

默认导出 export default

1、如果是默认导出，只能使用一次 export default

2、如果你想导出多个的话，可以使用按需导出export

3、在.vue中使用的话如果是默认导出的话，就import引入的名字，from 文件路径

4、在.vue中使用的话，如果是按需导出的话，就import{引入的名字，引入的名字} from 文件路径

代码示例如下：

export default function getDate(){
	let date = new Date()
	let year = date.getFullYear()
	let mounth = date.getMonth()
	let day = date.getDate()
	let time = date.getHours()
	let min = date.getMinutes()
	let sec = date.getSeconds()
	let str = year + '-' + mounth +'-' + day + ' ' + time +':' + min + ':' + sec
	return str
}

export  function getTime(){
	let date = new Date()
	let year = date.getFullYear()
	let mounth = date.getMonth()
	let day = date.getDate()
	let time = date.getHours()
	let min = date.getMinutes()
	let sec = date.getSeconds()
	let str = year + '-' + mounth +'-' + day 
	return str
}


export  function getYear(){
	let date = new Date()
	let year = date.getFullYear()
	let mounth = date.getMonth()
	let day = date.getDate()
	let time = date.getHours()
	let min = date.getMinutes()
	let sec = date.getSeconds()
	let str = year
	return str
}

在.vue中使用的话，代码示例如下：

<template>
	<!-- template 这里是模板的意思 -->
	<view class="content">
		<!-- 2022-7-2 9:17:56 -->
		<view class="">{{timeDate1}}</view>   
		<!-- 2022-7-2  -->
		<view class="">{{getTime1}} </view>
		<!-- 2022 -->
		<view class="">{{getYear1}}</view>
	</view>
	
</template>
<script>
	// import 引入的名字 from 文件路径
	// import timeDate from '../../utils/timeDate.js'
	// 按需导入
	// import {getTime} from '../../utils/timeDate.js'
	// 简写成一行 
import timeDate,{getTime,getYear}  from '../../utils/timeDate.js'
export default {
	name: 'index',
	data() {
		return {
			aaa: 'hello', // 默认放到vue实例上
			title: 'Hello',
			title1: 'hello world',
			num: 5,
			flag: false,
			timeDate1:timeDate(),
			getTime1:getTime(),
			getYear1:getYear()
		}
	},

三、页面的跳转

1.1 uni.navigateTo

保留当前的页面，跳转到应用的某个页面，使用uni.navigateBack可以返回到原来的页面。

代码示例如下：

uni.navigateTo({
    url: '/pages/mine/mine'
});

 

 

1.2 uni.redirectTo

关闭当前的页面，跳转到应用的某个页面，然后删除这个页面。

代码示例如下：

uni.redirectTo({
    url: '/pages/mine/mine'
});

 

 

1.3uni.reLaunch

关闭所有的页面，打开到应用内的某个页面，然后删除所有的页面。

代码示例如下：

uni.reLaunch({
    url: '/pages/mine/mine'
});

1.4 uni.switTab 

跳转到底部tabbar页面

代码示例如下：

uni.switchTab({
    url: '/pages/mine/mine'
});

四、生命周期

什么是生命周期：生命周期就是每到一个阶段就要做不同的事情，生命周期也是一样的，每到一个阶段就会执行不同的钩子函数（vue的生命周期是指vue从创建到销毁的整个过程，而在vue的生命过程中会用到执行很多回调函数，这些函数叫钩子函数）

到了页面中也一样 比如页面从开始创建 =》销毁 会执行哪些生命周期的钩子函数

下面是生命周期的一个表格

函数名	说明	执行时机	使用场景
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例	页面初始进入	只在初始化时使用一次
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面	每次进入	需要每次更新数据
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发	页面初始进入onLoad、onShow之后	更多根据搭配插件使用
onHide	监听页面隐藏	每次离开	更多于 记录一些数据
onUnload	监听页面卸载	最后离开	卸载一些监听事件

五、事件

事件有很多，比如我们点击按钮就会进行跳转，这时候就需要给一个按钮绑定点击事件。

1.1点击事件

语法 ：v-on:click="方法名" 方法名一定是在methods存在这的 方法

代码示例如下：

<button type="default" v-on:click="add">让数字+1</button>
// v-on: 可以简写成 @
<button type="default" @click="reduce">让数字-1</button>

如果要实现一个加减的功能，代码示例如下：

<template>
	<view>
		<button type="default" @click="reduce">让数字-1</button>
		<button type="default" @click="editStatuss">这是一句话</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:1,
			}
		},
        methods: {
			add(){
				// console.log('让数字+1');
				this.num = this.num +  1
			},
			reduce(){
				this.num = this.num - 1
			},
        }
}

1.2 input事件

input 顾名思义就是 input标签上的事件 记得只有一些输入的标签才会有这些功能

                                每次在input上输入一次 就会执行这个方法

代码示例如下：

<input v-model="name" @input="inputName" type="text" placeholder="请输入你的姓名"  style="background: skyblue;"  />
    
inputName(e){
			// e/event : 事件对象参数
			console.log(e)
}

六、数据双向绑定

也是需要给一些输入的功能进行一下双向绑定，比如说input、textarea

代码示例如下：

<input v-model="name" @input="inputName" type="text" placeholder="请输入你的姓名"  style="background: skyblue;"  />

name:'我叫名字'

只需要加上 v-model ，主要数据发生变化就会影响视图 视图变化就会影响数据 所以是双向的意思

如果想要获取值 只需要 this.定义的变量就可以拿到

更详细的，在我的老师那里：uniapp第二天详细

---

总结

以上就是对uniapp的学习，感谢大家的观看。