UniApp 是什么

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到 iOS、Android、Web (响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。

不清楚与 vue 的依赖关系,不敢随便写 vue 呀。看看吧

前端框架 基于Vue 开发规范同微信小程序 同一套代码编译多端 开发效率高 开发成本低 学习成本低 支持npm与自定义组件

生命周期

应用的生命周期

uni-app 支持如下应用生命周期函数:

函数名 说明
onLaunch uni-app 初始化完成时触发(全局只触发一次)
onShow uni-app 启动,或从后台进入前台显示
onHide uni-app 从前台进入后台
onError uni-app 报错时触发
onUniNViewMessage nvue 页面发送的数据进行监听,可参考 nvue 向 vue 通讯
onUnhandledRejection 对未处理的 Promise 拒绝事件监听函数( 2.8.1+)
onPageNotFound 页面不存在监听函数
onThemeChange 监听系统主题变化

注意:

  • 应用生命周期仅可在App.vue中监听,在其它页面监听无效。
  • onlaunch 里进行页面跳转,如遇白屏报错,请参考...

页面生命周期

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

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

页面生命周期还有一些说明,没有复制过来。太长了,占篇幅,自己去看吧。官网链接

组件的生命周期

uni-app 组件支持的生命周期,与 vue 标准组件的生命周期相同。这里没有页面级的 onLoad 等生命周期:

函数名 说明 平台差异说明 最低版本
beforeCreate 在实例初始化之后被调用。详见
created 在实例创建完成后被立即调用。详见
beforeMount 在挂载开始之前被调用。详见
mounted 挂载到实例上去之后调用。详见 注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue 官方文档
beforeUpdate 数据更新时调用,发生在虚拟 DOM 打补丁之前。详见 仅 H5 平台支持
updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。详见 仅 H5 平台支持
beforeDestroy 实例销毁之前调用。在这一步,实例仍然完全可用。详见
destroyed Vue 实例销毁后调用。调用后, Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。详见

元素支持的事件

// 事件映射表,左侧为 WEB 事件,右侧为 ``uni-app`` 对应事件
    {
        click: 'tap',
        // 触摸开始
        touchstart: 'touchstart',
        // 触摸移动
        touchmove: 'touchmove',
        // 触摸被打断(电话,弹窗提示等...
        touchcancel: 'touchcancel',
        // 触摸结束
        touchend: 'touchend',
        // 被触摸
        tap: 'tap',
        // 长时间触摸
        longtap: 'longtap', // **推荐使用longpress代替
        input: 'input',
        change: 'change',
        submit: 'submit',
        blur: 'blur',
        focus: 'focus',
        reset: 'reset',
        confirm: 'confirm',
        columnchange: 'columnchange',
        linechange: 'linechange',
        error: 'error',
        scrolltoupper: 'scrolltoupper',
        scrolltolower: 'scrolltolower',
        scroll: 'scroll'
    }

tap 被触摸,和 click 被点击事件 在 h5 仅触发触摸。而在 app 都会被触发,所以一般仅使用其中一个 tap.

条件编译

条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。

写法:以 #ifdef 或 #ifndef 加 %PLATFORM% 开头,以 #endif 结尾。

  • #ifdef : if defined 仅在某平台存在
  • #ifndef : if not defined 除了某平台均存在
  • %PLATFORM%:平台名称
条件编译写法 说明
#ifdef APP-PLUS 需条件编译的代码 #endif 仅出现在 App 平台下的代码
#ifndef H5 需条件编译的代码 #endif 除了 H5 平台,其它平台均存在的代码
#ifdef H5 || MP-WEIXIN 需条件编译的代码 #endif 在 H5 平台或微信小程序平台存在的代码(这里只有||,不可能出现&&,因为没有交集)

%PLATFORM% 可取值如下:

平台
APP-PLUS App
APP-PLUS-NVUE 或 APP-NVUE App nvue
H5 H5
MP-WEIXIN 微信小程序
MP-ALIPAY 支付宝小程序
MP-BAIDU 百度小程序
MP-TOUTIAO 字节跳动小程序
MP-QQ QQ 小程序
MP-360 360 小程序
MP 微信小程序/支付宝小程序/百度小程序/字节跳动小程序/QQ 小程序/360 小程序
QUICKAPP-WEBVIEW 快应用通用(包含联盟、华为)
QUICKAPP-WEBVIEW-UNION 快应用联盟
QUICKAPP-WEBVIEW-HUAWEI 快应用华为

支持的文件

  • .vue
  • .js
  • .css
  • pages.json
  • 各预编译语言文件,如:.scss、.less、.stylus、.ts、.pug

注意:

  • 条件编译是利用注释实现的,在不同语法里注释写法不一样, js 使用 // 注释、css 使用 /* 注释 */、vue/nvue 模板里使用 <!-- 注释 -->
  • 条件编译 APP-PLUS 包含 APP-NVUE 和 APP-VUE , APP-PLUS-NVUE 和 APP-NVUE 没什么区别,为了简写后面出了 APP-NVUE ;

同时还有目录的条件的编译,及一些注意事项

flex

官方推荐使用 flex 进行页面的布局,以适应多端。

我这里

专有术语:

  • flex container: flex 容器
  • flex item: flex 项目(元素)
  • flex direction: 布局方向

主要属性

不完全, 仅记录了感兴趣的部分。同时这些属性, 这里也记录了一些常用部分

对于轴

  • flex-direction 控制元素的排列方式
  • justify-content 控制元素在主轴的对齐方式
  • align-items 设置元素在交叉轴的对齐方式
  • align-content 设置轴线的对齐方式(主要用于元素换行后的多个轴线

对于其子元素

  • order 设置元素的排序顺序,默认都是 0 ,由小至大。
  • flex-grow 控制元素的放大比例(拉伸至所占的空间占比
  • flex-shrink 控制元素的缩小比例 (默认为 1 , flex 在不换行时,内容长度超出本身时会缩放子元素
  • flex-basis 设置元素自身固定或自动空间的占比,(上面的缩放的元素,会影响其他元素(如 flex-grow: 1; 会时元素占据所有剩余空间)此时属性接收一个 数值,放大或缩小元素自身)
  • align-self 控制元素自身在交叉轴的位置,会覆盖父级align-items

相关推荐:

来自系列:uni-app 开始

分类 前端下文章:

微信小程序开发 days1 关注点:文件结构,json配置文件, 模板语法

小程序开发学习笔记 days2。 关注点:view, text, rich-text, button, image, navigator, icon, swiper, radio, checkbox

小程序学习笔记 days3。 关注点:生命周期,自定义组件

小程序学习笔记 days4。 关注点:scroll-view, Promise

css3 选择器,背景定义(定位), 盒子定位,弹性布局,栅格系统。还有一些常用的 css 属性。

更多...

aid 加一试试->

评论([[comments.sum]])

发表

加载更多([[item.son.length - 2]])...

发表

2020-11 By Hchuan.

flask & bootstrap-flask

© 2021 HChuan. All rights reserved.

随机占位图来自:fghrsh

互联网ICP备案号:蜀ICP备2020031846号