uni-app 封装js方、页面的生命周期、数据双向绑定、封装组件

1、在外部封装js方法

很多页面都会用到相同的方法，为了代码的复用，可以在外部封装相同的方法

在项目中创建一个utils目录，存放外部封装的js方法

 在utils目录下创建getDate.js文件

 export default function getDate(){      //默认导出
        let date = new Date()
        let year = date.getFullYear()
        let mounth = date.getMonth()+1
        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()+1
        let day = date.getDate()
        let str = year + '-' + mounth +'-' + day
        return str
}

默认导出 export  default

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

2. 如果你想导出多个 可以使用 按需导出   export   

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

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

在vue文件中使用

<template>
    <view class="content">
        <!-- 2022-8-2 19:50:56 -->
        <view class="">{{timeDate1}}</view>   
        <!-- 2022-8-2  -->
        <view class="">{{getTime1}} </view>
    </view>
    
</template>
<script>
    // import 引入的名字 from 文件路径
    // import getDate from '../../utils/timeDate.js'
    // 按需导入
    // import {getTime} from '../../utils/timeDate.js'
    // 简写成一行 
  import getDate,{getTime}  from '../../utils/timeDate.js'

  export default {
    data() {
        return {         
            title: 'Hello',              // 默认放到vue实例上
            timeDate1:getDate(),   
            getTime1:getTime()
        }
    },

2、页面跳转

（1）uni.navigateTo

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

（2）uni.redirectTo

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

（3）uni.reLaunch

// 关闭所有页面，打开到应用内的某个页面。 删除所有页
		methods: {
			toB() {
				uni.reLaunch({
					url:'/pages/index/index'   //跳转到index页面，删除其他所有页面
				})
			}
		},

（4）uni.switchTab

// 跳转到底部tabbar页
		methods: {
			toB() {
				uni.switchTab({
					url:'/pages/index/index'  
				})
			}
		},

3、页面的生命周期

        生命周期 ： 每到一个阶段就要做不同的事情 生命周期也一样 ：每到一个阶段 就执行 不同的钩子函数

页面的生命周期，从开始创建→销毁会执行页面的钩子函数

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

onLoad、onShow和onReady的执行：

1. onLoad：第一次创建页面执行

2. onShow：每次进入页面都会执行

3. onReady：页面加载完成执行一次

4、点击事件

语法：v-on:click="方法名" 方法名一定要在methods中声明

简写：@click="方法名"

案例：实现数字的加减

		<view>{{num}}</view>
		<view>
			<button type="default" @click="add">让数字+1</button>
			<button type="default" @click="reduce">让数字-1</button>
		</view>


        data() {
			return {
				num:1
            }
        }


		methods: {
			add(){
				this.num += 1
			},
			reduce(){
				this.num -= 1
			}
		}

5、input事件

        见名知意就是给input标签上的事件 记得只有一些输入的标签才会有这些功能，每次在input上输入一次，就会执行这个方法

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




        data() {
			return {
				name: 'Hello',
            }
        }，
		methods: {
			inputName(e){
			            // e/event : 事件对象参数
			            console.log(e)
			}
		}

 6、数据的双向绑定

        input、textarea等一些输入的功能需要数据双向绑定

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



        data() {
			return {
				name: 'Hello',
            }
        }，

 v-model可以双向绑定数据，数据改变，视图也会改变；相反，视图改变，数据也会改变

7、自定义tabbar导航

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页。

具体参考uniapp官网：uni-app官网 (dcloud.net.cn)

	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [{
			"pagePath": "pages/index/index",
			"text": "首页"
		}, {
			"pagePath": "pages/mine/mine",
			"text": "我的"
		}]
	},

8、封装组件

文件后缀为.vue的文件都是组件，组件文件统一放在components目录下

简单封装一个组件 Navigation.vue

<template>
	<view class="">
		<view class="nav flexC">
			我是一个导航栏
		</view>
	</view>
</template>
 

（1）局部注册

局部注册之前，在需要引用该组件的页面，导入你想使用的组件。

在index.vue中局部注册

<template>
	<view class="">
        // 3. 使用组件
		<Navigation></Navigation>
 
	</view>
</template>
 
<script>
    // 1. 引入组件
	import Navigation from '../../componets/Navigation.vue'
	export default {
        // 2.注册组件
		 components:{
			Navigation
		 },
	
	}
</script>

（2）全局注册

uni-app 支持配置全局组件，需在 main.js 里进行全局注册，注册后就可在所有页面里使用该组件。

在main.js文件中注册

//全局注册组件
import Navigation from './components/Navigation.vue'
Vue.component('Navigation',Navigation) //(组件标签名，组件名)

然后在页面中就可以直接使用组件啦！