uniapp-x 希望可以支持最基本，瀑布流，和普通的，一行显示2个或者多个item的情况 这也算最基本的列表功能了吧

uniapp x 数据类型那块太难用了，不像js也不像java，玩了两天。放弃了，map list太难用了。先改改吧，还有接口太少，抓紧更新，代码为了适配，写的像屎一样。

问题

uni-app-x的webview组件貌似少了很多的接口，其中就包括获取网页信息，包括dom节点等等

思路

当webview加载完毕之后使用webview上下文向页面注入uni.webview.1.5.5.js代码，然后再注入一段操作dom的js代码，并将结果通过postmessage接口传回uts。话不多说，直接上代码

<template>  
    <web-view id="web-view" :src="url" :webview-styles="styles" @load="Load" @message="Message"></web-view>  
</template>  

<script>  
    let fs = uni.getFileSystemManager()  
    export default {  
        data() {  
            return {  
                url: '',  
                src: '',  
                styles: { progress: { color: "#07C160" } },  
                webviewContext: null as WebviewContext | null,  
                javascriptString: `  
                !function(document) {  
                    var title = document.title;  
                    uni.webView.postMessage({  
                        data: {  
                            documentTitle: title  
                        }  
                    })  
                }(document)  
                `  
            };  
        },  
        onLoad(options : OnLoadOptions) {  
            // 接受url参数  
            this.url = options["url"] ?? ""  
        },  
        onReady() {  
            // 创建webview上下文对象  
            this.webviewContext = uni.createWebviewContext('web-view', this)  
        },  
        methods: {  
            Load(e : UniWebViewLoadEvent) {  
                // 页面重新加载时获取页面链接地址  
                this.src = e.detail.src  
                // 读取库文件内容  
                fs.readFile({  
                    encoding: 'utf-8',  
                    filePath: '/hybrid/html/uni.webview.1.5.5.js',  
                    success: (res : ReadFileSuccessResult) => {  
                        // 将库文件代码和执行代码注入到网页  
                        this.webviewContext?.evalJS(res.data + this.javascriptString)  
                    }  
                } as ReadFileOptions)  
            },  
            // 接收网页传入的消息  
            Message(e : UniWebViewMessageEvent) {  
                let documentTitle = e.detail.data[0]['documentTitle'] as string  
                if (documentTitle == '') {  
                    documentTitle = this.src  
                }  
                // 设置网页标题  
                uni.setNavigationBarTitle({  
                    title: documentTitle  
                })  
            }  

        }  
    }  
</script>  

<style lang="scss">  

</style>

需要相机直接在页面上呈现

2024年6月21日-23日，第六届华为开发者大会(HDC.Together 2024)在东莞松山湖盛大举办，本次盛会重磅发布了万众关注的HarmonyOS NEXT。

作为鸿蒙生态的重要合作伙伴和深度参与者，DCloud CTO 崔红保受邀出席本次大会，并在鸿蒙生态伙伴SDK论坛中发表《uni-app助力开发者快速构建高性能鸿蒙原生应用》的技术演讲，现场反响热烈。

崔红保先从开源指标、插件生态等维度介绍了uni-app的发展现状，以uni-app的功能框架图为例，介绍了uni-app如何在跨平台的过程中，不牺牲平台特色，优雅的调用平台专有能力，真正做到海纳百川、各取所长。

接着，介绍了uni-app的两套鸿蒙化适配方案。

方案一，是对存量uni-app项目的开发者非常友好的webview方案，这套架构是业内主流的Hybrid App架构，即逻辑层、视图层分离架构。老版uni-app在App平台使用的是这套架构，微信等各家小程序使用的也是这套架构。使用本方案，可以帮助开发者快速将之前基于uni-app开发的App、小程序、H5等，快速发布成鸿蒙App，快速入驻鸿蒙生态，抢先接收鸿蒙的流量红利。

方案二，是能获取更高性能、更佳体验的纯原生方案，也就是uni-app x。

每个App跨平台框架诞生时，都曾梦想颠覆原生，但从未成功，原因何在？

uni-app团队有十多年的跨平台框架开发经验，经过漫长的测试和思辨，我们发现关键在于运行时。若想媲美原生，运行时只能且必须也是原生。抛开渲染引擎不谈，业内的rn/weex等框架引入的V8/JS Core等运行环境，导致了逻辑层、视图层在两个进程中的通讯阻塞问题，相比原生开发的逻辑、视图均在一个原生进程中，业内目前的跨平台框架，天生有难以逾越的性能缺陷。

想清楚了这个关键点，跨平台框架就有了新的思路，那就是uni-app x目前的方案：开发态基于Web技术栈进行，但运行时需转化为各平台原生语言。

具体来讲，在web平台和小程序平台，我们将uni-app x编译为JS，这和目前的uni-app基本是一致的。但到了App平台，我们会将JS和Vue代码，编译为对应平台的原生语言。比如iOS平台，我们会将TS编译为swift，在Android平台，我们会将TS编译为Kotlin，到了鸿蒙平台，我们会将TS和Vue编译为arkTS和arkUI。

以uni-app x的鸿蒙化为例，进一步解释：

1. 开发者依然基于 TS+Vue 的 Web 技术栈来编写代码，编码完毕后，uni-app x 编译器通过 swc 将 TS 和 Vue 代码编译成 arkTS/arkUI；

2. 编译到鸿蒙开发者工具中的项目，代码已经变成了arkTS/arkUI，那使用的就是arkUI原生渲染，相比webview的渲染，性能更高。同时业务代码转换成arkTS，逻辑和渲染都使用鸿蒙原生，就实现了纯血的鸿蒙App。

3. 最后，因为开发者在开发态使用的是Vue，用到大量数据响应的机制，所以在运行时，需要实现 arkTS 版的 Vue runtime，从而让开发者的业务数据变化能触发 arkUI 的更新。

使用 uni-app 开发鸿蒙应用，和之前开发各家小程序体验接近。主要编码工作在 HBuilderX 中完成，HBuilderX 支持鸿蒙OS的各种语法提示；编码完成后，将项目运行到鸿蒙开发者工具DevEco Studio，通过 DevEco 完成模拟器测试及hap安装包制作。

鸿蒙时代即将来临，开发鸿蒙的最佳实践是什么？uni-app值得推荐！原因有四，如下图。

面向未来，uni-app团队会持续对鸿蒙开发进行优化，重点会在性能体验、生态支持、开发体验、元服务等维度进行迭代升级。

通过HDC2024华为开发者大会，我们看到华为这次不再是画大饼，鸿蒙真的来了！

uni-app 的鸿蒙版目前处于邀请试用状态，部分开发者的App鸿蒙化适配已接近尾声。下图是基于 uni-app 开发的华为莫塞尔商城的鸿蒙化运行截图，运行体验非常流畅。

支持鸿蒙平台的uni-app Alpha版本，将于7月初面向所有开发者发布，敬请期待。

星河璀璨，基于uni-app加入鸿蒙正当时！

记录自己的踩坑日记一：

图片来自网络，只是举例：
上图
图1是打包成功的画法

图2 图3 是错误的画法

图1的右边黑线和底部黑线是属于保护区，左边和上边属于拉伸区

uniappx中uni.switchTab跳转tabBar页面，url用相对路径报错目标页面不是tabBar页面使用绝对路径时可以

uniapp x挺好，不过我怎么将已有的项目转到uniapp x上？我们经过研究，认为无法完成转换，下面是一些主要困难。

1. 引用的三方npm js库，这个是最难的，基本无解，我们引用的三方库大部分没有ts版的，少部分有ts版的，就算是有ts版的，也无法使用，因为uts的语法只是ts的子集，等你编译的时候，你会发现n多语法错误。由于这些都是第三方的，我们基本无法修改，唯一的解决办法，就是用uts重写一套，这基本上是不可能做到的。
2. 引用的三方UI库，由于使用了三方UI，如果要转X，就必须重新做所有的UI，这个可以实现，就是从头再做一遍UI，重新开发
3. 自己的业务代码，这个是最好解决的 ，就是将JS转成UTS代码，不过也需要大量的时间去做，然后重新做测试。

综上所述，对于已有的项目转uniapp x基本上就是重做，有可能就算想重做也做不出来，因为依赖了一些核心js库，这个js库我们无法自己写，又找不到UTS版的。不知道各位大神有什么好的解决方案！

另外，对于uniapp x的发展，提一些建议，就是不要放弃uniapp的发展，一定要支持鸿蒙next，否则会流失大量的用户。先不说老用户难以将uniapp转为uniapp x，就算是新用户，开发一个新的app，不能不用第三方库，而现在uts三方库基本为0，难道都要重新发明轮子？不要觉得ts库可以拿来用，uts有很多的ts语法都不支持，而现有的ts库，如果不做修改，你都用不了，除非现在的ts库作者再出一版uts版。而UI和业务代码，对于新用户而言，倒是可以克服的。

总之，从一个开发者角度讲，我认为uniapp x从发展到成熟时间不会短。我不是很理解，uniapp已经趋向成熟了，随着未来硬件发展，性能将不成问题，要知道基本上小厂才会使用uniapp，不那么在意性能。对于大厂，就算你搞了X，人家也不用。

现在搞个uniapp x，从头开始再玩一次？等你成熟了，发现已经进入云时代了，所有的应用都变成云应用了，性能已经不那么重要了。还有，你不玩uniapp，人家微信愿意玩，donut正在如火如荼的搞，我相信donut一定会适配鸿蒙的，现在我也不得不开始学习一下donut了，一旦uniapp不适配鸿蒙，还有个后路啊。

什么是UniAPP X

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

uni-app x 没有使用js和webview，它基于 uts 语言。在App端，uts在iOS编译为swift、在Android编译为kotlin，完全达到了原生应用的功能、性能。
更重要的是，UniAPP X未来也会支持鸿蒙，这里引用DCloud社区的官方答复
> DCloud有资源第一时间得到鸿蒙无apk手机的上市计划。我们和华为保持着紧密沟通，会把握好节奏，不用担心。大家可以观察一个信号，等微信的鸿蒙next版敲定了，鸿蒙无apk手机就可以明确上市计划了。鸿蒙的开发语言是arkTS，uni-app x是uts，都是变种ts，uni-app x编译到鸿蒙是靠谱的。
而把uni-app的js编译成arkTS不靠谱。除非编个h5跑在鸿蒙的webview里，但这个体验估计没多少人能接受。

如何学习UniAPP X

1. 学习官方文档

• UniAPPX 官方文档
• 官方组件库
• easyX-为UniApp X设计的免费开源电商业务组件库
• UTS语言

这里的重点和难点应该是UTS语言，因为UTS语言需要编译成Kotlin语言，所以有强类型要求，会TypeScript的同学适应起来会快一些，只是习惯js的同学可能上手会难，可以参考官方组件库和easyX的写法，多多学习。

2. 学习UTS语言

UTS语言是TS的变种，建议先学习TS。就连鸿蒙原生开发用的ArkTS也是TS的变种（笔者最近在开发鸿蒙原生应用，会TS上手很快），可见TS的重要性。学习TS可以参考如下教程：
TypeScript 教程

上手TS之后，需要重点关注UTS和TS的区别。

• UTS为Kotlin和Swift新增了一些专有数据类型；
• UTS有一些特殊的内置对象和API

其实这些区别主要是为了原生开发的，但是比直接上手安卓和iOS原生开发要简单太多。

3. 关注UniAPP X的Vue规范

uni-app x的vue规范，按照vue3规范实现，但目前不支持setup组合式写法，仅支持option选项式写法。而且有些Vue3的api也不支持。大家在开发过程中遇到问题，要查看官方文档里重点列出的差异
UniAPP X的Vue实现

原生安卓商城的开发

前面的学习铺垫，是为了大家开发过程更加顺利。实际上，easyX已经封装好了常见的电商业务组件，并且已经上线了一些模板。即使是小白，也可以直接用easyX开发出一个原生商城。先看效果

这个页面的代码可以查看Gitee示例代码， 大家直接复制粘贴即可。

使用easyX组件库和模板库

使用easyX有两种方式，一种是从Gitee下载源码，另一种是从UniAPP插件市场下载源码

• Gitee下载地址：https://gitee.com/liuming9157/easyx

• 插件市场下载地址：https://ext.dcloud.net.cn/plugin?id=15602

下载源码之后解压，找到components目录，将该目录下的所有内容复制到你的UniAPP X项目下的components目录即可使用。
eaxyX支持按需引用，各个组件的具体使用可以查看相关easyX组件文档

当然，您也可以直接下载安卓easyX的安卓apk体验。

easyX演示包下载安装链接

easyX采用MIT协议开源，组件库和模板库仍在不断扩充。对于开发原生商城应用的同学来说，是个宝藏库。等UniAPPX支持鸿蒙后，easyX用来开发鸿蒙原生商城，想想真是吊炸天的开发利器。

应用打包

安卓打包是需要证书的。如果想省事，直接使用Dcloud的公共云证书，傻瓜式操作，不过因为有人滥用这个证书，现在很多品牌的手机会报毒，所以还是建议自己申请证书。
免费证书申请攻略

应用上线

如果要上架到华为、小米、oppo等应用市场，那就需要软件著作权和应用备案了。软件著作权的申请周期比较长，大概3个月，应用备案就快很多了。网上很多服务商提供这两项服务，大家也可以私信我，公司业务可以按照市场最低价给大家服务，个人业务可以提供一些免费指导然后你自己操作。

我是刘明，十年创业老兵，开源技术爱好者。
有问题欢迎私信。

  type SwiperTabsItem = {  
    x : number,  
    w : number  
  }  

  type SwiperViewItem = {  
    title : string,  
  }

提示 Parsing error: Unexpected token SwiperTabsItem
编译报错： [plugin:uni:app-uvue] Parse error @:1:1

这种应该如何解决呢？

uni-app x，下一代uni-app，一个神奇的产品。

用vue语法、uni的组件、api，以及uts语言，编译出了kotlin的app。不再使用js引擎和webview。纯纯的kotlin原生app。

uni-app x，让“跨平台开发性能不如原生”的这条曾广为流传的规则，扔进了历史的垃圾桶！

uni-app x原理简析

当uni-app x整体推到你面前时，你可能觉得难以想象，怎么可能编译为纯原生App？uni-app过去之所以能跨平台，是因为js是跨平台的啊。

所谓，成也萧何败也萧何，而uni-app过去在app上性能不如原生，也很大程度是因为js和原生的交互通信阻塞问题。

简述下uni-app x的原理。

其实uni-app x使用的不是js，而是DCloud在2022年发布的uts语言。这是一种基于ts改造的语言，改造的目的就是让它可以全平台编译。

我们知道js和原生语言的差异性主要在于类型和动态性。而ts已经为js提供了类型。uts是在ts的基础上，融合kotlin和swift的特性，抽象出了一套全平台可用的编译型语言。

uts在不同平台，编译为不同的产物：

• 在Web中编译为js
• 在iOS中编译为swift
• 在Android中编译为kotlin

然后DCloud又基于uts开发了uvue的ui引擎，可使用vue语法来开发界面，再补上uni的组件和api，最终形成了你目前看到的uni-app x。

让你使用熟悉的代码、跨平台的方式，却能写出和原生的功能性能完全一致的app。

而且有趣的是，我们与原生开发者交流，发现使用uni-app x开发应用，比原生开发要快非常多。

案例

很多开发者都在关注着uni-app x，等待先行者趟坑。

这几个月来，很多先行者已经发布了他们的基于uni-app x的产品。而HBuilderX也发布了里程碑的3.98正式版，已经可以支撑商业应用。

快亿商城

这是一个云端一体的、完整的电商项目。客户端、服务器，甚至还包括管理端：快亿商城管理端

t-uvue-ui

这是一个丰富的ui库，解救那些不擅长界面的开发者。当然即便是擅长界面开发的，使用这个组件库也能提升不少开发效率。

uXui

一款基于 uni-app x 的、免费、开源的 UI 框架。

快速体验

欢迎你也来体验uni-app x这个神奇的产品：用你熟悉的代码，开发出原生的Android App。

<template>  
    <view class="content">  
        <button @click="buttonClick">{{title}}</button>  
    </view>  
</template>  

<script> //注意这里编写的是uts，是ts的变种  
    export default {  
        data() {  
            return {  
                title: "Hello world"  
            }  
        },  
        onLoad() {  
            console.log('onLoad')  
        },  
        methods: {  
            buttonClick: function () {  
                uni.showModal({  
                    "showCancel": false,  
                    "content": "点了按钮"  
                })  
            }  
        }  
    }  
</script>  

<style>  
    .content {  
        width: 750rpx;  
        background-color: white;  
    }  
</style>

体验uni-app x的真实效果，在外部浏览器里下载hello uni-app x的apk，或扫描下方二维码。

hello uni-app x 演示了uni-app x目前支持的所有内置组件、API、以及诸多页面模版。

质量

uni-app x从源头重视产品质量，第一个版本就支持自动化测试。并已为uni-app x产品编写了几十个测试工程、数十万行测试例代码。

虽然这些工作导致uni-app x初期的迭代速度变慢。但让uni-app x的质量水平大幅提升。每天晚上DCloud内部众多机器在运行这些自动化测试代码，除了监控质量，还在监控启动速度、包体积大小、内存占用等各种关键指标。

插件大赛及生态

由于uts编译为kotlin，也就是kotlin在Android上能用的api、能用的三方sdk，uni-app x里都可以用。

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

上面的示例，在页面启动时打印了2行日志，显示手机型号。

• uni.getSystemInfoSync，是uni的api
• import的Build，是Android os的api

在uni-app x里，可以直接调用os的能力，不受限制，语法是uts的语法，但需要了解什么功能在原生里是哪个api。

使用uni.getSystemInfoSync则比较简单，看uni的文档即可，且可跨平台。

其实，uni.getSystemInfoSync 的内部实现就是一个uts模块，底层使用了一样的代码，也是import了android.os.Build。

uni.的api，大多是uts开发的，它们都开源在uni-api仓库

uni-app x作为一个原生应用，自然可以使用原生的各种sdk，包括flutter、react native、cocos、unity等原生sdk，均可集成使用。

在插件市场，有基于uni-app x的各种作品。

DCloud官方的：

• App升级中心
• uni-id-pages-x

三方项目：

• 快亿商城，云端一体完整的电商项目，还包括管理端：快亿商城管理端
• 考试答题模板
• 短视频模板

ui库：

• t-uvue-ui ：丰富的组件库
• easyX电商组件库：电商业务常见的各种组件库

还有各种原生扩展的ui组件和api插件。

目前已有数百款适配uni-app x的插件。

随着插件大赛的开展，uni-app x周边生态在如火如荼的丰富中。

当然，也欢迎你来参加插件大赛，夺取丰厚的产品。插件大赛介绍详见：https://ask.dcloud.net.cn/article/40812

点击https://uniapp.dcloud.net.cn/uni-app-x/，阅读uni-app x的官方文档。