uni-app基础

news2024/11/24 6:44:34

1、基本语言和开发规范

uni-app代码编写,基本语言包括jsvuecss。以及tsscsscss预编译器。

在app端,还支持原生渲染的nvue,以及可以编译为kotlin和swift的uts

但是,DCloud提供了使用js编写服务器代码的uniCloud云引擎。所以,只需掌握js,就可以开发web、Android、iOS、各家小程序以及服务器等全栈应用。

1.1、uni-app开发规范

  • 页面文件遵循Vue单文件组件规范,即每个页面是一个.vue文件。

  • 组件标签靠近小程序规范。

  • 接口能力靠近小程序规范,但需要将wxmy等替换为uni

  • 数据绑定及事件处理同Vue.js规范,同时补充了应用生命周期及页面的生命周期。

  • 如需兼容app-nvue平台,建议使用flex布局进行开发。

uni-app分编译器运行时(runtime)。uni-app能实现一套代码、多端运行,是通过这2部分配合完成的。

编译器将开发者的代码进行编译,编译的输出物由各个终端的runtime进行解析,每个平台(Web、Android App、iOS App、各家小程序)都有各自的runtime。

编译器

  • 编译器指的是本地开发环境。一般是内置在HBuilderX工具中,也可以使用独立的cli版。

  • 开发者按uni-app规范编写代码,由编译器将开发者的代码编译生成每个平台支持的特有代码

    • 在web平台,将.vue文件编译为js代码。与普通的vue cli项目类似

    • 在微信小程序平台,编译器将.vue文件拆分生成wxml、wxss、js等代码

    • 在app平台,将.vue文件编译为js代码。进一步,如果涉及uts代码: - 在Android平台,将.uts文件编译为kotlin代码 - 在iOS平台,将.uts文件编译为swift代码

  • 编译器分vue2版和vue3版 - vue2版:基于webpack实现 - vue3版:基于Vite实现,性能更快

  • 编译器支持条件编译,即可以指定某部分代码只编译到特定的终端平台。从而将公用和个性化融合在一个工程中。

// #ifdef  App
console.log("这段代码只有在App平台才会被编译进去。非App平台编译后没有这段代码")
// #endif
​

运行时(runtime)

runtime不是运行在电脑开发环境,而是运行在真正的终端上。

uni-app在每个平台(Web、Android App、iOS App、各家小程序)都有各自的runtime。这是一个比较庞大的工程。

  • 在小程序端,uni-app的runtime,主要是一个小程序版的vue runtime页面路由组件api等方面基本都是转义。

  • 在web端,uni-app的runtime相比普通的vue项目,多了一套ui库页面路由框架、和uni对象(即常见API封装)

  • 在App端,uni-app的runtime更复杂,可以先简单理解为DCloud也有一套小程序引擎,打包app时将开发者的代码和DCloud的小程序打包成了apk或ipa。当然,事实上DCloud确实有小程序引擎产品,供原生应用实现小程序化。

uni-app runtime包括3部分:基础框架组件API

基础框架

  • 包括语法、数据驱动、全局文件、应用管理、页面管理、js引擎、渲染和排版引擎等

  • 在web和小程序上,不需要uni-app提供js引擎和排版引擎,直接使用浏览器和小程序的即可。但app上需要uni-app提供

  • App的js引擎:App-Android上,uni-app的js引擎是v8,App-iOS是jscore

  • App的渲染引擎:同时提供了2套渲染引擎,.vue页面文件由webview渲染,原理与小程序相同;.nvue页面文件由原生渲染,原理与react native相同。开发者可以根据需要自主选择渲染引擎。

组件:

  • runtime中包括的组件只有基础组件,如<view><button>等。扩展组件不包含在uni-app的runtime中,而是下载到用户的项目代码中。(这些组件都是vue组件)

  • 为了降低开发者的学习成本,uni-app的内置基础组件命名规范与小程序基本相同

  • 这几十个组件不管在哪个平台,已被处理为均有一致表现。

  • 在小程序端,uni-app基础组件会直接转义为小程序自己的内置组件。在小程序的runtime中不占体积。

  • 在web和android、iOS端,这几十个组件都在uni-app的runtime中,会占用一定体积,相当于内置了一套ui库。

  • 组件的扩展:

    • 有了几十个基础组件,大多数扩展组件也都是基于这些基础组件封装的。比如官方提供的扩展ui库uni ui

    • 在web平台,for web的各种ui库(如elementUI)也可以使用,但这些库由于操作了dom,无法跨端在app和小程序中使用。

    • 在App平台,uni-app也支持使用原生编程语言来自行扩展原生组件,比如原生的地图、ar等。

    • uni-app同时支持将微信自定义组件运行到微信小程序、web、app这3个平台。注意微信自定义组件不是vue组件。

API:

  • uni-app runtime内置了大量常见的、跨端的 API,比如联网(uni.request)、读取存储(uni.getStorage)

  • 同时uni-app不限制各端原生平台的API调用。开发者可以在uni-app框架中无限制的调用该平台所有能使用的API。即,在小程序平台,小程序的所有API都可以使用;在web平台,浏览器的所有API都可使用;在iOS和Android平台,os的所有API都可以使用。

  • 也就是说,使用uni-app的标准API,可以跨端使用。但对于不跨端的部分,仍可以调用该端的专有API。由于常见的API都已经被封装内置,所以日常开发时,开发者只需关注uni标准API,当需要调用特色端能力时在条件编译里编写特色API调用代码。

  • ext API:web和app的runtime体积不小,如果把小程序的所有API等内置进去会让开发者的最终应用体积变大。所以有部分不常用的API被剥离为ext API。虽然仍然是uni.开头,但需要单独下载插件到项目下

  • 小程序平台:uni对象会转为小程序的自有对象,比如在微信小程序平台,编写uni.request等同于wx.request。那么所有wx.的API都可以这样使用。

  • web平台:window、dom等浏览器专用API仍可以使用

  • app平台:除了uni.的API,还可以使用plus.的APINative.js,以及通过uts编写原生插件,或者使用java和objectC编写原生插件。这些原生插件调用os的API并封装给js使用。

由于历史沿革,DCloud在开发app时有:5+App、wap2app、uni-app等3种模式。这3种方式的runtime在底层能力上是公用的,所有uni-app可以调用5+(也就是plus.xxx)的API。虽然都可以使用5+的系统能力,但uni-app的逻辑层运行在js层,渲染层是webview和原生nvue双选。而5+不区分逻辑层和渲染层,全部运行在webview里,在性能上5+不及uni-app。

逻辑层和渲染层分离

在web平台,逻辑层(js)和渲染层(html、css),都运行在统一的webview里。

但在小程序和app端,逻辑层和渲染层被分离了。分离的目的是提高性能。

小程序和app的逻辑层都不支持浏览器专用的window、dom等API。app只能在渲染层操作window、dom,即renderjs

uni-app官网:uni-app快速上手 | uni-app官网

2、工具

开发uni-app我们可以使用官网的HBuilder X 图标是绿色的那个,在这个开发工具中,官方集成了许多uni-app工具。也可以创建官方的uni-app模板。

uni-app还支持多语言,便于开发多语言项目。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/565129.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Unity Lighting Mode

在Light中Mode设置为Mixed时&#xff0c;Lighting Mode&#xff08;在Window->Rendering->Light->Scene&#xff09;有三种选项如下图&#xff1a; Baked Indirect 烘焙间接光,效果最好性能最耗 混合光源照亮的动态游戏对象将接收&#xff1a; 实时直接光照。烘焙间接…

【iOS_锁】

文章目录 前言锁线程安全锁&#x1f512;的作用锁的种类互斥锁 自旋锁加锁原理缺点对比自旋锁的缺点互斥锁的缺点 各种锁OSSpinLock使用OSSpinLockOSSpinLock存在缺陷 互斥锁分为两种&#xff1a; 递归锁、非递归锁 os_unfair_lock 【非递归互斥锁】锁的修饰使用 自旋锁的优先级…

数据结构初阶——堆排序

思维导图&#xff1a; 目录 一&#xff0c;堆排序的概念 二&#xff0c;堆排序的实现 2.1将数组变成堆 2.2堆有序化 二,全部代码 一&#xff0c;堆排序的概念 百度百科的解释如下&#xff1a;堆排序&#xff08;英语:Heapsort&#xff09;是指利用堆这种数据结构所设计…

Python——第7章 pandas数据分析实战

7.1pandas常用数据类型 7.1.1一维数组与常用操作 import pandas as pd import matplotlib.pyplot as plt#设置输出结果对齐方式 pd.set_option(display.unicode.ambiguous_as_wide,True) pd.set_option(display.unicode.east_asian_width,True)#自动创建从0开始的非负整数索引…

优化器| SGD/Adam/

前言&#xff1a;最近准备复习一下深度学习的基础知识&#xff0c;开个专栏记录自己的学习笔记 各种SGD和Adam优化器整理 基本概念 优化&#xff1a;最大化或最小化目标函数&#xff0c;具体指最小化代价函数或损失函数 损失函数 J(θ)f(hθ(x)&#xff0c;y)&#xff0c;h…

RK3568平台开发系列讲解(项目篇)TensorFlow图像分类

🚀返回专栏总目录 文章目录 一、安装tensorflow环境二、图像分类2.1、准备数据集2.2、构建和训练模型2.3、测试模型2.4、TensorFlow Lite模型2.5、模型转换和模拟测试三、部署推理测试沉淀、分享、成长,让自己和他人都能有所收获!😄 📢 TensorFlow 是一个基于数据流编程…

Python机器学习入门 - - 贝叶斯算法学习笔记

文章目录 前言一、贝叶斯算法简介二、贝叶斯算法的数学原理1. 条件概率2. 全概率公式3. 贝叶斯公式4. 朴素贝叶斯分类器5. 高斯朴素贝叶斯分类器和伯努利朴素贝叶斯分类器 三、Python实现朴素贝叶斯分类总结 前言 贝叶斯公式是我们高中就耳熟能详的统计概率定理&#xff0c;贝…

UnityVR--ResourceManager--资源管理

目录 简介 加载资源的几种方式 资源加载的管理器Resload.cs ResLoad类的应用举例 简介 这里记录一个资源管理工具集&#xff0c;提供一些方法将一些Object、Prefab直接从Assets文件夹中加载到场景中。 加载资源的几种方式 在项目中我们经常需要使用一些随时取用的东西&…

2023 华为 Datacom-HCIE 题库 06--含解析

多项选择 1.[试题编号&#xff1a;190185] &#xff08;多选题&#xff09;如图所示&#xff0c;PE 1和PE2之间通过Loopback0接口建立MP-BGP邻居关系&#xff0c;在配置完成之后&#xff0c;发现CE1和CE2之间无法互相学习路由&#xff0c;以下哪些项会导致该问题出现? A、PE1…

GDB调试工具

GDB&#xff08;GNU Debugger&#xff09;是一个功能强大的命令行调试工具&#xff0c;用于调试 C、C 程序以及其他编程语言的程序。它是 GNU 项目的一部分&#xff0c;可在多个操作系统上使用&#xff0c;包括 Linux、macOS 和 Windows&#xff08;通过 MinGW 或 Cygwin&#…

针对KF状态估计的电力系统虚假数据注入攻击研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

如何用ChatGPT学Python

ChatGPT狂飙160天&#xff0c;世界已经不是之前的样子。 新建了人工智能中文站https://ai.weoknow.com 每天给大家更新可用的国内可用chatGPT资源 ChatGPT的能力大家肯定都听说过&#xff0c;很多学生应该都亲身体验过。它在自然语言处理方面的出色表现绝对颠覆了之前公众对人…

一文详解Java自定义注解

目录 简介 JDK注解 Target Retention Documented Inherited 第三方注解 自定义注解 举例 默认字符串注解 实现指定包名称扫描注解 简介 注解&#xff08;Annotation&#xff09;是Java SE 5.0 版本开始引入的概念&#xff0c;它是对 Java 源代码的说明&#xff0c;…

FreeRTOS中断配置和临界值

Cortx-M 中断 优先级分组 Cortex-M3允许具有较少中断源时使用较少的寄存器位指定中断源的优先级&#xff0c;因此STM32把指定中断优先级的寄存器位减少到4位。抢占优先级的级别高于响应优先级。而数值越小所代表的优先级就越高。高的抢占式优先级可以打断低的抢占式优先级&am…

mysql加强小结 203446

数据库三范式: 什么是范式 规则:想要设计一个好的关系,必须要满足一定的约束条件,有几个等级,一级比一级高 ​ 解决什么问题:让数据库设计更加简洁,结构更加清晰,否则容易造成数据冗余 数据库有哪些范式? ​ 数据库有七大范式,常用的只有三个范式 **第一范式:**业务上属…

电磁兼容(EMC)基础(二)

目录 1.1 什么是电磁兼容&#xff08;EMC&#xff09; 1.2 各种各样的“干扰” 1.3 电磁兼容三要素 1.4 什么是分贝 1.5 天线 1.1 什么是电磁兼容&#xff08;EMC&#xff09; 电磁兼容(Electro Magnetic Compatibility&#xff0c;EMC)是电子、电气设备或系统的一种重要…

面试题基础篇

文章目录 1、二分查找2、冒泡排序3、选择排序4、插入排序5、希尔排序6、快速排序7、ArrayList8、Iterator9、LinkedList10、HashMap10.1、基本数据结构底层数据结构&#xff0c;1.7和1.8有什么不同&#xff1f; 10.2、树化与退化为何要用红黑树&#xff0c;为何一上来不树化&am…

【开放原子训练营(第三季)inBuilder低代码开发实验室学习心得】

今天要给大家介绍的项目是UBML 什么是UBML呢&#xff1f; UBML&#xff08;统一业务建模语言 Unified-Business-Modeling-Language&#xff09;是一种用于快速构建应用软件的低代码开发建模语言&#xff0c;是开放原子开源基金会&#xff08;OpenAtom Foundation&#xff09;…

数据结构与算法:树形查找

一.二叉排序树&#xff08;BST&#xff09; 1.个人理解 左子树结点值 < 根结点值 < 右子树结点值对二叉排序树进行中序遍历&#xff0c;可以得到一个递增的有序数列 2.二叉树查找 原理&#xff1a; 对于一个给定的二叉排序树&#xff0c;如果要查找一个节点&#xff0…

并发知识杂谈

在JAVA语言层面&#xff0c;怎么保证线程安全&#xff1f; 有序性&#xff1a;使用happens-before原则 可见性&#xff1a;可以使用 volatile 关键字来保证&#xff0c;不仅如此&#xff0c;volatile 还能起到禁止指令重排的作用&#xff1b;另外&#xff0c; synchronized 和…