uni-app 正常的HX工程转化微信小程序并运行无问题,转化鸿蒙元服务会报错

发布于 1周前 作者 ionicwang 来自 Uni-App

uni-app 正常的HX工程转化微信小程序并运行无问题,转化鸿蒙元服务会报错

信息类别 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win11 22631.3155
HBuilderX类型 Alpha
HBuilderX版本号 4.41
手机系统 HarmonyOS NEXT
手机系统版本号 HarmonyOS NEXT Developer Beta2
手机厂商 华为
手机机型 Mate 60Pro
页面类型 vue
vue版本 vue3
打包方式 离线
项目创建方式 HBuilderX

操作步骤:

  1. 创建新的HX工程
  2. 将存量的cli工程挪进新建的HX工程中,转化微信小程序并运行
  3. 转化鸿蒙元服务并运行

预期结果:

  1. 创建新的HX工程
  2. 将存量的cli工程挪进新建的HX工程中,转化微信小程序并运行正常
  3. 转化鸿蒙元服务时报错:
    node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js (8:0): "getEscapedCssVarName" is not exported by "node_modules/@vue/shared/dist/shared.esm-bundler.js", imported by "node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js".
    

实际结果:

  1. 创建新的HX工程
  2. 将存量的cli工程挪进新建的HX工程中,转化微信小程序运行没问题
  3. 转化鸿蒙元服务会报错:
    node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js (8:0): "getEscapedCssVarName" is not exported by "node_modules/@vue/shared/dist/shared.esm-bundler.js", imported by "node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js".
    

bug描述:

正常的HX工程转化鸿蒙元服务会报错

10:33:50.953 node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js (8:0): "getEscapedCssVarName" is not exported by "node_modules/@vue/shared/dist/shared.esm-bundler.js", imported by "node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js".
10:33:50.953 file: D:/projects/HarmonyOS/HBuilderProjects/diorTestASCF/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:8:0
10:33:50.953 6: import { pauseTracking, resetTracking, isRef, toRaw, traverse, shallowRef, readonly, isReactive, ref, isShallow, shal...
10:33:50.953 7: export { EffectScope, ReactiveEffect, TrackOpTypes, TriggerOpTypes, customRef, effect, effectScope, getCurrentScope, ...
10:33:50.953 8: import { isString, isFunction, isPromise, isArray, EMPTY_OBJ, NOOP, getGlobalThis, extend, isBuiltInDirective, hasOwn...
10:33:50.953    ^
10:33:50.953 9: export { camelize, capitalize, normalizeClass, normalizeProps, normalizeStyle, toDisplayString, toHandlerKey } from '
10:33:50.953 at ../node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:8:0
10:33:50.953   6: import { pauseTracking, resetTracking, isRef, toRaw, traverse, shallowRef, readonly, isReactive, ref, isShallow, shal...
10:33:50.953   7: export { EffectScope, ReactiveEffect, TrackOpTypes, TriggerOpTypes, customRef, effect, effectScope, getCurrentScope, ...
10:33:50.954   8: import { isString, isFunction, isPromise, isArray, EMPTY_OBJ, NOOP, getGlobalThis, extend, isBuiltInDirective, hasOwn...
10:33:50.954      ^
10:33:50.954   9: export { camelize, capitalize, normalizeClass, normalizeProps, normalizeStyle, toDisplayString, toHandlerKey } from '

更多关于uni-app 正常的HX工程转化微信小程序并运行无问题,转化鸿蒙元服务会报错的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

感谢反馈,元服务目前还有一些组件和 api 还未开放适配,可能会导致白屏。你可以尝试精简页面,逐个页面进行适配。从而缩小问题范围。如果还有问题可以基础空白项目提供复现工程,我协助查看

更多关于uni-app 正常的HX工程转化微信小程序并运行无问题,转化鸿蒙元服务会报错的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js (8:0): “getEscapedCssVarName” is not exported by “node_modules/.pnpm/@vue+shared@3.4.21/node_modules/@vue/shared/dist/shared.esm-bundler.js”, imported by “node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js”.
file: /Users/wangjia/docs/linjia/linjia-frontend-uniapp/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:8:0

6: import { pauseTracking, resetTracking, isRef, toRaw, traverse, shallowRef, readonly, isReactive, ref, isShallow, shal…
7: export { EffectScope, ReactiveEffect, TrackOpTypes, TriggerOpTypes, customRef, effect, effectScope, getCurrentScope, …
8: import { isString, isFunction, isPromise, isArray, EMPTY_OBJ, NOOP, getGlobalThis, extend, isBuiltInDirective, hasOwn…
^
9: export { camelize, capitalize, normalizeClass, normalizeProps, normalizeStyle, toDisplayString, toHandlerKey } from '…

at …/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:8:0
6: import { pauseTracking, resetTracking, isRef, toRaw, traverse, shallowRef, readonly, isReactive, ref, isShallow, shal…
7: export { EffectScope, ReactiveEffect, TrackOpTypes, TriggerOpTypes, customRef, effect, effectScope, getCurrentScope, …
8: import { isString, isFunction, isPromise, isArray, EMPTY_OBJ, NOOP, getGlobalThis, extend, isBuiltInDirective, hasOwn…
^
9: export { camelize, capitalize, normalizeClass, normalizeProps, normalizeStyle, toDisplayString, toHandlerKey } from '… (x3)

同问,相同问题,pnpm dev:mp-weixin 报错

npx @dcloudio/uvm@latest 会更新 vue 到 3.5.12, 导致与@dcloudio/uni-app 依赖版本 3.4.21 不一致,手动降低 vue 版本到3.4.21

回复 w***@163.com: 我试了试没有主动升级 vue版本,奇怪

@vue/shared 版本问题,3.4.21 没有导出方法 getEscapedCssVarName

在将uni-app的正常H5工程转化为微信小程序时,通常可以直接通过uni-app官方提供的工具链顺利完成,因为uni-app框架本身就对微信小程序有很好的支持。然而,当尝试将同样的工程转化为鸿蒙元服务(HarmonyOS Service)时,可能会遇到一些兼容性问题,因为鸿蒙系统和小程序平台在API、组件以及系统架构上存在显著差异。

以下是一个简化的代码案例,展示了如何在uni-app项目中处理平台差异,特别是针对鸿蒙元服务的适配。需要注意的是,由于鸿蒙开发环境的特殊性,这里提供的代码更多是为了说明如何处理平台差异,而非一个完整的鸿蒙元服务实现。

1. 判断平台并引入特定依赖

main.jsApp.vue中,可以通过uni.getSystemInfoSync().platform来判断当前平台,并据此引入不同的依赖或执行不同的初始化逻辑。

// main.js
const platform = uni.getSystemInfoSync().platform;

if (platform === 'harmonyos') {
  // 引入鸿蒙特定的依赖或执行初始化逻辑
  // 例如,配置鸿蒙特有的权限、主题等
  import './harmonyos-init';
} else {
  // 其他平台的初始化逻辑
}

// 正常的Vue实例创建
new Vue({
  store,
  ...App
}).$mount();

2. 鸿蒙初始化文件示例 (harmonyos-init.js)

这个文件可能包含鸿蒙平台特有的配置,如权限请求、组件注册等。由于鸿蒙开发涉及原生代码,这里仅展示一个假设性的配置过程。

// harmonyos-init.js
// 注意:这里的代码是示意性的,实际鸿蒙开发需要原生代码和JavaScript结合
export default function initHarmonyOS() {
  // 假设有一个鸿蒙SDK提供的API来请求权限
  requestPermissions(['ohos.permission.READ_CONTACTS'])
    .then(() => {
      console.log('Permissions granted');
    })
    .catch(error => {
      console.error('Failed to grant permissions', error);
    });

  // 其他鸿蒙特有的初始化逻辑...
}

3. 条件编译

uni-app支持条件编译,可以在不同平台下包含或排除特定代码。在pages.jsonmanifest.json等配置文件中,或者使用#ifdef#ifndef#endif预处理指令。

<!-- 在某个Vue组件中 -->
<template>
  <view>
    #ifdef HARMONYOS
      <text>This is HarmonyOS specific content.</text>
    #else
      <text>This is for other platforms.</text>
    #endif
  </view>
</template>

由于鸿蒙开发环境的复杂性和特殊性,上述代码仅为示例,实际开发中需要根据鸿蒙的官方文档和SDK进行深入开发和调试。同时,确保uni-app和鸿蒙SDK的版本兼容性也是非常重要的。

回到顶部