uni-app x 跨平台开发框架

目录

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 : stringenable ?: booleanurl ?: 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>//这里只能写utslet 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.rhkb.cn/news/370505.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

计算机网络-IP组播基础

计算机网络-IP组播基础

一、概述 在前面的学习交换机和路由协议&#xff0c;二层通信是数据链路层间通信&#xff0c;在同一个广播域间通过源MAC地址和目的MAC地址进行通信&#xff0c;当两台主机第一次通信由于不清楚目的MAC地址需要进行广播泛洪&#xff0c;目的主机回复自身MAC地址&#xff0c;然后…
阅读更多...
Linux多进程和多线程(三)进程间通讯-信号处理方式和自定义处理函数

Linux多进程和多线程(三)进程间通讯-信号处理方式和自定义处理函数

进程间通信之信号 信号信号的种类 信号在操作系统中的定义如下: 信号的处理流程在 Linux 中对信号的处理⽅式 自定义信号处理函数 信号的发送 kill() 函数:raise() 函数: 示例 : 创建⼀个⼦进程&#xff0c;⼦进程通过信号暂停&#xff0c;⽗进程发送 终⽌信号等待信号 pause()…
阅读更多...
【鸿蒙学习笔记】@Link装饰器：父子双向同步

【鸿蒙学习笔记】@Link装饰器：父子双向同步

官方文档&#xff1a;Link装饰器&#xff1a;父子双向同步 目录标题 [Q&A] Link装饰器作用 [Q&A] Link装饰器特点样例&#xff1a;简单类型样例&#xff1a;数组类型样例&#xff1a;Map类型样例&#xff1a;Set类型样例&#xff1a;联合类型 [Q&A] Link装饰器作用…
阅读更多...
深度学习模型加密python版本

深度学习模型加密python版本

支持加密的模型: # torch、torch script、onnx、tensorrt 、torch2trt、tensorflow、tensorflow2tensorrt、paddlepaddle、paddle2tensorrt 深度学习推理模型通常以文件的形式进行保存&#xff0c;相应的推理引擎通过读取模型文件并反序列化即可进行推理过程. 这样一来&#…
阅读更多...
MongoDB 单节点升级为副本集高可用集群（1主1从1仲裁）

MongoDB 单节点升级为副本集高可用集群（1主1从1仲裁）

作者介绍&#xff1a;老苏&#xff0c;10余年DBA工作运维经验&#xff0c;擅长Oracle、MySQL、PG、Mongodb数据库运维&#xff08;如安装迁移&#xff0c;性能优化、故障应急处理等&#xff09; 公众号&#xff1a;老苏畅谈运维 欢迎关注本人公众号&#xff0c;更多精彩与您分享…
阅读更多...
leetcode力扣_排序问题

leetcode力扣_排序问题

215.数组中的第K个最大元素 鉴于已经将之前学的排序算法忘得差不多了&#xff0c;只会一个冒泡排序法了&#xff0c;就写了一个冒牌排序法&#xff0c;将给的数组按照降序排列&#xff0c;然后取nums[k-1]就是题目要求的&#xff0c;但是提交之后对于有的示例显示”超出时间限制…
阅读更多...
基于顺序表的通讯录实现

基于顺序表的通讯录实现

一、前言 基于已经学过的顺序表&#xff0c;可以实现一个简单的通讯录。 二、通讯录相关头文件 //Contact.h #pragma once#define NAME_MAX 20 #define TEL_MAX 20 #define ADDR_MAX 20 #define GENDER_MAX 20typedef struct PersonInfo {char name[NAME_MAX];char gender[G…
阅读更多...
pycharm如何使用jupyter

pycharm如何使用jupyter

目录 配置jupyter新建jupyter文件别人写的方法&#xff08;在pycharm种安装&#xff0c;在网页中使用&#xff09; pycharm专业版 配置jupyter 在pycharm终端启动一个conda虚拟环境&#xff0c;输入 conda install jupyter会有很多前置包需要安装&#xff1a; 新建jupyter…
阅读更多...
VScode将界面语言设置为中文

VScode将界面语言设置为中文

1. 点击左侧的扩展图标&#xff0c;打开侧边栏“EXTENSIONS”面板。 2. 在搜索框中输入“Chinese”&#xff0c;查找出“中文简体”插件&#xff0c;点击“install”按钮。 3. 等待插件安装完成&#xff0c;点击右下角“restart”按钮&#xff0c;从而重新启动Vscode。
阅读更多...
计算机网络——数据链路层（以太网扩展、虚拟局域网、高速以太网）

计算机网络——数据链路层（以太网扩展、虚拟局域网、高速以太网）

在许多情况下&#xff0c;我们希望把以太网的覆盖范围扩展。本节先讨论在物理层把以太网扩展&#xff0c;然后讨论在数据链路层把以太网扩展。这种扩展的以太网在网络层看来仍然是一个网络。 在物理层扩展以太网 现在&#xff0c;扩展主机和集线器之间的距离的一种简单方法就是…
阅读更多...
【ARMv8/v9 GIC 系列 1.5 -- Enabling the distribution of interrupts】

【ARMv8/v9 GIC 系列 1.5 -- Enabling the distribution of interrupts】

请阅读【ARM GICv3/v4 实战学习 】 文章目录 Enabling the distribution of interruptsGIC Distributor 中断组分发控制CPU Interface 中断组分发控制Physical LPIs 的启用Summary Enabling the distribution of interrupts 在ARM GICv3和GICv4体系结构中&#xff0c;中断分发…
阅读更多...
python sklearn机械学习-数据预处理

python sklearn机械学习-数据预处理

&#x1f308;所属专栏&#xff1a;【机械学习】✨作者主页&#xff1a; Mr.Zwq✔️个人简介&#xff1a;一个正在努力学技术的Python领域创作者&#xff0c;擅长爬虫&#xff0c;逆向&#xff0c;全栈方向&#xff0c;专注基础和实战分享&#xff0c;欢迎咨询&#xff01; 您…
阅读更多...
关于string的‘\0‘与string，vector构造特点加部分特别知识点的讨论

关于string的‘\0‘与string，vector构造特点加部分特别知识点的讨论

目录 前言&#xff1a; 问题一&#xff1a;关于string的\0问题讨论 问题二&#xff1a;C标准库中的string内存是分配在堆上面吗&#xff1f; 问题三&#xff1a;string与vector的capacity大小设计的特点 问题四&#xff1a;string的流提取问题 问题五&#xff1a;迭代器失…
阅读更多...
【Python】组合数据类型：序列，列表，元组，字典，集合

【Python】组合数据类型：序列，列表，元组，字典，集合

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️Python】 文章目录 前言组合数据类型序列类型序列常见的操作符列表列表操作len()append()insert()remove()index()sort()reverse()count() 元组三种序列类型的区别 集合类型四种操作符集合setfrozens…
阅读更多...
Vue表单输入绑定v-model

Vue表单输入绑定v-model

表单输入绑定 在前端处理表单时&#xff0c;我们常常需要将表单输入框的内容同步给Javascript中相应的变量。手动连接绑定和更改事件监听器可能会很麻&#xff0c;v-model 指令帮我们简化了这一步骤。 <template><h3>表单输入绑定</h3><hr> <inpu…
阅读更多...
C/C++连接MySQL

C/C++连接MySQL

今天刚学习了MySQL,于是去尝试能否让C/C连接上MySQL,一番尝试后也是成功了&#xff0c;把经验分享给大家&#xff01; 1.首先我们需要找到MySQL所在的目录下&#xff0c;一般默认安装路径都在C:\Program Files\MySQL\MySQL Server 8.0下&#xff1b; 2.随后我们打开Visual Stu…
阅读更多...
[go-zero] 简单微服务调用

[go-zero] 简单微服务调用

文章目录 1.注意事项2.服务划分及创建2.1 用户微服务2.2 订单微服务 3.启动服务3.1 etcd 服务启动3.2 微服务启动3.3 测试访问 1.注意事项 go-zero微服务的注册中心默认使用的是Etcd。 本小节将以一个订单服务调用用户服务来简单演示一下&#xff0c;其实订单服务是api服务&a…
阅读更多...
“郭有才”商标主要类别都已被注册！

“郭有才”商标主要类别都已被注册！

前阵山东网红“郭有才”火遍大江北&#xff0c;当然少不了许多想去申请注册“郭有才”商标名称的&#xff0c;普推商标知产老杨检索&#xff0c;发现“郭有才”商标申请了43个类别&#xff0c;基本上类别都被申请注册&#xff0c;已注册的商标大多是在“郭有才”火之前申请注册…
阅读更多...
NDVI数据集提取植被覆盖度FVC

NDVI数据集提取植被覆盖度FVC

植被覆盖度FVC 植被覆盖度&#xff08;Foliage Vegetation Cover&#xff0c;FVC&#xff09;是指植被冠层覆盖地表的面积比例&#xff0c;通常用来描述一个区域内植被的茂密程度或生长状况。它是生态学、环境科学以及地理信息系统等领域的重要指标&#xff0c;对于理解地表能…
阅读更多...
数据结构之“栈”（全方位认识）

数据结构之“栈”（全方位认识）

&#x1f339;个人主页&#x1f339;&#xff1a;喜欢草莓熊的bear &#x1f339;专栏&#x1f339;&#xff1a;数据结构 前言 栈是一种数据结构&#xff0c;具有" 后进先出 "的特点 或者也可见说是 ” 先进后出 “。大家一起加油吧冲冲冲&#xff01;&#xff01; …
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023