小创业公司网站怎么做,企业网站推广的主要方法,重庆南岸营销型网站建设公司推荐,超级外链推广目录
uni-app x 是什么
和Flutter对比
uts语言
uvue渲染引擎
组合式API的写法
选项式API写法
页面生命周期
API
pages.json全局配置文件
总结 uni-app x 是什么
uni-app x#xff0c;是下一代 uni-app#xff0c;是一个跨平台应用开发引擎。
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个问题
dart和原生层通信也还是有延时对象传递需要序列化造成性能问题自渲染而不是原生渲染无可避免会引发混合渲染比如原生的信息流广告内嵌、原生输入法适配造成内存高和输入障碍。
其实不管是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 (score60)
}// 也可以自定义数据类型进行类型规范比如声明一个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的写法
templateview classcontainerbutton clickadd加/button{{ count }}button clickreduce减/button/view
/templatescript languts setup//这里只能写utslet count ref(1);// 加一const add () {count.value;}// 减一const reduce () {count.value;}/scriptstyle.container{margin: auto;display: flex;flex-direction: row;align-items: center;}
/style 选项式API写法
templateview classcontainerbutton clickadd加/button{{ count }}button clickreduce减/button/view
/templatescript langutsexport default {data() {return {count : 1,}},onLoad() {// 页面启动的生命周期这里编写页面加载时的逻辑console.log(onLoad)},methods: {add : function () {this.count;},reduce : function () {this.count--;},}}
/scriptstyle.container{margin: auto;display: flex;flex-direction: row;align-items: center;}
/style页面生命周期
templatescroll-view :bouncesfalseview v-foritem in 90{{ item }}/view/scroll-view
/templatescript setup langutsonLoad((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)})
/scriptstyle.container {height: 1200px;}
/style API
uni-app x支持的API包括
uts的API 详见全局API前面不需要加uni.。如getApp、getCurrentPagesuni.xxx的内置API。数量较多详见uniCloud.xxx的内置API。详见dom的API 详见原生API
由于 uts 可以直接调用 Android 和 iOS 的 api所以 OS 和三方sdk的能力都可以在uts中调用。如下
scriptimport Build from android.os.Build;export default {onLoad() {console.log(Build.MODEL); //调用原生对象返回手机型号console.log(uni.getSystemInfoSync().deviceModel); //调用uni API返回手机型号。与上一行返回值相同}}
/scriptpages.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可以直接上手直接做如果有什么不同可以去看官方文档包看懂的~~
