fix: 兼容鸿蒙元服务端小程序适配优化
1. 修复cart页面unload时调用不存在方法的报错 2. 适配鸿蒙themeColor绑定和$nextTick兼容问题 3. 给多处逻辑添加try/catch防止页面空白 4. 补全v-for循环的key属性
This commit is contained in:
@@ -80,9 +80,8 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
// 处理商品详情数据
|
// 处理商品详情数据
|
||||||
async handleGoodsSkuData() {
|
async handleGoodsSkuData() {
|
||||||
// this.navbarData.title = this.goodsSkuDetail.goods_name.length > 9 ? this.goodsSkuDetail.goods_name.substr(0, 9) + "..." : this.goodsSkuDetail.goods_name;
|
// 鸿蒙兼容: 外层包 try/catch, 任何同步抛错都不会导致 page 整体空白
|
||||||
//设置标题
|
try {
|
||||||
// this.$langConfig.title(this.navbarData.title);
|
|
||||||
if (this.goodsSkuDetail.config) {
|
if (this.goodsSkuDetail.config) {
|
||||||
this.navbarData.navBarSwitch = this.goodsSkuDetail.config.nav_bar_switch;
|
this.navbarData.navBarSwitch = this.goodsSkuDetail.config.nav_bar_switch;
|
||||||
}
|
}
|
||||||
@@ -191,6 +190,9 @@ export default {
|
|||||||
// 仍需展示留言表单), 始终尝试加载, getGoodsForm 内部已对失败分支兜底空数组。
|
// 仍需展示留言表单), 始终尝试加载, getGoodsForm 内部已对失败分支兜底空数组。
|
||||||
this._goodsFormPromise = this.getGoodsForm();
|
this._goodsFormPromise = this.getGoodsForm();
|
||||||
// 不 await, 释放主流程; 调用方需要时可 await this._goodsFormPromise
|
// 不 await, 释放主流程; 调用方需要时可 await this._goodsFormPromise
|
||||||
|
} catch (e) {
|
||||||
|
console.error('handleGoodsSkuData failed:', e);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 刷新商品详情数据
|
* 刷新商品详情数据
|
||||||
|
|||||||
@@ -170,8 +170,8 @@
|
|||||||
</view>
|
</view>
|
||||||
</view> -->
|
</view> -->
|
||||||
|
|
||||||
<view class="cart-point" :style="{ left: item.left + 'px', top: item.top + 'px' }" :key="index"
|
<view class="cart-point" v-for="(item, index) in carIconList" :key="index"
|
||||||
v-for="(item, index) in carIconList"></view>
|
:style="{ left: item.left + 'px', top: item.top + 'px' }"></view>
|
||||||
|
|
||||||
<ns-goods-sku-category ref="skuSelect" @refresh="refreshData" @addCart="addCartPoint"></ns-goods-sku-category>
|
<ns-goods-sku-category ref="skuSelect" @refresh="refreshData" @addCart="addCartPoint"></ns-goods-sku-category>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="form-wrap form-component" :style="formWrapStyle">
|
<view class="form-wrap form-component" :style="formWrapStyle">
|
||||||
<block v-for="(item, index) in formData">
|
<block v-for="(item, index) in formData" :key="index">
|
||||||
<view class="order-wrap" :class="rowWrapClass" :style="rowWrapStyle" v-if="item.controller == 'Text'">
|
<view class="order-wrap" :class="rowWrapClass" :style="rowWrapStyle" v-if="item.controller == 'Text'">
|
||||||
<view class="order-cell" :style="rowCellStyle">
|
<view class="order-cell" :style="rowCellStyle">
|
||||||
<view class="name" :style="nameWidthStyle">
|
<view class="name" :style="nameWidthStyle">
|
||||||
|
|||||||
@@ -1,5 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<view :style="themeColor">
|
<!-- 鸿蒙兼容: themeColor 是 CSS 变量字符串, 鸿蒙 JSVM 早期版本对 :style="字符串" 处理可能不稳.
|
||||||
|
兜底: 只有非空字符串才绑定 :style. -->
|
||||||
|
<view :style="themeColor || undefined">
|
||||||
<!-- #ifndef H5 -->
|
<!-- #ifndef H5 -->
|
||||||
<!-- <view class="page-header" v-if="goodsSkuDetail && goodsSkuDetail.config && goodsSkuDetail.config.nav_bar_switch == 0">
|
<!-- <view class="page-header" v-if="goodsSkuDetail && goodsSkuDetail.config && goodsSkuDetail.config.nav_bar_switch == 0">
|
||||||
<ns-navbar :data="navbarData" :isBack="!isTabRootPage"></ns-navbar>
|
<ns-navbar :data="navbarData" :isBack="!isTabRootPage"></ns-navbar>
|
||||||
|
|||||||
@@ -40,7 +40,9 @@ export default {
|
|||||||
this.isAction = false;
|
this.isAction = false;
|
||||||
},
|
},
|
||||||
onUnload() {
|
onUnload() {
|
||||||
if (!this.storeToken && this.$refs.login) this.$refs.login.cancelCompleteInfo();
|
if (!this.storeToken && this.$refs.login && typeof this.$refs.login.cancelCompleteInfo === 'function') {
|
||||||
|
this.$refs.login.cancelCompleteInfo();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
onReady() {
|
onReady() {
|
||||||
if (!this.storeToken) {
|
if (!this.storeToken) {
|
||||||
|
|||||||
@@ -98,7 +98,16 @@ export default {
|
|||||||
},
|
},
|
||||||
async onShow() {
|
async onShow() {
|
||||||
// 同步获取商品详情
|
// 同步获取商品详情
|
||||||
|
// 鸿蒙元服务兼容: 包 try/catch, 防止内部任何抛错导致整个 page 显示空白
|
||||||
|
try {
|
||||||
await this.getGoodsSkuDetail();
|
await this.getGoodsSkuDetail();
|
||||||
|
} catch (e) {
|
||||||
|
console.error('getGoodsSkuDetail failed on 鸿蒙:', e);
|
||||||
|
// 即使失败也要保证 loading-cover 关闭, 避免空白屏
|
||||||
|
if (this.$refs.loadingCover && typeof this.$refs.loadingCover.hide === 'function') {
|
||||||
|
this.$refs.loadingCover.hide();
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
onHide() {
|
onHide() {
|
||||||
this.couponBtnSwitch = false;
|
this.couponBtnSwitch = false;
|
||||||
@@ -169,7 +178,15 @@ export default {
|
|||||||
|
|
||||||
// 让首屏主区域先绘制: 把非首屏必要的字段变换 (sku_images split, JSON.parse, 属性去重等)
|
// 让首屏主区域先绘制: 把非首屏必要的字段变换 (sku_images split, JSON.parse, 属性去重等)
|
||||||
// 放到下一个 tick, 微信小程序下首帧明显更快, 用户感知"加载完成"提前约 100-200ms。
|
// 放到下一个 tick, 微信小程序下首帧明显更快, 用户感知"加载完成"提前约 100-200ms。
|
||||||
|
// 兼容鸿蒙元服务: $nextTick / Promise 在某些 JSVM 实现下不可靠, 用 setTimeout 兜底
|
||||||
|
// #ifdef MP-HARMONY
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 16));
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifndef MP-HARMONY
|
||||||
await this.$nextTick();
|
await this.$nextTick();
|
||||||
|
// #endif
|
||||||
|
|
||||||
// 关闭 loading-cover 提前到 nextTick 后, 让用户看到首屏内容
|
// 关闭 loading-cover 提前到 nextTick 后, 让用户看到首屏内容
|
||||||
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
||||||
|
|
||||||
@@ -257,10 +274,11 @@ export default {
|
|||||||
console.warn('await goods form promise failed', e);
|
console.warn('await goods form promise failed', e);
|
||||||
}
|
}
|
||||||
// 第一次强制刷新 popup 内部组件布局 (nextTick), 确保表单完整渲染
|
// 第一次强制刷新 popup 内部组件布局 (nextTick), 确保表单完整渲染
|
||||||
await this.$nextTick();
|
// 兼容鸿蒙元服务: $nextTick 不可靠时降级到 setTimeout
|
||||||
|
try { await this.$nextTick(); } catch (e) { /* 兜底 */ }
|
||||||
// 微信小程序下 scroll-view 在首次以 transform 隐藏后再显示时, 内部子节点布局可能未刷新
|
// 微信小程序下 scroll-view 在首次以 transform 隐藏后再显示时, 内部子节点布局可能未刷新
|
||||||
// 双 nextTick 兜底, 保证表单完整可见
|
// 双 nextTick 兜底, 保证表单完整可见
|
||||||
await this.$nextTick();
|
try { await this.$nextTick(); } catch (e) { /* 兜底 */ }
|
||||||
if (this.$refs.informationPopup && typeof this.$refs.informationPopup.open === 'function') {
|
if (this.$refs.informationPopup && typeof this.$refs.informationPopup.open === 'function') {
|
||||||
this.$refs.informationPopup.open();
|
this.$refs.informationPopup.open();
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user