uniapp-基础入门(更新中)_uniapp 菜鸟教程

目录

一、外部封装js方法

二、注册组件 

1.局部注册

2.全局注册

三、页面跳转

1.uni.navigateTo

2.uni.redirectTo

3.uni.reLaunch

4.uni.switchTab

四、生命周期 

---

一、外部封装js方法

当多个文件使用同一个方法时，通过在外部封装js方法，避免在每个页面重复写一遍。

首先在外部做一个封装：

根目录/文件夹名/文件名.js
export default function getDate(){
	let date = new Date();
	let year = date.getFullYear();
	let mounth = date.getMonth() + 1; //+1 因为是从0开始的，所以月份+1
	let day = date.getDate();
	let hour = date.getHours(); //小时
	let min = date.getMinutes(); //分钟
	let sec = date.getSeconds(); //秒
	let str =year + "-" + mounth + "-" + day + " " + hour + ":" + min + ":" + sec;
	return str
}
export function getTime(){
	let date = new Date();
	let year = date.getFullYear();
	let mounth = date.getMonth() + 1; //+1 因为是从0开始的，所以月份+1
	let day = date.getDate();
	let hour = date.getHours(); //小时
	let min = date.getMinutes(); //分钟
	let sec = date.getSeconds(); //秒
	let str =year + "-" + mounth + "-" + day;
	return str
}

在文件名.vue中使用：

<template>
	<view>
		<view >{{getDate1}}</view>
		<view >{{getTime1}}</view>
	</view>
</template>
<script>
// import getDate from '../../public/Date.js'
// import {getTime} from '../../public/Date.js'
import getDate,{getTime} from '../../public/Date.js'
export default {
	data() {
		return {
			getDate1:getDate(),
			getTime1:getTime()
		};
	},
};
</script>

• 默认导出 export default 
• 如果是默认导出，只能使用一次，export default
• 如果想导出多个，可以使用按需导出，export
• 在vue中使用的话（导入），如果是默认 import 引入的名字 from 文件路径
• 在vue中使用的话（导入），如果是按需 import {引入的名字,引入的名字} from 文件路径

二、注册组件 

1.局部注册

2.全局注册

首先在外部做一个封装：

根目录/components/文件名.vue
<template>
	<view class="Navigation">
		<text>导航栏</text>
	</view>
</template>

然后在main.js中注册全局组件：

//全局注册组件 import 自定义名称 from '路径'
import Navigation from './components/Navigation.vue'
Vue.component('Navigation',Navigation)

最后在文件名.vue中使用：

<Navigation></Navigation>

三、页面跳转

1.uni.navigateTo

// 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
uni.navigateTo({
        url: '/pages/mine/mine'
});

2.uni.redirectTo

// 关闭当前页面，跳转到应用内的某个页面。 删除一个页
uni.redirectTo({
       url: '/pages/mine/mine'
});

3.uni.reLaunch

// 关闭所有页面，打开到应用内的某个页面。 删除所有页
uni.reLaunch({
    url: '/pages/mine/mine'
});

4.uni.switchTab

// 跳转到底部tabbar页
uni.switchTab({
    url: '/pages/mine/mine'
});

四、生命周期