uni-app知识点总结-程序员宅基地

技术标签: flutter  uni-app  

一.什么是uni-app?

Uni-app是一个跨平台开发框架,可以帮助开发者快速构建多端应用,包括Web、iOS、Android、H5、小程序等。Uni-app的特点是使用Vue.js作为开发语言,可以在不同的移动端平台上共享组件库和业务逻辑代码,大大提高了开发效率和代码重用率。同时,Uni-app提供了丰富的原生API和插件来实现更多功能。

二.uni-app的特点及优势

  1. 跨平台性: uni-app支持一套代码,同时运行在多个平台上,包括iOS、Android、H5、以及微信小程序等。这种跨平台性能够大大减少开发成本和时间,使开发者能够更快速地将应用推向不同的市场。

  2. 开发效率高: uni-app基于Vue.js框架,开发者可以使用熟悉的Vue.js语法进行开发,减少了学习成本和开发门槛。同时,uni-app提供了丰富的组件和模板,可以快速构建出各种复杂的界面和功能。

  3. 性能优秀: uni-app在性能上进行了优化,能够提供流畅的用户体验。它采用了原生渲染的方式,能够充分利用设备的硬件资源,提升应用的运行效率。

  4. 社区活跃: uni-app拥有庞大的开发者社区,开发者可以在社区中获取到丰富的教程、插件和解决方案。这种开放的生态系统能够帮助开发者更好地解决问题,提升开发效率。

  5. 灵活性强: uni-app支持原生扩展,开发者可以通过编写原生插件来扩展应用的功能,满足各种特定需求。同时,uni-app还支持混合开发模式,可以在同一个应用中集成原生页面和uni-app页面,提供更灵活的开发方式。

三.基础知识

开发规范遵循以下原则:

1、页面文件遵循Vue单文件组件

2、组件标签规范类似于微信小程序规范。

3、接口能力(JS API)规范类似微信小程序规范,但需要将wx前缀改为uni。

4、数据绑定及事件处理同Vue.js规范,同时额外补充了uniapp本身的App及页面的生命周期的规范。

5、为了更好的兼容多端运行,建议使用Flex布局进行开发。

除此之外uni-app的项目开发还需遵循以下规范:

1、目录结构规范

  • 建议按照 uni-app 默认的目录结构组织项目,以保持统一性和易读性。将不同功能和模块的文件放置在对应的目录下,如 pages 存放页面,components 存放组件等。

2、命名规范

  • 文件名、组件名、变量名等统一使用小写字母,多个单词之间可以使用中划线连接,例如:my-page.vue、login.vue等等

3、代码规范

  • 遵循 Vue.js 官方的代码规范,保持代码风格的统一性。注意代码的缩进和格式,提高代码的可读性。避免在模板中直接编写过多逻辑,尽量将逻辑处理移到 JS 部分。合理使用生命周期函数,避免在页面加载时做过多的初始化操作

4、样式规范

  • 推荐使用预处理器编写样式,如 Less、Sass 等,以提高样式代码的可维护性。统一使用 rpx 作为尺寸单位,以便在不同设备上进行适配。避免在样式中直接使用颜色值和尺寸值,建议提取出来作为变量统一管理

5、注释规范

  • 在关键代码和复杂逻辑处添加必要的注释,方便其他开发者理解代码意图。注释应该清晰简洁,描述代码的功能、参数和返回值等信息。

6.文件目录结构

四.uni-app的路由和生命周期

(1).路由的跳转

述:uni-app项目的路由由框架统一管理,每新增一个页面,都需要在page.json里面进行配置,uni-app路由的跳转有2种方式,以下对这两种方式进行讲解:

方式一:使用navigator组件进行跳转,该组件的属性说明如下:

属性名 类型 默认值 描述
url String 应用内的跳转链接,值为相对路径或绝对路径,如:"../first/first","/pages/first/first",注意不能加.vue后缀
open-type String navigate 跳转方式
delta Number 当 open-type 为 'navigateBack' 时有效,表示回退的层数

方式二:使用路由API进行跳转:

API 描述
保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。

uni.redirectTo()

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

uni.switchTab()

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

uni.reLaunch()

关闭所有页面,打开到应用内的某个页面
关闭当前页面,返回上一页面或多级页面

(2).页面的传参

在使用路由操作进行页面跳转时,可以在跳转的同时传递参数到下一个页面中,并同时在下一个页面接收参数。具体步骤如下:

步骤一:使用API的方式进行页面的跳转

步骤二:在页面接收上一个页面传递过来的参数

 (3).生命周期

概述:uni-app完全支持Vue实例的生命周期,同时还新增了应用的生命周期和页面的生命周期。

应用生命周期列表

函数名 描述
onLaunch 应用初始化完成时触发(全局只触发一次)
onShow 应用启动,或从后台进入前台触发
onHide 应用从前台进入后台触发
onError 应用报错时触发

页面生命周期列表

函数名 描述
onInit 监听页面初始化,其参数同 onLoad 参数,为上个页面传递的数据,参数类型为 Object(用于页面传参),触发时机早于 onLoad
onLoad 监听页面加载,该钩子被调用时,响应式数据、计算属性、方法、侦听器、props、slots 已设置完成,其参数为上个页面传递的数据,参数类型为 Object(用于页面传参)
onShow 监听页面显示,页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
onHide 监听页面隐藏

组件生命周期列表

函数名 描述
beforeCreate 实例初始化之后被调用
created 实例创建之后被调用
beforeMount 实例挂载之前被调用
mounted 实例挂载之后被调用

五.常用API

(1).网络请求API 

uni.request 是一个在uni-app框架中用来发起网络请求的API。通过这个API,开发者可以在uni-app中实现向服务器端发送HTTP请求并获取响应数据的功能。uni.request允许开发者指定请求的URL、请求方法、请求头部信息、请求数据等内容,以及定义请求成功和失败时的处理逻辑。开发者可以利用uni.request来实现与服务器端进行数据交互的功能,例如获取远程数据、上传文件等操作。 在uni-app中,uni.request是一种常用的实现网络请求的方法,开发者可以根据自己的需求灵活运用该API来实现网络请求功能。

使用uni.request发起接口数据请求的实际案例:

描述:接口文档提供了一个get请求的接口,需要把接口的分类数据请求回来并渲染到页面当中。

具体步骤如下:

1、在method里面定义一个用于请求分类数据的方法 ,方法名为getClassifyList

2、在getClassifyList方法里面使用uni.request API请求接口的数据

3、把请求回来的数据渲染到页面上。

实际操作的代码案例如下:

(2).数据的缓存

概念:在Uni-app中,数据缓存是指将应用程序中的数据存储在本地设备上,以便在应用程序关闭后或用户重新打开应用程序时保留数据。这对于提高应用程序性能、减少网络请求和改善用户体验非常有用。

常用的数据缓存列表

API 描述
将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个异步接口。

uni.setStorageSync()

将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口。

uni.getStorage()

从本地缓存中异步获取指定 key 对应的内容

uni.getStorageSync()

从本地缓存中同步获取指定 key 对应的内容。

uni.removeStorage()

从本地缓存中异步移除指定 key。
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Lcc0723/article/details/137917883

智能推荐

华为鸿蒙的代码是多少,消息称华为鸿蒙此次开源代码量大约是8GB,AOSP超60GB-程序员宅基地

文章浏览阅读394次。来源:IT之家在近期的华为鸿蒙伙伴峰会上,华为消费者业务 AI 与智慧全场景业务部副总裁杨海松接受媒体采访时表示,鸿蒙系统完全开源开放,今年会按照既定计划做到 128MB-4GB 的设备全栈系统开源开放。“欢迎三方的手机厂商使用鸿蒙系统,一起开源共建。”不过,“三方手机 ‘谁’,以及 ‘什么时候’上鸿蒙系统,完全取决于厂商的自己商业考量。”微博博主 @钊哥科普 今天爆料称,鸿蒙此次开源的代码量大约..._鸿蒙卫星发送短消息代码分析

python语言中1010的二进制表示_Python语言中的按位运算-程序员宅基地

文章浏览阅读2.3k次。(转)位操作是程序设计中对位模式或二进制数的一元和二元操作. 在许多古老的微处理器上, 位运算比加减运算略快, 通常位运算比乘除法运算要快很多. 在现代架构中, 情况并非如此:位运算的运算速度通常与加法运算相同(仍然快于乘法运算).简单来说,按位运算就把数字转换为机器语言——二进制的数字来运算的一种运算形式。在计算机系统中,数值一律用补码来表示(存储)。Python中的按位运算符有:左移运算符(&..._位串1010的二进制

使用windows11 + linux 虚拟机,端口被占用_wsl 端口占用-程序员宅基地

文章浏览阅读560次。解决windows分配Linux端口太靠前的问题。_wsl 端口占用

第一章:什么是软件架构?_allocation structures-程序员宅基地

文章浏览阅读1k次。What Software Architecture Is系统的软件体系结构是指系统所需的一组结构,包括软件元素、它们之间的关系以及两者的属性。结构是由一个关系集合在一起的一组元素。We call runtime structures component-and-connector (C&C) structures.Allocation structures describe the ma..._allocation structures

求链式线性表的倒数第K项_c语言 求链式线性表的倒数第k项 分数 12 作者 ds课程组 单位 浙江大学 给定一系列-程序员宅基地

文章浏览阅读565次。求链式线性表的倒数第K项给定一系列正整数,请设计一个尽可能高效的算法,查找倒数第K个位置上的数字。输入格式:输入首先给出一个正整数K,随后是若干非负整数,最后以一个负整数表示结尾(该负数不算在序列内,不要处理)。输出格式:输出倒数第K个位置上的数据。如果这个位置不存在,输出错误信息NULL。输入样例:4 1 2 3 4 5 6 7 8 9 0 -1输出样例:7标程​ 单链表版#include<map>#include<list>#include<cm_c语言 求链式线性表的倒数第k项 分数 12 作者 ds课程组 单位 浙江大学 给定一系列

使用YOLOX进行物体检测_yolox 刀具-程序员宅基地

文章浏览阅读1.4k次。YOLOX 是旷视开源的高性能检测器。旷视的研究者将解耦头、数据增强、无锚点以及标签分类等目标检测领域的优秀进展与 YOLO 进行了巧妙的集成组合,提出了 YOLOX,不仅实现了超越 YOLOv3、YOLOv4 和 YOLOv5 的 AP,而且取得了极具竞争力的推理速度。其中YOLOX-L版本以 68.9 FPS 的速度在 COCO 上实现了 50.0% AP,比 YOLOv5-L 高出 1.8% AP!还提供了支持 ONNX、TensorRT、NCNN 和 Openvino 的部署版本,本文将详细介绍如_yolox 刀具

随便推点

苹果手机备份用什么软件好,iphone备份软件有什么用 苹果手机备份怎么操作 iPhone数据备份常用的3种方法_备份苹果手机用什么软件-程序员宅基地

文章浏览阅读683次,点赞20次,收藏12次。当苹果手机需要进行刷机、恢复出厂设置、降级iOS系统等操作时,我们需要将自己的。特别是在苹果发布新iOS系统时,总有一些小伙伴因为升降级系统,而导致了。iPhone中储存着重要的照片、通讯录、文件等数据,建议,避免因一些意外情况造成数据的丢失。本文会给大家介绍苹果手机备份用什么软件好,iphone备份软件有什么用的相关内容,希望本文的内容会对大家有所帮助。使用iCloud备份。_备份苹果手机用什么软件

python 利用sklearn.cross_validation的KFold构造交叉验证数据集_from sklearn.cross_validation import kfold-程序员宅基地

文章浏览阅读2.5w次,点赞8次,收藏52次。KFold通过提供index来给你确定不同组的训练集以及测试的index,来构造交叉验证数据集。参数(n, n_folds=3, shuffle=False, random_state=None)n为总数n_folds为分为多少个交叉验证集shuffle为是否随机random_state设置随机因子from sklearn.cross_validation import KFoldimpor_from sklearn.cross_validation import kfold

handlebars-----if的基本用法_handlebars的if-程序员宅基地

文章浏览阅读1.1k次。1 DOCTYPE html> 2 html> 3 head> 4 META http-equiv=Content-Type content="text/html; charset=utf-8"> 5 title>if-判断的基本用法 - by 杨元title> 6 head> 7 body> 8 h1>if-判断的基本用法h1> 9 基_handlebars的if

Golang 端口复用测试_golang端口复用-程序员宅基地

文章浏览阅读4.1k次。先给出结论:同一个进程,使用一个端口,然后连接关闭,大约需要30s后才可再次使用这个端口。测试首先使用端口9001连接服务端,发送数据,然后关闭连接,接着再次使用端口9001连接服务端,如果连接失败,间隔15s后,再次尝试,最多尝试3次,。clientpackage mainimport ( &quot;bufio&quot; &quot;fmt&quot; &quo_golang端口复用

ROR笔记 1_address execution break already exists,redefine ex-程序员宅基地

文章浏览阅读859次。这段时间有空看看Ruby On Rails顺手把一些主要的东西记录下来以免忘掉了最近有点时间准备自己搞个小的网站玩玩,主要考虑过Django和ROR。考虑Django的原因是我以前用Python写过几个小程序还有点熟悉,而且Python的性能比Ruby要高,Django据说也是个性能比较高的框架。ROR不用说了,相对来说名头要大,比较流行。最终选择的原因比较多,一会儿也说不清。先说说Django吧,目前知道比较有名的Python站点就是豆瓣了,据阿北个人说只有一台服务器而且只占用了很少的资源,但并不是用的D_address execution break already exists,redefine existing breakpoint

优傲优化福特汽车装配线生产效率_汽车生产流程优化-程序员宅基地

文章浏览阅读403次。减少员工的重复性工作 快速将协作机器人集成到生产流程中 提升生产速度及效率 部署灵活, 可快速切换作业市场压力增大,产线升级需求迫在眉睫一直以来,汽车行业的自动化水平在制造业中是数一数二的。大多数汽车制造厂商在焊接、涂装、冲压等环节都已经采用自动化技术。但随着生产模式和外部环境的变化,市场对汽车制造商提出了更高的要求。在传统工业机器人无法满足柔性生产的灵活要求的情况下,汽车制造商..._汽车生产流程优化