在写下这篇经验之前我的项目都是基于vue2的，这个过程中使用renderjs也没有报什么错；直到我在uniapp使用 vue3项目并将之前的项目迁移过来的时候；就发生了一堆魔幻的事情；当然大部分都在可控的范围内；但是其中有个别组件内部使用了 renderjs的文件就没那么幸运了，一直报什么找不到我定义的renderjs模块，
<span style="color:red;">uniapp-view-umd.js 巴拉巴拉的</span>
他只是给你提示这个错误的话，你是根本玩不转的，因为你只知道 这个错，但是根本就没有给你定位到具体的文件地方；起初我在想是不是在uniapp里面使用vue3是不对的；基于这个猜想我单独弄了一个demo也是vue3的，在里面写了一个组件；简单的使用了 renderjs来进行逻辑层和视图层之间的通信；发现是可以走的通的；那么就说明在uniapp使用vue3项目是可以正常使用renderjs的，那么这下问题排查就只能是代码写法和语法报错上去查找了；

然而找了一圈我发现自己写的代码没有问题；那么我在一想是不是第三方包的问题；果不其然我在控制台看到了一个错误；说是什么<span style="color:red">process is underined</span> 我的vue3是基于vite搭建的，默认 是不支持这个process的；所以报错；那么我在vite.config.js里面define里面定义了一下 ；具体定义方法可以在网上查找了一下；不过我是直接找到了最新下载的插件，直接把里面的判断给关掉了；不用procee去判断；此时再去运行项目发现就不再报错；

还有一点值得提的就是，如果在使用renderjs的组件内部有时候引用的插件也会导致这个错误；所以需要大家在使用rendrjs的地方一个注释引用的插件的方式去排查；

建议组件实现一个类似android compose的ui组件

购买的插件默认给出的包名是错误的，和实际打包的包名不一致，怎么更换？

经过了三周的爆肝研发，我的又一款原创跨平台重磅新作tauri2.1+vite6+vue3 setup+pinia2+arco.design桌面客户端OS管理系统Tauri2Vue3OS，正式宣告完结了。支持macos和windows两种桌面风格。

Tauri2.0-Vue3-MacOS桌面端os平台|tauri2+vite6.0+arco电脑版OS管理系统

vue3-tauri2-os系统提供macos和windows11桌面风格、自研拖拽式栅格桌面引擎、封装tauri2多窗口管理、自定义json配置桌面/Dock菜单。

实现技术

• 技术框架：vite^6.0.3+vue^3.5.13+vue-router^4.5.0
• 跨平台框架：tauri^2.1.1
• 组件库：@arco-design/web-vue^2.56.3 (字节桌面版vue3组件库)
• 状态管理：pinia^2.3.0
• 拖拽插件：sortablejs^1.15.6
• 滑屏组件：swiper^11.1.15
• 图表组件：echarts^5.5.1
• markdown编辑器：md-editor-v3^5.1.1
• 模拟数据：mockjs^1.1.0

tauri2.0-vue3os已经正式发布到我的原创作品集，感兴趣的可以去看看。

https://gf.bilibili.com/item/detail/1107621011

项目框架目录结构

使用最新版tauri2.0跨平台框架技术，整合vite6构建工具。

tauri2.0-vue3os布局模板

<script setup>  
  import { appState } from '@/pinia/modules/app'  

  // 引入布局模板  
  import MacosLayout from './template/macos.vue'  
  import WindowsLayout from './template/windows.vue'  

  const appstate = appState()  

  const DeskLayout = {  
    macos: MacosLayout,  
    windows: WindowsLayout  
  }  
</script>  

<template>  
  <div class="vu__container flexbox" :style="{'--themeSkin': appstate.config.skin}">  
    <component :is="DeskLayout[appstate.config.layout]" />  
  </div>  
</template>

<script setup>  
  import { appState } from '@/pinia/modules/app'  

  import Titlebar from '@/layouts/components/titlebar/index.vue'  
  import Desk from '@/layouts/components/mac/desk.vue'  
  import Dock from '@/layouts/components/mac/dock.vue'  

  const appstate = appState()  
</script>  

<template>  
  <div class="vu__layout flexbox flex-col">  
    <div class="vu__layout-header">  
      <Titlebar />  
    </div>  
    <div class="vu__layout-body flex1 flexbox">  
      <Desk />  
    </div>  
    <div class="vu__layout-footer">  
      <Dock v-if="appstate.config.dockEnable" />  
    </div>  
  </div>  
</template>

tauri2+vue3栅格布局

栅格桌面菜单支持如下参数配置：

/**  
 * label 图标标题  
 * imgico 图标(本地或网络图片) 支持Arco Design内置图标或自定义iconfont图标  
 * path 跳转路由页面  
 * link 跳转外部链接  
 * hideLabel 是否隐藏图标标题  
 * filter 是否禁用拖拽  
 * background 自定义图标背景色  
 * color 自定义图标颜色  
 * size 栅格磁贴布局 1x1 ... 12x12  
 * padding 内边距  
 * onClick 点击图标回调函数  
 * isNewin 新窗口打开路由页面  
 * children 二级菜单  
 */

支持children配置二级菜单。

tauri2.0+vue3自定义底部Dock菜单

Dock菜单配置参数：

/**  
 * label 图标tooltip提示  
 * imgico 图标(本地或网络图片) 支持Arco Design内置图标或自定义iconfont图标  
 * path 跳转路由页面  
 * link 跳转外部链接  
 * filter 是否禁用拖拽  
 * color 自定义图标颜色  
 * onClick 点击图标回调函数  
 * isNewin 新窗口打开路由页面  
 * children 二级菜单  
 */

另外系统托盘采用tauri2+vue3自定义弹窗实现系统托盘右键功能。

OK，综上就是Tauri2.0+Vue3+Arco实战桌面端os管理系统的一些知识分享。

作者：xiaoyan2017
链接： https://segmentfault.com/a/1190000045667190
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

PHPDisk MyFile 外链存储分享系统 是一套针对网站资源，如音视频、图片、文档，压缩包等一切的信息化资源进行管理的基础系统

适用于网店电商，跨境电商（外贸），音频，长短视频，婚纱照片，建筑图片，广告图片等场合的文件存储外链分享解决方案。

如果经营数个网店或数个网站，可以用一个私有平台管理你N个网站上的文件资源，实现资源统一管理，资源重复使用。

网站存储系统：
http://demo.phpdisk.com/mf/

APP截图：

扫码可以下载APP测试一下（未上架应用中心）：

编辑器什么时间被现在的ai编程支持啊！现在感觉不支持就快淘汰的感觉了！

首先定义个方法

// enable 是否可以下拉刷新  
tooglePullDownRefresh(enable) {  
    const page = getCurrentPages().at(-1)  
    // 当且仅当在pages里初始化设置了下拉刷新时才生效  
    if (!page.$page.meta.pullToRefresh.support) return  
    page.$page.meta.enablePullDownRefresh = enable        
}

然后就实现了，但是会出现禁用之后再开启不会出现下拉动效，这就需要去修改 hbuilderx安装路径\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-h5\dist\uni-h5.es.js中，搜索到usePageRefresh方法之后，在此方法中的onMounted hooks的后面加上

watch(  
      () => pageMeta.enablePullDownRefresh,  
      (enablePullDownRefresh) => {  
        enablePullDownRefresh && nextTick(initElement);  
      }  
  );

如图

然后在需要禁用和开启的页面调用tooglePullDownRefresh(false|true)来开启或关闭就可实现在h5上开启或关闭下拉刷新了！当然，如果官方能给个方法那就更好了

在当前页面直接使用高德地图，标记、弹层、滚动都没问题。

如图：

但是，如果在当前地图页面，转跳到另外页面，【滚动页面就会报错】
如图：

Uncaught Error: Invalid Object: Pixel(NaN, NaN)

找了好几个相关问题的解决方案，最后这个解决了问题：

【将下面3D，改成2D】

map = new AMap.Map("container", {
// 设置地图容器id
iewMode: "3D", // 是否为3D地图模式
zoom: 11, // 初始化地图级别
center: [latitude,longitude], //初始化地图中心点位置
});

参考文件：
https://juejin.cn/post/7424045557067841577
https://github.com/uiwjs/react-amap/issues/121

参考文档

uni-app x 原生 SDK Android 版
文档中的flatDir { dirs('./plugins/') }单引号需要改成双引号，否则会报错

uniappx - 离线自定义基座

Uniappx 离线打包配置
社区这位老哥的文章配合官方的文档一起使用比较好。

HMS Core 官网文档

华为 ScanKit Example
这里我参考的是DefaultView-kotlin

example插件地址

懒人版：直接下载我的示例项目。
android studio example

正式开始

下载 android studio 2023.2.1 Patch 2

最新版或许也可以，不过尽量保持一致好吧
记得安装到其他盘，c 盘足够大可以无视

修改 gradle 安装路径，c 盘足够大可以无视

先添加一下环境变量

点击左上角的图标，点击 File,点击 setting

找到 Gradle,替换路径点击 Apply,点击 OK

JDK

Gradle JDK 17

创建一个 hello world 项目

File->New->New Project

项目信息，尽量保持一致,点击 Finish

创建好之后就是这样的

修改一下Gradle Version 和 Android Gradle Plugin Version

点击File-> Project Structure

先换代理然后点击Sync Project with Gradle Files (这个应该就是拉依赖的意思)
https\://mirrors.cloud.tencent.com/gradle/

启动项目先看看效果
<font color=red>图片中usb调试写错了use</font>

good呀 启动成功了

创建uniappx模块

以下操作请打开官方文档操作,方便复制文字内容
官网文档
社区文档

下载uniappx SDK

复制SDK/libs 到 uniappx/libs
<font color=red>这里不要全部都复制，会报错，请按照官网说的来。图片说明我就不改了</font>

在 uniappx下的build.gradle 文件中添加以下依赖

继续在 uniappx下的build.gradle 文件中添加 aaptOptions

将上面下载的sdk里的plugins文件夹复制到项目根目录（和uniappx同层）

在uniappx模块的build.gradle下添加插件io.dcloud.uts.kotlin的依赖

修改项目的settings.gradle

修改项目的gradle.properties

修改app模块下的AndroidMainfest.xml

修改uniappx模块下的AndroidMainfest.xml

继续修改app模块的build.gradle

到这里已经配置的差不多了，接下来配置uts模块插件，也就是我们的华为scanKit

新建uts模块

File->New->New Module

在项目的build.gradle中添加依赖

在x-scan模块的build.gradle中添加依赖

修改uniappx模块的build.gradle

修改app模块的build.gradle

继续修改settings.gradle 添加华为maven仓地址

修改x-scan模块下的AndroidMainfest.xml

最后打开hbuilderx

选择发行->app-android/ios 本地打包->生成本地打包app资源
然后只需要选择android即可

将与appid同名的文件夹复制到uniappx/src/main/assets/apps下

将unpackage/resources/app-android/uniappx/app-android/src下的所有文件复制到uniappx/src/main/java下

将unpackage/resources/app-android/uni_modules/x-scan/utssdk/app-android/src下的文件夹复制到
x-scan/src/main/java下

运行

用手机扫码测试出现扫码结果

正常情况下你可以在x-scan/src/main/java/index.kt中调试你的代码，然后同步到hbuilderx中，全部完成之后可以使用云打包项目即可

报错总结

1. Could not resolve all dependencies for configuration ':classpath'.
   我这边是maven配置的地址将http改成https
2. Minimum supported Gradle version is 7.3.3. Current version is 5.6.4.
   按照提示升级一下
3. 使用chooseImage会报错
   将uniappx sdk中的uni-media-release.aar复制到libs中即可。这里的libs就是上面说的libs

在快手小程序使用scroll-view滚动到底部事件触发时有一定几率触发scroll-view盒子点击事件
在快手模拟器中用滚轮几乎百分百触发，用手势滚动有几率触发

本教程一笔化整个离线打包，不列举其他选情况，主要解决官方文档一次看不懂，后续熟悉流程可自行根据官方文档修改自定义设置。参考链接如下：

1. Andriod离线打包

开发环境及工具

软件的下载演示为MAC，Windows下载选择Windows环境即可。

HbuilderX与SDK版本需要要求一致，PS：有相关bug提出新SDK（4.36）会白屏。本次演示使用4.29版本

1. android studio

   • 

2. HBuilderX

   • 

3. 离线SDK

   • 

   • 

使用新版以及后续SDK注意，新版由本次演示后的版本在注意事项中标明Andriod Studio相关环境使用时仔细阅读使用环境（后续下载SDK官方应该会修改环境），本次演示不包含该内容。

1. java 1.8

Andriod离线打包

Android Studio打开项目

可能遇到的问题：

• 下载gradle失败

• 分不清build.gradle

下载gradle失败

需要修改为国内镜像，参考文档：Android Studio项目gradle下载慢问题

不想去看的话直接修改gradle/wrapper/gradle-wrapper.properties下distributionUrl配置

修改为

distributionBase=GRADLE_USER_HOME  
distributionPath=wrapper/dists  
zipStoreBase=GRADLE_USER_HOME  
zipStorePath=wrapper/dists  
distributionUrl=https\://mirrors.cloud.tencent.com/gradle/gradle-6.5-all.zip

分不清build.gradle

打开的项目加载完成后会切换为Andriod战士方式，配置时建议切换为项目展示方式

项目中包含两个build.gradle文件分别为项目级和应用级，后续教程内以该规则进行描述

生成证书

可参考文档： 生成签名证书

需要JAVA JDK环境1.8

选择APK，点击下一步

选择创建新的

填写信息，确定

证书名称: simpleDemo.keystore  
证书密码： 123456  
别名： simple  
别名密码: 123123  
证书信息:   
demo,demo,demo,changsha,hunan,CN

下一步

创建

申请APP离线key

打开终端

移动到证书所在目录

查看证书信息

命令如下

cd simpleDemo  

ls  

keytool -list -v -keystore simpleDemo.keystore  

123456(这里是我生成的  个人配置的输入个人的)

证书指纹

可能遇到的错误：

• java环境

java环境是未进行详细解释，如果是完全按照教程流程唯一可能遇到java环境导致生成不正常意外报错，如果有可以问下评论区大佬。

打开应用管理

应用管理

各平台信息，新增

填写信息，提交，内容参考上面的证书详情

创建离线key

创建

查看离线key

生成本地打包资源

生成资源

找到资源

替换资源

修改APPID

修改app离线key

修改证书

修改应用级build.gradle,别名密码和证书密码是可以一致的，区别开是为了更好的分辨某个填写至某个

运行

修改build.gradle后需要点击一次Sync Now或者资源重新加载参考教程内 同步gradle配置想·

完成后点击运行

运行完成

方式一：使用爱思助手里面工具箱里面的IPA签名（这种方式如果是加固后重签名上传到appstore会出现90046的问题）
需要准备好发布证书、证书描述文件（.mobileprovision）、ipa包

方式二：使用fastlane进行重签名
需要准备好证书描述文件（.mobileprovision）、ipa包
步骤一：安装fastlane（已安装可以跳过），macos用户执行：brew install fastlane
步骤二：新建文件夹，把证书描述文件和和ipa包放到同级目录下，执行 fastlane sigh resign
此时会重签名原ipa包

参考：ipa重签名最直接的教程