开心是星星
开心是星星

Vue-uniapp笔记

一、Pages生命周期

uni-app 支持如下页面生命周期函数：

函数名 说明 平台差异说明 最低版本
onInit 监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad 百度小程序 3.1.0+
onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例
onShow 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide 监听页面隐藏
onUnload 监听页面卸载
onResize 监听窗口尺寸变化 App、微信小程序、快手小程序
onPullDownRefresh 监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap 点击 tab 时触发，参数为Object，具体见下方注意事项 微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
onShareAppMessage 用户点击右上角分享 微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序、京东小程序
onPageScroll 监听页面滚动，参数为Object nvue暂不支持
onNavigationBarButtonTap 监听原生标题栏按钮点击事件，参数为Object App、H5
onBackPress 监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解 (opens new window)。支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。 app、H5、支付宝小程序
onNavigationBarSearchInputChanged 监听原生标题栏搜索输入框输入内容变化事件 App、H5 1.6.0
onNavigationBarSearchInputConfirmed 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。 App、H5 1.6.0
onNavigationBarSearchInputClicked 监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发） App、H5 1.6.0
onShareTimeline 监听用户点击右上角转发到朋友圈 微信小程序 2.8.1+
onAddToFavorites 监听用户点击右上角收藏 微信小程序 2.8.1+

  • 仅百度小程序基础库 3.260 以上支持 onInit 生命周期

  • 其他版本或平台可以同时使用 onLoad 生命周期进行兼容，注意避免重复执行相同逻辑

  • 不依赖页面传参的逻辑可以直接使用 created 生命周期替代

onLoad(获取参数,一次) – onShow(每次切换tabbar/回退都会触发)— created (也是一次,不能获取参数)– onReady(也是一次,,可以操作dom对象) - mounted(也是执行一次，只不过数据变更会再次触发)  

二、uniapp路由内置

vue-router 这个组件，已经内置，不需要自己手动集成

1：在pages目录下新建对应页面模板即可

2：它会自动创建好的页面模板注册到pages.json中。

3：然后我们可以在页面中或者tabbar去进行调整和转发

4：一种是标签的方式，一种是js的方式

open-type 默认是：navigate

保留当前页面，跳转到应用内的某个页面

特点是：在头部左上角有一个回退按钮

open-type 是：redirect

关闭当前页面，跳转到应用内的某个页面。

特点是：没有回退按钮。也没有tabbar。如果要离开就代表退出

一般用来：跳转登录，跳转注册。

open-type 是：switchTab

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

特点：如果pages.json的路径一旦使用到tabbar中，就只能使用switchTab

open-type 是：reLaunch

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

特点：它是navigate 的升级版本，因为在开发打开页面非常多，A–B–C–D–F。关闭历史步骤，类似退出页

open-type 是：navigateBack

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

特点是：自定回退，从哪里来回哪里去

open-type 有效值

值 JS方式 平台差异说明
navigate 对应 uni.navigateTo 的功能
redirect 对应 uni.redirectTo 的功能
switchTab 对应 uni.switchTab 的功能
reLaunch 对应 uni.reLaunch 的功能 字节跳动小程序与飞书小程序不支持
navigateBack 对应 uni.navigateBack 的功能
exit 退出小程序，target="miniProgram"时生效 微信2.1.0+、百度2.5.2+、QQ1.4.7+

三、UniApp和Vue-cli的开发注意事项

uniapp是改造vue，底层还是使用vue-cli做为脚手架。

认知uniapp：

1、uniapp不能去写div,span,只能用官方提供的组件标签或者自定义标签。

用view取代-div,h1 用text取代了span

2、uniapp不需要你安装组件，安装 vue，安装sass 、因为uniapp的hbuilderx会内置进去。你直接使用即可。

你在项目中压根看不到node_modules这个文件夹。

3、异步处理怎么办？

uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

4、组件的注册和使用呢?

  • 组件是视图层的基本组成单元。

  • 组件是一个单独且可复用的功能模块的封装。

  • 一个组件包括开始标签和结束标签，标签上可以写属性，并对属性赋值。内容则写在两个标签之内。

    • 根节点为