uni-app 正常的HX工程转化微信小程序并运行无问题,转化鸿蒙元服务会报错
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 |
操作步骤:
- 创建新的HX工程
- 将存量的cli工程挪进新建的HX工程中,转化微信小程序并运行
- 转化鸿蒙元服务并运行
预期结果:
- 创建新的HX工程
- 将存量的cli工程挪进新建的HX工程中,转化微信小程序并运行正常
- 转化鸿蒙元服务时报错:
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".
实际结果:
- 创建新的HX工程
- 将存量的cli工程挪进新建的HX工程中,转化微信小程序运行没问题
- 转化鸿蒙元服务会报错:
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
感谢反馈,元服务目前还有一些组件和 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 报错
回复 w***@163.com: 我试了试没有主动升级 vue版本,奇怪
@vue/shared 版本问题,3.4.21 没有导出方法 getEscapedCssVarName
在将uni-app的正常H5工程转化为微信小程序时,通常可以直接通过uni-app官方提供的工具链顺利完成,因为uni-app框架本身就对微信小程序有很好的支持。然而,当尝试将同样的工程转化为鸿蒙元服务(HarmonyOS Service)时,可能会遇到一些兼容性问题,因为鸿蒙系统和小程序平台在API、组件以及系统架构上存在显著差异。
以下是一个简化的代码案例,展示了如何在uni-app项目中处理平台差异,特别是针对鸿蒙元服务的适配。需要注意的是,由于鸿蒙开发环境的特殊性,这里提供的代码更多是为了说明如何处理平台差异,而非一个完整的鸿蒙元服务实现。
1. 判断平台并引入特定依赖
在main.js
或App.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.json
、manifest.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的版本兼容性也是非常重要的。