uni-app x 跨平台开发框架

news2024/11/18 13:51:24

目录

uni-app x 是什么

和Flutter对比

uts语言

uvue渲染引擎

组合式API的写法

选项式API写法

页面生命周期

API 

pages.json全局配置文件

总结

uni-app x 是什么

uni-app x，是下一代 uni-app，是一个跨平台应用开发引擎。

uni-app x 是一个庞大的工程，它包括uts语言、uvue渲染引擎、uni的组件和API、以及扩展机制。

uts是一门类ts的、跨平台的、新语言。uts在iOS端编译为swift、在Android端编译为kotlin、在Web端编译为js。

在Android平台，uni-app x 的工程被编译为kotlin代码，本质上是换了vue写法的原生kotlin应用，在性能上与原生kotlin一致。

uni-app x不支持vue2

uts替代的是js，而uvue替代的就是html和css。或者如果你了解flutter的话，也可以理解为uts类似dart，而uvue类似flutter。

和Flutter对比

在过去的跨平台方案中，逻辑层和ui层的通信始终是痛点。

  • 所以在webview渲染时，增加了renderjs、wxs等技术
  • 所以在nvue渲染时，增加了bindingX技术
  • 所以在skyline渲染时，增加了worklet技术

但这些补丁技术都不治根。过去只有flutter解决了dart和ui层的通信问题。可是这套方案又带来2个问题：

  1. dart和原生层通信也还是有延时，对象传递需要序列化，造成性能问题；
  2. 自渲染而不是原生渲染，无可避免会引发混合渲染，比如原生的信息流广告内嵌、原生输入法适配，造成内存高和输入障碍。

其实不管是js还是dart，和原生都有通信桥，功能上没有限制，可以调用各种原生能力，但问题就出在Android上这个通信性能上不去。

既然通信性能不行，那就干脆不通信。

由于uts在Android上被编译为kotlin，它的逻辑层和UI层都是纯原生的，没有通信问题，所以它的性能真正达到了原生水平。因为本质上它就是换了vue写法的原生kotlin应用。

在iOS上，情况要复杂些，这里就不具体讲解，如果有兴趣的小伙伴可以点击这里查看

 

uts语言

uts替代的是js，而uvue替代的就是html和css。或者如果你了解flutter的话，也可以理解为uts类似dart，而uvue类似flutter。

uvue是一套基于uts的、兼容vue语法的、跨平台的、原生渲染引擎。

  • Android版于3.99上线
  • Web版于4.0上线
  • iOS版于4.11上线

uts和ts很相似，但为了跨端，uts进行了一些约束和特定平台的增补。详见 uts语言介绍

例子如下：

// 声明一个string类型的变量
let str :string = "hello"; 
let str1 = 'world';
str = "hello world";
str = str1 as string; // 在不确定类型的时候可以给他一个类型


// 声明一个传参是数字类型的，返回是boolean类型的函数
const test = (score: number): boolean => {
	return (score>=60)
}


// 也可以自定义数据类型进行类型规范，比如声明一个Page类型

type Page = {
    name : string
    enable ?: boolean
    url ?: string.PageURIString
  }

// 总的来说，会TypeScript的，这个是没问题的，两个很相像

 

uvue渲染引擎

uvue支持的是vue3语法，支持组合式API和选项式API。详见vue语法

uvue在App端支持的css语法，是web的子集，类似于但优于nvue的css。仅支持flex布局，但也足以布局出需要的界面。详见css语法

使用该css子集，可保证跨端。如果把uvue页面编译到web平台，则web的其他css也都可以使用。

代码例子：

组合式API的写法

<template>
	<view class="container">
		<button @click="add">加</button>
        {{ count }}
        <button @click="reduce">减</button>
	</view>
</template>

<script lang="uts" setup>
	//这里只能写uts
    let count = ref(1);

    // 加一
    const add = () => {
        count.value++;
    }

    // 减一
    const reduce = () => {
        count.value++;
    }

</script>

<style>
	.container{
		margin: auto;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
</style>

选项式API写法

<template>
	<view class="container">
		<button @click="add">加</button>
        {{ count }}
        <button @click="reduce">减</button>
	</view>
</template>

<script lang="uts">
	export default {
		data() {
			return {
				count : 1,
			}
		},
		onLoad() {
			// 页面启动的生命周期，这里编写页面加载时的逻辑
            console.log('onLoad')
		},
		methods: {
			add : function () {
				this.count++;
			},
            reduce : function () {
				this.count--;
			},
		}
	}
</script>

<style>
	.container{
		margin: auto;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
</style>

 

页面生命周期

<template>
	<scroll-view :bounces="false">
		<view v-for="item in 90">
			{{ item }}
		</view>
	</scroll-view>
</template>

<script setup lang="uts">
	onLoad((options : OnLoadOptions) => {
		console.log('onLoad', options)
	})
	onPageShow(() => {
		console.log('onPageShow');
	})
	onReady(() => {
		console.log('onReady');
	})
	onPullDownRefresh(() => {
		console.log('onPullDownRefresh');
	})
	onPageScroll((e : OnPageScrollOptions) => {
		console.log('onPageScroll');
	})
	onReachBottom(() => {
		console.log('onReachBottom');
	})
	onBackPress((options : OnBackPressOptions) : boolean | null => {
		console.log('onBackPress');
		return null
	})
	onPageHide(() => {
		console.log('onPageHide');
	})
	onUnload(() => {
		console.log('onUnload');
	})
	onResize((options : OnResizeOptions) => {
		console.log('onResize', options)
	})
</script>

<style>
	.container {
		height: 1200px;
	}
</style>

 

API 

uni-app x支持的API包括：

  1. uts的API 详见
  2. 全局API，前面不需要加uni.。如getApp、getCurrentPages
  3. uni.xxx的内置API。数量较多，详见
  4. uniCloud.xxx的内置API。详见
  5. dom的API 详见
  6. 原生API

由于 uts 可以直接调用 Android 和 iOS 的 api，所以 OS 和三方sdk的能力都可以在uts中调用。如下：

<script>
	import Build from 'android.os.Build';
	export default {
		onLoad() {
			console.log(Build.MODEL); //调用原生对象，返回手机型号
			console.log(uni.getSystemInfoSync().deviceModel); //调用uni API，返回手机型号。与上一行返回值相同
		}
	}
</script>

 

pages.json全局配置文件

pages.json 文件是 uni-app x 的页面管理配置文件，决定应用的首页、页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

所有页面，均需在pages.json中注册，否则不会被打包到应用中。

在HBuilderX中新建页面，默认会在pages.json中自动注册。在HBuilderX中删除页面文件，也会在状态栏提示从pages.json中移除注册。

除了管理页面，pages.json支持对页面进行特殊配置，比如应用首页的tabbar、每个页面的顶部导航栏设置。

但这些uni-app中设计的功能，主要是为了解决页面由webview渲染带来的性能问题，由原生提供一些配置来优化。

uni-app x的app平台，页面不再由webview渲染，其实不需要原生提供特殊配置来优化。但为了开发的便利和多端的统一，也支持了tabbar和导航栏设置。
但不再支持uni-app的app-plus专用配置以及tabbar的midbutton。

如pages.json中配置的导航栏和tabbar功能无法满足你的需求，可以不在pages.json中配置，自己用view做导航栏和tabbar。

例子如下

{
  "pages": [
    //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
      "path": "pages/tabBar/component",
      "style": {
        "navigationBarTitleText": "内置组件",
        "backgroundColor": "#F8F8F8"
      }
    },
  ],
  "globalStyle": {
    "pageOrientation": "portrait",
    "navigationBarTitleText": "Hello uniapp x",
    "navigationBarTextStyle": "white",
    "navigationBarBackgroundColor": "#007AFF",
    "backgroundColorContent": "#efeff4",
    "backgroundColor": "#efeff4",
    "backgroundColorTop": "#F4F5F6",
    "backgroundColorBottom": "#F4F5F6"
  },
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#007AFF",
    "borderStyle": "black",
    "backgroundColor": "#F8F8F8",
    "list": [{
        "pagePath": "pages/tabBar/component",
        "iconPath": "static/component.png",
        "selectedIconPath": "static/componentHL.png",
        "text": "内置组件"
      },
      {
        "pagePath": "pages/tabBar/API",
        "iconPath": "static/api.png",
        "selectedIconPath": "static/apiHL.png",
        "text": "接口"
      },
    ]
  },
  "condition": {
    //模式配置，仅开发期间生效
    "current": 0, //当前激活的模式(list 的索引项)
    "list": [{
      "name": "", //模式名称
      "path": "", //启动页面，必选
      "query": "" //启动参数，在页面的onLoad函数里面得到
    }]
  }
}

总结

个人看一遍下来感觉只要会uniapp、vue、TypeScript，可以直接上手直接做，如果有什么不同可以去看官方文档，包看懂的~~

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

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

相关文章

基于STM32与ESP8266的智能电表设计与实现：实时监测，远程管理（附代码实例）

基于STM32与ESP8266的智能电表设计与实现：实时监测，远程管理（附代码实例）

一、项目背景 随着物联网技术的快速发展&#xff0c;传统电表已经无法满足智能电网对用电信息采集、分析和管理的需求。智能电表作为新一代电能计量设备&#xff0c;具有实时监测、远程抄表、用电分析等功能&#xff0c;是实现智能电网的重要基础设施。 本项目旨在设计并实现…
阅读更多...
Exploting an API endpoiint using documentation

Exploting an API endpoiint using documentation

HTTP request methods https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods 第一步：burp抓包刷新页面 httphistory中只能看到两个记录，可以看下Response，是HTML页面，说明这里有HTML页面 ，但是没有发现特定的API接口。 第二步：用户登录 转到用户登录的功能点处…
阅读更多...
kubernetes集群部署：环境准备及master节点部署（二）

kubernetes集群部署：环境准备及master节点部署（二）

主机名IPv4地址IPv6地址角色安装组件操作系统k8s130-node190192.168.XX.190240a:XX::190masterkubeadm、kubelet、containerdAnolis OS 8.94.19.91-28.1.an8.x86_64k8s130-node191192.168.XX.191240a:XX::191nodekubeadm、kubelet、cri-oAnolis OS 8.94.19.91-28.1.an8.x86_64k…
阅读更多...
Rust作用域和遮蔽

Rust作用域和遮蔽

作用域和遮蔽 变量绑定有一个作用域&#xff08;scope&#xff09;&#xff0c;它被限定只在一个代码块&#xff08;block&#xff09;中生存&#xff08;live&#xff09;。 代码块是一个被 {} 包围的语句集合。另外也允许[变量遮蔽][variable-shadow]&#xff08;variable s…
阅读更多...
SwiftUI 6.0（iOS 18.0）滚动视图新增的滚动阶段（Scroll Phase）监听功能趣谈

SwiftUI 6.0（iOS 18.0）滚动视图新增的滚动阶段（Scroll Phase）监听功能趣谈

何曾几时&#xff0c;在 SwiftUI 开发中的秃头小码农们迫切需要一种能够读取当前滚动状态的方法。 在过去&#xff0c;他们往往需要借助于 UIKit 的神秘力量。不过这一切在 SwiftUI 6.0 中已成“沧海桑田”。 在本篇博文中&#xff0c;您将学到如下内容&#xff1a; 1. Scroll…
阅读更多...
Python入门 2024/7/6

Python入门 2024/7/6

目录 数据容器入门 列表的定义语法 基本语法 嵌套列表 ​编辑 列表的下表索引 ​编辑 列表的常用操作 列表的常见方法 查找元素的下标 修改下标索引的值 插入元素 追加元素 追加一批元素 删除元素 删除某元素在列表中的第一个匹配项 清空列表内容 统计元素在…
阅读更多...
【Unity URP】通过代码动态添加URP渲染通道RendererFeature

【Unity URP】通过代码动态添加URP渲染通道RendererFeature

URP的渲染通道RendererFeature可以很方便的实现一些渲染问题，比如渲染顺序问题，遮挡后的材质替换等等。 那么我们如何通过代码来动态添加和修改呢？ 首先我们需要获取到当前的URP配置文件，在对配置文件进行添加 1.通过反射获取当前UniversalRendererData 我们通过Graphic…
阅读更多...
Day05-03-Nexus仓库

Day05-03-Nexus仓库

Day05-03-Nexus仓库 05-nexus-仓库1. 概述2. 极速部署指南2.1 下载2.2 部署2.3 配置2.4 连接使用nexus2.4 编译与测试 3. 总结 05-nexus-仓库 1. 概述 背景: maven编译的时候&#xff0c;npm/cnpm编译&#xff0c;需要下载大量的依赖包。这些依赖包在每一次构建的时候都需要使…
阅读更多...
解决Docker Desktop启动异常 Docker Desktop- WSL distro terminated abruptly

解决Docker Desktop启动异常 Docker Desktop- WSL distro terminated abruptly

异常 当打开Docker Desktop时候&#xff0c;启动docker引擎时&#xff0c;提示 加粗样式文本信息 Docker Desktop - WSL distro terminated abruptly A WSL distro Docker Desktop relies on has exited unexpectedly. This usually happensas a result of an external entit…
阅读更多...
.net 调用海康SDK的跨平台解决方案

.net 调用海康SDK的跨平台解决方案

📢欢迎点赞 ：👍 收藏 ⭐留言 📝 如有错误敬请指正，赐人玫瑰，手留余香！📢本文作者：由webmote 原创📢作者格言：新的征程，我们面对的不仅仅是技术还有人心，人心不可测，海水不可量，唯有技术，才是深沉黑夜中的一座闪烁的灯塔序言 上2篇海康SDK使用以及常见的坑…
阅读更多...
C++11 shared_ptr---面试常考

C++11 shared_ptr---面试常考

shared_ptr简介 共享对其所指堆内存空间的所有权&#xff0c;当最后⼀个指涉到该对象的shared_ptr不再指向他时&#xff0c;shared_ptr会⾃动析构所指对象如何判断⾃⼰是否指涉到该资源的最后⼀个&#xff1f;《引⽤计数》 shared_ptr构造函数&#xff0c;使引⽤计数析构函数&…
阅读更多...
【docker nvidia/cuda】ubuntu20.04安装docker踩坑记录

【docker nvidia/cuda】ubuntu20.04安装docker踩坑记录

docker nvidia 1.遇到这个错误&#xff0c;直接上魔法(科学上网) OpenSSL SSL_connect: Could not connect to nvidia.github.io:443 这个error是运行 NVIDIA官方docker安装教程 第一个 curl 命令是遇到的 2. apt-get 更新 sudo apt update遇到 error https://download.do…
阅读更多...
横截面交易策略：概念与示例

横截面交易策略：概念与示例

数量技术宅团队在CSDN学院推出了量化投资系列课程 欢迎有兴趣系统学习量化投资的同学&#xff0c;点击下方链接报名&#xff1a; 量化投资速成营&#xff08;入门课程&#xff09; Python股票量化投资 Python期货量化投资 Python数字货币量化投资 C语言CTP期货交易系统开…
阅读更多...
考CFA ESG踩过的坑，想考CFA ESG的同学，可以收藏

考CFA ESG踩过的坑，想考CFA ESG的同学，可以收藏

考CFA ESG踩过的坑 考证也是蹭热点&#xff0c; 2020年&#xff0c;那时是云&#xff0c;阿里云&#xff0c;腾讯云&#xff0c;华为云竞相绽放&#xff0c; 再过点时间&#xff0c;好像安全方面的证书&#xff0c;如油炸爆米花一样&#xff0c;噼里啪啦地蹦了出来&#xff0…
阅读更多...
matlab 抛物线图像绘制

matlab 抛物线图像绘制

抛物线图像绘制 x^2y4绘制结果 x^2y4 clc,clear,close all; length10; % 创建一个范围内的 x 和 y 值 x linspace(-length, length, 1000); y linspace(-length, length, 1000);% 创建一个网格来表示 x 和 y 值的组合 [X, Y] meshgrid(x, y);% 计算方程的左边和右边的值 LH…
阅读更多...
AIGC | 在机器学习工作站安装NVIDIA CUDA® 并行计算平台和编程模型

AIGC | 在机器学习工作站安装NVIDIA CUDA® 并行计算平台和编程模型

[ 知识是人生的灯塔&#xff0c;只有不断学习&#xff0c;才能照亮前行的道路 ] 0x02.初识与安装 CUDA 并行计算平台和编程模型 什么是 CUDA? CUDA&#xff08;Compute Unified Device Architecture&#xff09;是英伟达&#xff08;NVIDIA&#xff09;推出的并行计算平台和编…
阅读更多...
Docker 部署 Nacos v2.3.2 版本

Docker 部署 Nacos v2.3.2 版本

文章目录 Github官网文档Nacos 生态图Nacos Dockerdocker-compose.ymlapplication.propertiesNacos 官方示例 Github https://github.com/alibaba/nacos 官网 https://nacos.io/ 文档 https://nacos.io/docs/latest/what-is-nacos/ Nacos 生态图 Nacos Docker 镜像&…
阅读更多...
基于java+springboot+vue实现的图书商城管理系统（文末源码+Lw）283

基于java+springboot+vue实现的图书商城管理系统（文末源码+Lw）283

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本图书商城管理系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据信…
阅读更多...
【数据分享】全国乡村旅游重点镇（乡）数据（Excel/Shp格式/免费获取）

【数据分享】全国乡村旅游重点镇（乡）数据（Excel/Shp格式/免费获取）

之前我们分享过从我国文化和旅游部官网整理的2018-2023年我国50个重点旅游城市星级饭店季度经营状况数据&#xff08;可查看之前发布的文章&#xff09;&#xff01;文化和旅游部官网上也分享有很多与旅游相关的常用数据&#xff0c;我们基于官网发布的名单文件整理得到全国乡村…
阅读更多...
数据挖掘与分析——深度学习算法应用

数据挖掘与分析——深度学习算法应用

1. TensorFlow框架的基本使用&#xff08;5-1&#xff09; 获取训练数据 构建一个简单的线性模型&#xff1a;W&#xff0c;b为参数&#xff0c;W2&#xff0c;b1&#xff0c;运用tf.random.normal() 产生1000个随机数&#xff0c;产生x,y数据。 用matplotlib库&#xff0c;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023