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的官方文档。

如视频中的 分段式弹窗、半屏路由等等关于Skyline的示例文档都没有吗？

uniapp热更新不会销毁旧实例导致内存里有奇奇怪怪的东西导致的，看看生命周期里有没有会导致内存泄露的东西。

// 连接成功返回之后调佣  
onMounted(() => {  
  // 必须在这里的回调才能获取  
  uni.onBLECharacteristicValueChange(function (buffer) {  
    let int8arr = new Uint8Array(buffer.value).buffer  

  })  
})

把uni.onBLECharacteristicValueChange放进app.vue的生命周期里 保证这个方法只触发一次

效果：

<script setup lang="ts">  
import { ref, onMounted } from 'vue'  

interface Star {  
  left: number  
  top: number  

	

  

  scale: number  
  delay: number  
}  

const starsList = ref<Star[]>([])  

onMounted(() => {  
  const screenWidth = uni.upx2px(750) // 设备屏幕宽度对应的像素值  
  const screenHeight = uni.upx2px(1334) // 设备屏幕高度对应的像素值  

  // 初始化 starsList 数组  
  for (let i = 0; i < 150; i++) {  
    const star: Star = {  
      left: Math.random() * screenWidth,  
      top: Math.random() * screenHeight,  
      scale: Math.random() * 1.5,  
      delay: Math.random() * 1.5,  
    }  
    starsList.value.push(star)  
  }  
})  
</script>  

<template>  
  <view class="wrapper">  
    <view class="circle"></view>  
    <view class="circle1"></view>  
  </view>  
  <view class="stars">  
    <block v-for="(star, index) in starsList" :key="index">  
      <view  
        class="star"  
        :style="{  
          left: star.left + 'px',  
          top: star.top + 'px',  
          transform: 'scale(' + star.scale + ',' + star.scale + ')',  
          animationDelay: star.delay + 's',  
        }"  
      ></view>  
    </block>  
  </view>  
</template>  

<style scoped lang="scss">  
.wrapper {  
  position: absolute;  
  top: 50px;  
  left: 80%;  
  width: 200px;  
  height: 200px;  
  margin-left: -100px;  
  animation: moonline 30s linear;  
  z-index: 1;  
}  

@keyframes moonline {  
  0% {  
    top: 250px;  
    left: 0%;  
    opacity: 0;  
  }  
  30% {  
    top: 150px;  
    left: 40%;  
    opacity: 0.5;  
  }  
  80% {  
    top: 50px;  
    left: 80%;  
    opacity: 1;  
  }  
}  

.circle {  
  position: absolute;  
  top: 0;  
  left: 0;  
  width: 200px;  
  height: 200px;  
  background-color: #efefef;  
  box-shadow: 0 0 40px #ffffff;  
  border-radius: 100px;  
  animation: moonright 30s linear;  
}  

@keyframes moonright {  
  0% {  
    box-shadow: 0 0 10px #ffffff;  
  }  
  30% {  
    box-shadow: 0 0 15px #ffffff;  
  }  
  40% {  
    box-shadow: 0 0 20px #ffffff;  
  }  
  50% {  
    box-shadow: 0 0 25px #ffffff;  
  }  
  100% {  
    box-shadow: 0 0 30px #ffffff;  
  }  
}  

.stars {  
  position: fixed;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 100%;  
  background-color: #000;  
}  

.star {  
  width: 30px;  
  height: 30px;  
  background: url('@/static/images/star.png') no-repeat;  
  position: absolute;  
  background-size: 100% 100%;  
  animation: flash 1s alternate infinite;  
}  

@keyframes flash {  
  0% {  
    opacity: 0;  
  }  
  100% {  
    opacity: 1;  
  }  
}  

.star:hover {  
  transform: scale(3, 3) rotate(180deg) !important;  
  transition: all 1s;  
}  
</style>  

这是一个组件，需要在主页面中使用

<template>  
<XingKong class="xingkong" />  
</template>  

<style lang="scss" scoped>  
.xingkong {  
  position: absolute;  
  top: 0;  
  left: 0;  
  z-index: -1;  
  width: 100%;  
  height: 100%;  
  /* 其他样式 */  
}  
</style>

本文主要写为了获得《安全评估报告》采用uniapp加固安卓app解决问题的一些流程和其中要注意的问题，以供后来者参考。
一、缘起：
> 本app是一款题库软件，内置有笔记功能。用户会在app中写笔记。
2018年收到了魅族应用商店的通知未做理会：
尊敬的开发者：
依据《具有舆论属性或社会动员能力的互联网信息服务安全评估规定》要求，含有如下任一功能（内容）的APP，须按照APP实际办公地原则，前往全国互联网安全服务管理平台（ http://www.beian.gov.cn ）评估报告登录窗口提交安全评估报告。
APP内含有（一个或多个）服务或者功能：论坛、博客、微博客、聊天室、通讯群组、公众账号、短视频、网络直播、信息分享等。
请于12月25日前完成安全评估，同时发送报告截图至 dev@meizu.com 。12月25日之后，魅族应用商店将按要求处理无此报告的相关应用。
感谢您的理解与支持。
直到2023年9月份又收到了华为应用市场的通知，才不得不重视。
尊敬的开发者：
您在华为应用市场上的应用经复测核实存在以下问题，请您参考整改建议及时整改。
整改原因：
您提交的资质证明文件存在问题。不符合华为应用市场审核标准，请您在三个月内完成整改，逾期未整改应用将被下架。
­整改建议：
应用内含论坛（例：题目页面-笔记），需补充提供（1）《安全评估报告》加盖公章（2）《安全评估报告》在全国互联网安全服务管理平台的提交结果截图，且现场检查结果需为“通过”。

第二步、公安部服务管理平台办理手续：
于是，我前往公安部服务管理平台注册账号，登陆，并提交安全检测报告。
具体流程按公安部服务管理平台的要求办理
https://beian.mps.gov.cn/web/business/safeEval/create

第三步：等到网警审核。
公安部服务管理平台，会将该检测记录转交你企业所在的区网警，区网警会与你取得联系，并通知你进行安全检测。
经网友反馈，不同的地方有不同的要求，有的地方提交第三方检测评估报告即可（比如小米或腾讯的隐私检测报告），但我这里是要按要求到指定的检测机构进行检测。

第四步：检测
检测是一波三折的。
1）初测第一次检测采用的是360的免费加固，结果如下：

2）复测。
这个时候我发现uniapp有加固的功能。

说明蚂蚁云加固也有问题，后来联系uniapp的技术，技术联系阿里以后说可以修改，但是需要时间。
技术建议我用腾讯云再加固一下试试。

3）第三次检测。
这一次使用腾讯云加固。结果有一项不合格

4）第四次检测
老实说，uniapp的技术服务很给力，及时跟进每一次的检测结果，并对检测结果进行联系对加固软件进行修改，
技术通知我加固方面已经删除了这个函数，我再次加固，成功通过，获得合格后的《安全评估报告》
下图是检测合格的安全评估报告

第五步：网警现场审核
后天再去办理这一步，希望一切顺利，以后有结果我再反馈给大家。

最后总结：
这里面每一个步骤的解决都不是顺利的，需要加固平台的技术给力才行。
因为每一个检测中心的检测标准不一定完全一致，加固平台也不一定能满足所有的检测中心。
这需要加固平台鼎力支持才可能达到。

同时，自己不能放弃，要在dcloud中搜索各种可能的解决方案。

关于费用：
目前来看，uniapp是最经济的加固方式。

感谢：
1、要感谢dcloud平台的热心用户，在这个过程中帮我解决了很多问题，特别是隐私权限方面的问题。
2、要感谢dcloud的技术热心跟进，无私无偿的帮助解决问题
3、感谢我自己的努力与坚持。

申请ios证书，苹果官方的方法是需要使用mac电脑去申请的，但是很多开发uniapp的朋友们，并没有mac电脑。

这里我分享一个在线工具，在线即可申请ios证书。

详细的使用教程如下：

https://www.yunedit.com/xueyuan/jx/ioscert017

2023年8月后，现在上架的app都需要备案了，无论是新上架还是已上架的app都要求做备案

网上的教程要么就是要使用mac电脑去获取公钥，android则需要安装工具去获取公钥，实在是太麻烦了。

而且不同的备案平台，要求录入的公钥的格式还不一样，有的需要输入公钥16进制，有的需要输入公钥10进制。

分享一个视化工具，上传证书就可以获取app的公钥和MD5值，省去了很多时间，无需安装工具和使用mac电脑即可获取到公钥，而且这个工具的查询结果包含了各平台需要的公钥原文、公钥16进制和公钥10进制的值：

https://www.yunedit.com/androidmd5

https://www.yunedit.com/iosmd5

个人承接各类App项目，网站、小程序等，坐标武汉，其他地区也可，全栈开发，价格美丽。欢迎咨询微信：batik2020

汇总贴：深入浅出管理 uni-app 依赖的 uvm

经验分享的目标

逛论坛发现有一些问题归属于@dcloudio/uvm ，问题相似，解答也相似，这里做个汇总帖子，争取能一次性解决常见问题。

本文目标是带读 uvm 源码，熟悉和理解 uvm 设计思路和作用，并汇总常见问题，最终达到熟悉 uvm 源码能自主解决问题的目的。

uvm 全称是 uni-app version manager，可以类比 nvm - node version manager。

背景介绍

uvm 作为官方的解决方案，在官网文档 https://uniapp.dcloud.net.cn/quickstart-cli.html#cliversion 有明显提及：

可以使用  @dcloudio/uvm  管理编译器的版本，此工具仅自动增加或更新 uni-app 编译器主要依赖，对于新增的编译命令（scripts）暂时不会自动处理，需手动参考新工程进行配置。

作为一个高速迭代的技术框架，uni-app 和周边生态每天都会开发编码、修复问题。出了常规的前端方案，还需要同时支持 hbuilderX，陈旧版本的依赖是没有意义的，是有最新版本对当前项目有明显的意义。

通过一种方案，实现前端依赖自动升级就显得有必要了，这个过程最好是一键升级，不需要关注当前的版本，和最新的版本具体是什么。

因此 @dcloudio/uvm 就出现了，在项目目录中执行 npx @dcloudio/uvm 就能实现 package.json 相关依赖的自动更新。

出于一些历史原因，uvm 的项目源码没有放到公网展示，但 npm 的产物没有走压缩编译，阅读产物源码和开发源码效果一致，这里简单介绍下源码和大致代码结构。

项目源码

访问 npm 仓库 @dcloudio/uvm，点击 Code 部分。可以看到最终的产物，和原始代码没什么区别。https://www.npmjs.com/package/@dcloudio/uvm?activeTab=code

首先看 package.json 识别相关依赖和注册命令。

package.json

"dependencies": {  
"cross-spawn": "^7.0.3",  
"inquirer": "^8.2.0",  
"minimist": "^1.2.5",  
"node-fetch": "^2"  
},  
"devDependencies": {  
"xmldom": "^0.6.0"  
}

依赖比较简单，跨平台执行命令，交互式 cli，请求发送。相关的，主要还是看 bin。

命令注册看 bin 注册 bin/index.js，源码如下，相对比较简单和整齐。

通过阅读源码可以看到，当通过注册命令启动时候，会读取当前 argv 参数，比如不传的话默认填写 latest，也会读取当前命令行所代表的项目地址。

流程

在截图 line30 会执行 start()，会依次经历 info() find() 和 get()，最后是 merge()。

info()

在 info() 方法中，会读取当前目录的 package.json 去分析 devDependencies 依赖是否包含下面的依赖：

const plugins = {  
  vue2: '@dcloudio/vue-cli-plugin-uni',  
  vue3: '@dcloudio/vite-plugin-uni'  
}

最终返回对应的依赖和是否 vue3，这意味着 vue2 和 vue3 要升级的依赖是不同的。这里挖个坑，后面带读 @dcloudio/vite-plugin-uni 依赖的原理，感兴趣请评论区告诉我。

find()

定位到 /@dcloudio/uvm/lib/version.js#find。

在 find 方法中，会读取当前的 plugin 、和 具体版本特征值或者"latest" 、是否 vue3 进行传递判断。

实际处理使用拿到当前的版本最后一段数字，去远程拉数据，不外乎 latest alpha release 三个取值。获取远程的 version 值。比如 3.96.2023110403，这里截图打个断点看看：

断点进相关历史判断。

之后继续请求 'https://registry.npmmirror.com/@dcloudio/vite-plugin-uni'，还是各种特征值判断。

这里会请求远程数据，获取 hbuilderX 版本信息，和 registry 信息。这里是对网络有要求。

这里的 registry 默认是 cnpm ，这依赖 cnpm 的稳定性，有一定网络波动的风险，但起码能保证国内用户能访问通。

get()

还会继续判断 get 方法，这里以 vue3 的为例，最终回去获取 https://gitee.com/dcloud/uni-preset-vue/blob/vite/package.json 的信息，也就是以远程库为基准进行处理。

为了兼容历史版本的变更，这里逻辑基本不可读了，做了大量版本的兼容。在翻阅 ask 社区 uvm 问题时候，可以看到一些兼容的血泪史。

这里如果是 vue3 会进入 getVue3()，这里默认会读取 gitee 的远程仓库信息。如果出于某种原因，github 和 gitee 仓库没有正确同步，就会导致信息不匹配。

merge()

这一步骤是最后的执行阶段。会拿到 deps ，准备具体执行。使用 spawnAsync 去分别更新依赖和开发者依赖。

这一块使用 cross-spawn 绕过不同系统执行命令的问题。

技术总结

通过上面简单的核心逻辑带读，可以看到 uvm 执行的本质思路是跨系统执行命令，获取当前版本信息和远程 gitee 上典型仓库的 package.json，进行 复杂 判断，得出要升级的结果。

常见 QA

运行报错提示 Not find version xxx ，请提供具体版本号

这个目前已经没有类似问题了，对一些历史陈旧的版本可能存在一定问题，如果你遇到了请提供你当前的版本号。

运行报错提示 code ETARGET

可能是缓存和网络问题，尝试删除缓存和当前 node_modules ，尝试重新安装依赖。
也可能是网络同步问题，发版之后同步到国内需要一定时间，可以休息一下等一等再尝试。