百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

uni-app入门理论知识 uni-app实例教程

liuian 2024-12-22 19:35 37 浏览

uni-app是啥？

Uni-app 是一个使用Vue.js 开发跨平台应用的前端框架。

对技术人员来说而且：不用学那么多的平台开发技术、研究那么多的前端框架，学会基于vue的uni-app就够了。

对公司而言：更低成本，覆盖更多用户，uni-app 是高效利器。


组件标签靠近微信小程序规范

uni-app 使用vue的语法+小程序的标签和API。

注意：不能使用HTML标签，也不能用js对dom进行操作

接口能力（JS API）靠近微信小程序规范，但需将前缀wx替换为uni。

数据绑定及时间处理靠近vue.js 规范，同时补充了App及页面的生命周期。

为兼容多端运行，建议使用flex布局进行开发。

目录结构
一个uni-app工程，默认包含如下目录及文件：

pages.json：文件用来对uni-app进行全局配置，决定页面文件的路径、窗口表现、设置多tab等。
manifest.json：配置应用名称、appid、logo、版本等打包信息。
App.vue：应用配置，用来配置App全局样式以及监听应用的生命周期。
main.js：Vue初始化入口文件
static目录：存放应用引用静态资源（如图片、视频等）的地方，注意：静态资源只能存放于此
pages目录：业务页面文件存放目录
components目录：组件文件存放目录

编译到任意平台时，static 目录下的文件均会被完整打包进去，且不会编译。非 static 目录下的文件（vue、js、css 等）只有被引用到才会被打包编译进去。

static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。

css、less/scss 等资源不要放在 static 目录下，建议这些公用的资源放在自建的 common 目录下。

尺寸单位

uni-app支持通用css 单位包括：px、rpx。

响应式单位upx和rpx是动态宽度单位。

很多开发者对响应式单位太依赖了，其实按需使用吧。一般情况下高度和字体大小不应该根据屏幕宽度变动的，除非你需要。

只有当你需要某元素的单位要根据屏幕宽度大小变化时，才需要rpx 这类的动态宽度单位。

开发环境和生产环境

process.env.NODE_ENV === 'production' 表示生产环境。

判断平台

条件编译

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

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

  • #ifdef：if defined 仅在某平台存在
  • #ifndef：if not defined 除了某平台均存在
  • %PLATFORM%：平台名称


路由

Uni-app 页面路由为框架统一管理，开发者需要在pages.json 里配置每个路由的路径及页面样式。类似小程序在app.json 中配置页面路由一样。

页面生命周期

不论是app 还是小程序，生命周期是非常重要的知识。

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

onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为object（用于页面传参）
onShow 监听页面显示
onReady 监听页面初次渲染完成
onHide 监听页面隐藏
onUnload 监听页面卸载
onPullDownRefresh 监听用户下拉动作
onReachBottom 页面上拉触底事件的处理函数
onShareAppMessage 用户点击右上角分享 微信小程序
onPageScroll 监听页面滚动
onTabItemTap 当前是 tab 页时，点击 tab 时触发。

相关推荐

赶紧收藏!编程python基础知识，本文给你全部整理好了

想一起学习编程Python的同学，趁我粉丝少，可以留言、私信领编程资料~Python基础入门既然学习Python，那么至少得了解下这门编程语言，知道Python代码执行过程吧。Python的历...

创建绩效改进计划 (PIP) 的6个步骤

每个经理都必须与未能达到期望的员工抗衡，也许他们的表现下降了，他们被分配了新的任务并且无法处理它们，或者他们处理了自己的任务，但他们的行为对他人造成了破坏。许多公司转向警告系统，然后在这些情况下终止。...

PI3K/AKT信号通路全解析:核心分子、上游激活与下游效应分子

PI3K/AKT/mTOR（PAM）信号通路是真核细胞中高度保守的信号转导网络，作用于促进细胞存活、生长和细胞周期进程。PAM轴上生长因子向转录因子的信号传导受到与其他多条信号通路的多重交叉相互作用的...

互联网公司要求签PIP，裁员连N+1都没了?

2021年刚画上句号，令无数互联网公司从业者闻风丧胆的绩效公布时间就到了，脉脉上已然炸了锅。阿里3.25、腾讯二星、百度四挡、美团绩效C，虽然名称五花八门，实际上都代表了差绩效。拿到差绩效，非但不能晋...

Python自动化办公应用学习笔记3—— pip工具安装

3.1pip工具安装最常用且最高效的Python第三方库安装方式是采用pip工具安装。pip是Python包管理工具，提供了对Python包的查找、下载、安装、卸载的功能。pip是Python官方提...

单片机都是相通的_单片机是串行还是并行

作为一个七年的从业者，单片机对于我个人而言它是一种可编程的器件，现在长见到的电子产品中几乎都有单片机的身影，它们是以单片机为核心，根据不同的功能需求，搭建不同的电路，从8位的单片机到32位的单片机，甚...

STM32F0单片机快速入门八 聊聊 Coolie DMA

1.苦力DMA世上本没有路，走的人多了，便成了路。世上本没有DMA，需要搬运的数据多了，便有了DMA。大多数同学应该没有在项目中用过这个东西，因为一般情况下也真不需要这个东西。在早期的单片机中...

放弃51单片机，直接学习STM32开发可能会面临的问题

学习51单片机并非仅仅是为了学习51本身，而是通过它学习一种方法，即如何仅仅依靠Datasheet和例程来学习一种新的芯片。51单片机相对较简单，是这个过程中最容易上手的选择，而AVR单片机则更为复杂...

STM32串口通信基本原理_stm32串口原理图

通信接口背景知识设备之间通信的方式一般情况下，设备之间的通信方式可以分成并行通信和串行通信两种。并行与串行通信的区别如下表所示。串行通信的分类1、按照数据传送方向，分为：单工：数据传输只支持数据在一个...

单片机的程序有多大?_单片机的程序有多大内存

之前一直很奇怪一个问题，每次写好单片机程序之后，用烧录软件进行烧录时，能看到烧录文件也就是hex的文件大小：我用的单片机芯片是STM32F103C8T6，程序储存器（flash）只有64K。从...

解析STM32单片机定时器编码器模式及其应用场景

本文将对STM32单片机定时器编码器模式进行详细解析，包括介绍不同的编码器模式、各自的优缺点以及相同点和不同点的应用场景。通过阅读本文，读者将对STM32单片机定时器编码器模式有全面的了解。一、引言...

两STM32单片机串口通讯实验_两个32单片机间串口通信

一、实验思路连接两个STM32单片机的串口引脚，单片机A进行发送，单片机B进行接收。单片机B根据接收到单片机A的指令来点亮或熄灭板载LED灯，通过实验现象来验证是否通讯成功。二、实验器材两套STM32...

基于单片机的智能考勤机设计_基于51单片机的指纹考勤机

一、设计背景随着科技水平的不断发展，在这么一个信息化的时代，智能化信息处理已是提高效率、规范管理和客观审查的最有效途径。近几年来，国内很多公司都在加强对企业人员的管理，考勤作为企业的基础管理，是公司...

STM32单片机详细教学(二):STM32系列单片机的介绍

大家好，今天给大家介绍STM32系列单片机，文章末尾附有本毕业设计的论文和源码的获取方式，可进群免费领取。前言STM32系列芯片是为要求高性能、低成本、低功耗的嵌入式应用设计的ARMCortexM...

STM32单片机的 Hard-Fault 硬件错误问题追踪与分析

有过单片机开发经验的人应该都会遇到过硬件错误（Hard-Fault）的问题，对于这样的问题，有些问题比较容易查找，有些就查找起来很麻烦，甚至可能很久都找不到问题到底是出在哪里。特别是有时候出现一次，后...

一周热门
最近发表
标签列表