
uniapp+vue3+vite+ts+scss实现背景星空效果
效果:

参考知乎:用CSS实现一个超美星空特效
使用到的图片
我想在微信小程序中使用,于是让ai帮我修改了一下代码:
<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>
效果:
参考知乎:用CSS实现一个超美星空特效
使用到的图片
我想在微信小程序中使用,于是让ai帮我修改了一下代码:
<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>
收起阅读 »

《安全评估报告》之如何采用uniap加固安卓app
本文主要写为了获得《安全评估报告》采用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的免费加固,结果如下:
说明免费加固基本相当于是裸奔,这个时候我需要寻找一个可靠的加固软件。
国内加固软件有360,爱加密,梆梆,顶固,阿里和腾讯加固。
这里如果单次加固是5000左右,有低一点单次加固3500,高一点的是7500左右。
单次加固肯定是不能考虑,原因很简单,你并不能保证100%通过,如果没有通过,你就得来第二次检测。
每一次检测都是需要费用的,而且加固也不便宜。
2)复测。
这个时候我发现uniapp有加固的功能。
这里有腾讯云加固和蚂蚁云加固,我选择了蚂蚁云。
加固以后的结果如下:
说明蚂蚁云加固也有问题,后来联系uniapp的技术,技术联系阿里以后说可以修改,但是需要时间。
技术建议我用腾讯云再加固一下试试。
3)第三次检测。
这一次使用腾讯云加固。结果有一项不合格
经uniapp联系腾讯云加固,删除了这个函数,再次加固,进行第四次检测。
4)第四次检测
老实说,uniapp的技术服务很给力,及时跟进每一次的检测结果,并对检测结果进行联系对加固软件进行修改,
技术通知我加固方面已经删除了这个函数,我再次加固,成功通过,获得合格后的《安全评估报告》
下图是检测合格的安全评估报告
第五步:网警现场审核
后天再去办理这一步,希望一切顺利,以后有结果我再反馈给大家。
最后总结:
这里面每一个步骤的解决都不是顺利的,需要加固平台的技术给力才行。
因为每一个检测中心的检测标准不一定完全一致,加固平台也不一定能满足所有的检测中心。
这需要加固平台鼎力支持才可能达到。
同时,自己不能放弃,要在dcloud中搜索各种可能的解决方案。
关于费用:
目前来看,uniapp是最经济的加固方式。
感谢:
1、要感谢dcloud平台的热心用户,在这个过程中帮我解决了很多问题,特别是隐私权限方面的问题。
2、要感谢dcloud的技术热心跟进,无私无偿的帮助解决问题
3、感谢我自己的努力与坚持。
本文主要写为了获得《安全评估报告》采用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的免费加固,结果如下:
说明免费加固基本相当于是裸奔,这个时候我需要寻找一个可靠的加固软件。
国内加固软件有360,爱加密,梆梆,顶固,阿里和腾讯加固。
这里如果单次加固是5000左右,有低一点单次加固3500,高一点的是7500左右。
单次加固肯定是不能考虑,原因很简单,你并不能保证100%通过,如果没有通过,你就得来第二次检测。
每一次检测都是需要费用的,而且加固也不便宜。
2)复测。
这个时候我发现uniapp有加固的功能。
这里有腾讯云加固和蚂蚁云加固,我选择了蚂蚁云。
加固以后的结果如下:
说明蚂蚁云加固也有问题,后来联系uniapp的技术,技术联系阿里以后说可以修改,但是需要时间。
技术建议我用腾讯云再加固一下试试。
3)第三次检测。
这一次使用腾讯云加固。结果有一项不合格
经uniapp联系腾讯云加固,删除了这个函数,再次加固,进行第四次检测。
4)第四次检测
老实说,uniapp的技术服务很给力,及时跟进每一次的检测结果,并对检测结果进行联系对加固软件进行修改,
技术通知我加固方面已经删除了这个函数,我再次加固,成功通过,获得合格后的《安全评估报告》
下图是检测合格的安全评估报告
第五步:网警现场审核
后天再去办理这一步,希望一切顺利,以后有结果我再反馈给大家。
最后总结:
这里面每一个步骤的解决都不是顺利的,需要加固平台的技术给力才行。
因为每一个检测中心的检测标准不一定完全一致,加固平台也不一定能满足所有的检测中心。
这需要加固平台鼎力支持才可能达到。
同时,自己不能放弃,要在dcloud中搜索各种可能的解决方案。
关于费用:
目前来看,uniapp是最经济的加固方式。
感谢:
1、要感谢dcloud平台的热心用户,在这个过程中帮我解决了很多问题,特别是隐私权限方面的问题。
2、要感谢dcloud的技术热心跟进,无私无偿的帮助解决问题
3、感谢我自己的努力与坚持。

ios、android备案公钥、MD5等值的最简单查询方法
2023年8月后,现在上架的app都需要备案了,无论是新上架还是已上架的app都要求做备案
网上的教程要么就是要使用mac电脑去获取公钥,android则需要安装工具去获取公钥,实在是太麻烦了。
而且不同的备案平台,要求录入的公钥的格式还不一样,有的需要输入公钥16进制,有的需要输入公钥10进制。
分享一个视化工具,上传证书就可以获取app的公钥和MD5值,省去了很多时间,无需安装工具和使用mac电脑即可获取到公钥,而且这个工具的查询结果包含了各平台需要的公钥原文、公钥16进制和公钥10进制的值:
https://www.yunedit.com/androidmd5
https://www.yunedit.com/iosmd5
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
个人承接各类App项目,网站、小程序等,坐标武汉,其他地区也可,全栈开发,价格美丽。欢迎咨询微信:batik2020
个人承接各类App项目,网站、小程序等,坐标武汉,其他地区也可,全栈开发,价格美丽。欢迎咨询微信:batik2020

【汇总贴】深入浅出管理 uni-app 依赖的 uvm
汇总贴:深入浅出管理 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
,尝试重新安装依赖。
也可能是网络同步问题,发版之后同步到国内需要一定时间,可以休息一下等一等再尝试。
汇总贴:深入浅出管理 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
,尝试重新安装依赖。
也可能是网络同步问题,发版之后同步到国内需要一定时间,可以休息一下等一等再尝试。

App版本更新,跳转应用市场更新通用
类似微信关于我们 版本更新 的效果。
// #ifdef APP-PLUS
if (uni.getSystemInfoSync().platform == "ios") {
let appleId = 12345678;
plus.runtime.launchApplication({
action: `itms-apps://itunes.apple.com/cn/app/id${appleId}`,
})
} else if (uni.getSystemInfoSync().platform == "android") {
// 通用应用市场
// 包名 com.xxxx.xxxxx
let appurl = "market://details?id=com.xxxx.xxxxx";
plus.runtime.openURL(appurl);
}
// #endif
详见: App快速开发模板
类似微信关于我们 版本更新 的效果。
// #ifdef APP-PLUS
if (uni.getSystemInfoSync().platform == "ios") {
let appleId = 12345678;
plus.runtime.launchApplication({
action: `itms-apps://itunes.apple.com/cn/app/id${appleId}`,
})
} else if (uni.getSystemInfoSync().platform == "android") {
// 通用应用市场
// 包名 com.xxxx.xxxxx
let appurl = "market://details?id=com.xxxx.xxxxx";
plus.runtime.openURL(appurl);
}
// #endif
详见: App快速开发模板
收起阅读 »
uni.navigateTo 跳转外部H5链接 失败
uni.navigateTo 跳转外部H5链接 失败回调显示"errMsg": "navigateTo:fail page `/pages/my/offer/https://miniprogram-kyc.tencentcloudapi.com
为什么会在我的链接前面自动拼接当前页面的路径 导致跳转失败
uni.navigateTo 跳转外部H5链接 失败回调显示"errMsg": "navigateTo:fail page `/pages/my/offer/https://miniprogram-kyc.tencentcloudapi.com
为什么会在我的链接前面自动拼接当前页面的路径 导致跳转失败

uniapp 企微H5 通讯录选人以及 ww-open-data 无法显示人名问题总结
直接说
一开始按uni官网引入,但是报错不能用
https://ask.dcloud.net.cn/article/35380
说到底还是uni占用wx导致的,因为我还还要用通讯录选人和通讯录组件,所以放弃了
======================================================================
后来按企微官方cdn引入,这两个顺序不能调整
<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js" referrerpolicy="origin"></script>
<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js" referrerpolicy="origin"></script>
然后调用wx.config和wx.agentConfig也不行,想着肯定也是uni占用wx导致的,所以在调用的页面一开始做重新赋值
window.wx=null;
window.wx = window.jWeixin;
我在windows电脑上和安卓手机上可以了,但是苹果电脑又报错,提示config不是一个方法
所以特殊处理一下
const osName=uni.getSystemInfoSync().osName
if(osName != 'ios' && osName!='macos'){
window.wx=null;
window.wx = window.jWeixin;
}
然后试了一下 windows电脑 安卓 苹果电脑都能正常选择和显示人名了
最后提示一下:如果你要用ww-open-data组件,只能用window.wx 所以有的文档说用jWeixin不影响初始化和选择人员,但是通讯录组件显示不了人名
直接说
一开始按uni官网引入,但是报错不能用
https://ask.dcloud.net.cn/article/35380
说到底还是uni占用wx导致的,因为我还还要用通讯录选人和通讯录组件,所以放弃了
======================================================================
后来按企微官方cdn引入,这两个顺序不能调整
<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js" referrerpolicy="origin"></script>
<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js" referrerpolicy="origin"></script>
然后调用wx.config和wx.agentConfig也不行,想着肯定也是uni占用wx导致的,所以在调用的页面一开始做重新赋值
window.wx=null;
window.wx = window.jWeixin;
我在windows电脑上和安卓手机上可以了,但是苹果电脑又报错,提示config不是一个方法
所以特殊处理一下
const osName=uni.getSystemInfoSync().osName
if(osName != 'ios' && osName!='macos'){
window.wx=null;
window.wx = window.jWeixin;
}
然后试了一下 windows电脑 安卓 苹果电脑都能正常选择和显示人名了
最后提示一下:如果你要用ww-open-data组件,只能用window.wx 所以有的文档说用jWeixin不影响初始化和选择人员,但是通讯录组件显示不了人名
收起阅读 »
想找人做一套漫画APP
想找人做一套漫画APP,预算1000,后台是帝国cms。Vue2或Vue3都可以,能接受的来。企鹅8544#593#63(去掉#)
想找人做一套漫画APP,预算1000,后台是帝国cms。Vue2或Vue3都可以,能接受的来。企鹅8544#593#63(去掉#)