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()+1let day = date.getDate()let time = date.getHours()let min = date.getMinutes()let sec = date.getSeconds()let str = year + '-' + mounth +'-' + day + ' ' + time +':' + min + ':' + secreturn str
}export  function getTime(){let date = new Date()let year = date.getFullYear()let mounth = date.getMonth()+1let day = date.getDate()let str = year + '-' + mounth +'-' + dayreturn 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) //(组件标签名，组件名)

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

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

vue生命周期及双向绑定
这篇文章不是原创,看了其他人的分析贴,记录下自己学到的.本篇主要记录一下vue内部流程,以及双向绑定原理.Vue的可爱之处在于他的双向绑定及Virtual DOM的思想. vue内部流程如图所示,实 ...
vue-router路由、mixin混入、vue-resource、axios、计算属性watch、moment.js、vuex、vue-cli、数据双向绑定、搭建vue环境、vue实例、配置启动项
路由vue-router介绍: // 1.前端路由核心:锚点值的改变,根据不同的锚点值,渲染指定dom位置的不同数据.// 2.vue中,模板数据不是通过ajax请求的,而是调用函数获取到模板内容// ...
uniapp02 封装方法，页面跳转，页面的生命周期，@click，@input，v-model、封装组件、tabbar
一,封装方法默认导出 export default 1. 如果是默认导出只能使用一次 export default 2. 如果你想导出多个可以使用按需导出 export 3 ...
微信小程序自定义组件中获取app实例的值，生命周期与页面的生命周期执行先后顺序
调试基本库:2.12.2 最近在接触微信小程序开发有这么一个需求,自定义组件需要给页面传一个app实例的参数, 总结: 1.自定义组件中data 不能直接获取app.globalData 2.通过自 ...
微信小程序详解——小程序的生命周期和页面的生命周期
我是一名安卓程序员,我们安卓中最明显的特征就是类具有生命周期.所以当开发小程序的时候,我自然而然的会先研究小程序的生命周期.在Android中是通过Application来管理安卓程序的生命周期,小程 ...
Asp.net2.0页面的生命周期(续）
以上就是Asp.net页面生命周期中的几个主要事件.每次我们请求一个Asp.net页面时,我们都经历着同样的过程:从初始化对象到销毁对象.通过了解Asp.net页面的内部运行机制,我相信大家在编写.调 ...
.Net页面的生命周期（ZZ）
1. 初始化:主要是执行Page的Init事件和OnIint方法. 2. 加载视图状态:主要是执行LoadViewState方法,就是从ViewState中获取上一次的状态 ...
ZT Web Control 开发系列(一) 页面的生命周期
http://www.cnblogs.com/joeliu/category/143125.html Page是WebForm编程基本元素,它从TemplateControl派生,而TemplateC ...
Asp.net2.0页面的生命周期
当一个获取网页的请求(可能是通过用户提交完成的,也可能是通过超链接完成的)被发送到Web服务器后,这个页面就会接着运行从创建到处理完成的一系列事件.在我们试图建立Asp.net页面的时候,这个执行 ...

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

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

最新文章

热门文章