鴻蒙OSUniApp開發的商品詳情展示頁面（鴻蒙系統適配版）#三方框架 #Uniapp

使用UniApp開發的商品詳情展示頁面（鴻蒙系統適配版）

前言

隨著移動電商的普及，一個體驗良好的商品詳情頁對于提高用戶轉化率至關重要。本文將分享我在使用UniApp開發商品詳情頁時的實踐經驗，并特別關注如何適配鴻蒙系統，確保在華為設備上也能獲得出色的用戶體驗。

作為一個跨端開發者，我深知要在各類設備上提供一致且優質的體驗并不容易。尤其是國產鴻蒙系統的興起，給我們的開發工作帶來了新的挑戰和機遇。通過本文的分享，希望能幫助更多開發者構建既美觀又高效的商品詳情頁。

需求分析

一個完善的商品詳情頁通常包含以下核心功能：

商品圖片輪播與預覽
商品基本信息展示（標題、價格、銷量等）
規格選擇與庫存展示
商品詳情（圖文詳情、參數、評價等）
底部固定購買欄（加入購物車、立即購買等）
相關推薦商品

在鴻蒙系統上，還需要特別關注以下方面：

手勢操作的流暢性
動效設計符合鴻蒙的設計風格
適配鴻蒙系統特有的API

技術選型

我們的技術棧主要包括：

UniApp作為跨端開發框架
Vue3 + TypeScript開發核心邏輯
SCSS處理樣式
uView UI提供基礎組件支持
Vuex管理全局狀態
針對鴻蒙系統的特殊處理

項目實現

頁面布局基礎結構

首先，我們來看一下商品詳情頁的基礎結構：

<template><view class="product-detail" :class="{'harmony-container': isHarmonyOS}"><!-- 狀態欄占位 --><view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view><!-- 自定義導航欄 --><view class="custom-navbar"><view class="left" @click="handleBack"><text class="iconfont icon-back"></text></view><view class="navbar-tabs"><view v-for="(tab, index) in tabs" :key="index"class="tab-item":class="{'active': currentTab === index}"@click="switchTab(index)"><text>{{ tab }}</text></view></view><view class="right"><text class="iconfont icon-more" @click="showMore"></text></view></view><!-- 內容區域 --><scroll-view class="content-scroll"scroll-y:scroll-top="scrollTop"@scroll="handleScroll":show-scrollbar="false":bounce="false":enhanced="isHarmonyOS" :fast-deceleration="isHarmonyOS"><!-- 輪播圖 --><swiper-section :images="product.images" @preview="previewImage"></swiper-section><!-- 商品信息 --><product-info :product="product" :is-harmony="isHarmonyOS"></product-info><!-- 規格選擇 --><spec-section :specs="product.specs" :selected="selectedSpec"@select="selectSpec"></spec-section><!-- 詳情內容 --><detail-section :detail="product.detail":params="product.params":comments="product.comments":current-tab="currentDetailTab"@change-tab="changeDetailTab"></detail-section><!-- 推薦商品 --><recommend-section :products="relatedProducts"></recommend-section></scroll-view><!-- 底部操作欄 --><view class="bottom-actions" :class="{'harmony-bottom': isHarmonyOS}"><view class="action-btn service"><text class="iconfont icon-service"></text><text>客服</text></view><view class="action-btn favorite" @click="toggleFavorite"><text class="iconfont" :class="isFavorite ? 'icon-favorited' : 'icon-favorite'"></text><text>{{ isFavorite ? '已收藏' : '收藏' }}</text></view><view class="action-btn cart" @click="goToCart"><text class="iconfont icon-cart"></text><text>購物車</text><view class="cart-badge" v-if="cartCount > 0">{{ cartCount }}</view></view><view class="action-btn add-to-cart" @click="addToCart">加入購物車</view><view class="action-btn buy-now" @click="buyNow">立即購買</view></view><!-- 規格選擇彈窗 --><spec-popup :visible="specPopupVisible" :product="product":selected="selectedSpec"@close="closeSpecPopup"@confirm="confirmSpec"@select="selectSpec"></spec-popup></view>
</template><script lang="ts">
import { defineComponent, ref, reactive, computed, onMounted, onUnmounted } from 'vue';
import { isHarmonyOS, getStatusBarHeight } from '@/utils/system';
import SwiperSection from './components/SwiperSection.vue';
import ProductInfo from './components/ProductInfo.vue';
import SpecSection from './components/SpecSection.vue';
import DetailSection from './components/DetailSection.vue';
import RecommendSection from './components/RecommendSection.vue';
import SpecPopup from './components/SpecPopup.vue';export default defineComponent({components: {SwiperSection,ProductInfo,SpecSection,DetailSection,RecommendSection,SpecPopup},props: {productId: {type: [String, Number],required: true}},setup(props) {// 狀態變量const product = ref({} as any);const relatedProducts = ref([] as any[]);const isLoading = ref(true);const scrollTop = ref(0);const currentTab = ref(0);const currentDetailTab = ref(0);const statusBarHeight = ref(0);const specPopupVisible = ref(false);const selectedSpec = ref({} as any);const isFavorite = ref(false);const cartCount = ref(0);const isHarmonyOS = ref(false);// Tab選項const tabs = ['商品', '詳情', '評價'];// 檢測是否為鴻蒙系統onMounted(() => {isHarmonyOS.value = isHarmonyOS();statusBarHeight.value = getStatusBarHeight();fetchProductData();});// 獲取商品數據const fetchProductData = async () => {try {isLoading.value = true;// 模擬請求數據setTimeout(() => {// 這里通常是調用API獲取數據product.value = {id: props.productId,title: '2023新款智能手表 多功能運動監測',price: 299.00,originalPrice: 399.00,sales: 1280,stock: 860,images: ['https://example.com/watch1.jpg','https://example.com/watch2.jpg','https://example.com/watch3.jpg',],specs: [{title: '顏色',options: ['黑色', '白色', '藍色']},{title: '尺寸',options: ['42mm', '46mm']}],detail: '<div>這里是商品詳情的HTML內容</div>',params: [{ key: '品牌', value: 'WatchBrand' },{ key: '防水等級', value: 'IP68' },{ key: '電池容量', value: '300mAh' }],comments: [{user: '用戶A',avatar: 'https://example.com/avatar1.jpg',content: '商品很好，手表質量不錯',rating: 5,date: '2023-05-21'}]};// 相關推薦relatedProducts.value = [{id: 101,title: '運動手環',price: 129.00,image: 'https://example.com/band1.jpg'},{id: 102,title: '智能耳機',price: 199.00,image: 'https://example.com/earphone1.jpg'}];isLoading.value = false;}, 1000);} catch (error) {console.error('獲取商品數據失敗', error);isLoading.value = false;}};// 切換Tabconst switchTab = (index: number) => {currentTab.value = index;// 根據Tab計算滾動位置if (index === 0) {scrollTop.value = 0;} else if (index === 1) {scrollTop.value = 800; // 根據實際情況調整} else {scrollTop.value = 1200; // 根據實際情況調整}};// 處理滾動事件const handleScroll = (e: any) => {const scrollPosition = e.detail.scrollTop;// 根據滾動位置自動切換Tabif (scrollPosition < 700) {currentTab.value = 0;} else if (scrollPosition < 1100) {currentTab.value = 1;} else {currentTab.value = 2;}};// 顯示規格選擇彈窗const openSpecPopup = () => {specPopupVisible.value = true;};// 關閉規格選擇彈窗const closeSpecPopup = () => {specPopupVisible.value = false;};// 選擇規格const selectSpec = (spec: any) => {selectedSpec.value = { ...selectedSpec.value, ...spec };};// 確認規格const confirmSpec = () => {// 這里可以檢查是否已選擇完所有規格closeSpecPopup();};// 預覽圖片const previewImage = (index: number) => {uni.previewImage({current: index,urls: product.value.images,// 鴻蒙特殊處理longPressActions: isHarmonyOS.value ? {itemList: ['保存圖片', '分享'],success: function(data) {console.log('選中了第' + (data.tapIndex + 1) + '個按鈕');},fail: function(err) {console.log(err.errMsg);}} : undefined});};// 切換收藏狀態const toggleFavorite = () => {isFavorite.value = !isFavorite.value;// 鴻蒙系統特有的震動反饋if (isHarmonyOS.value) {// #ifdef APP-PLUSif (plus.os.name === 'Android' && plus.device.vendor === 'HUAWEI') {try {plus.device.vibrate(10);} catch (e) {console.error('震動API調用失敗', e);}}// #endif}uni.showToast({title: isFavorite.value ? '已加入收藏' : '已取消收藏',icon: 'none'});};// 前往購物車const goToCart = () => {uni.switchTab({url: '/pages/cart/cart'});};// 加入購物車const addToCart = () => {// 檢查是否已選擇規格if (!selectedSpec.value.顏色 || !selectedSpec.value.尺寸) {openSpecPopup();return;}// 模擬加入購物車操作cartCount.value += 1;uni.showToast({title: '已加入購物車',icon: 'success'});};// 立即購買const buyNow = () => {// 檢查是否已選擇規格if (!selectedSpec.value.顏色 || !selectedSpec.value.尺寸) {openSpecPopup();return;}uni.navigateTo({url: `/pages/order/confirm?productId=${props.productId}&specId=${JSON.stringify(selectedSpec.value)}`});};// 處理返回const handleBack = () => {uni.navigateBack();};// 顯示更多操作const showMore = () => {uni.showActionSheet({itemList: ['分享', '舉報'],success: function(res) {if (res.tapIndex === 0) {// 分享uni.share({provider: 'weixin',scene: 'WXSceneSession',type: 0,title: product.value.title,summary: `限時特惠：￥${product.value.price}`,imageUrl: product.value.images[0],href: `https://example.com/product/${product.value.id}`});} else if (res.tapIndex === 1) {// 舉報uni.navigateTo({url: '/pages/report/report'});}}});};return {product,relatedProducts,isLoading,scrollTop,currentTab,currentDetailTab,tabs,statusBarHeight,specPopupVisible,selectedSpec,isFavorite,cartCount,isHarmonyOS,switchTab,handleScroll,openSpecPopup,closeSpecPopup,selectSpec,confirmSpec,previewImage,toggleFavorite,goToCart,addToCart,buyNow,handleBack,showMore};}
});
</script><style lang="scss">
.product-detail {position: relative;width: 100%;min-height: 100vh;background-color: #f5f5f5;.status-bar {background-color: #ffffff;}.custom-navbar {display: flex;align-items: center;height: 44px;background-color: #ffffff;padding: 0 15px;.left, .right {width: 40px;display: flex;justify-content: center;.iconfont {font-size: 24px;color: #333;}}.navbar-tabs {flex: 1;display: flex;justify-content: center;.tab-item {padding: 0 15px;height: 44px;line-height: 44px;font-size: 15px;color: #666;position: relative;&.active {color: #333;font-weight: bold;&:after {content: '';position: absolute;bottom: 0;left: 15px;right: 15px;height: 2px;background-color: #333;}}}}}.content-scroll {height: calc(100vh - 44px - var(--status-bar-height) - 50px);}.bottom-actions {position: fixed;left: 0;right: 0;bottom: 0;height: 50px;background-color: #fff;display: flex;align-items: center;border-top: 1px solid #eee;padding-bottom: env(safe-area-inset-bottom);.action-btn {height: 50px;display: flex;flex-direction: column;justify-content: center;align-items: center;font-size: 12px;color: #666;position: relative;.iconfont {font-size: 18px;margin-bottom: 2px;}&.service, &.favorite, &.cart {flex: 1;}&.add-to-cart, &.buy-now {flex: 2;font-size: 14px;color: #fff;}&.add-to-cart {background-color: #ff9500;}&.buy-now {background-color: #ff3b30;}.cart-badge {position: absolute;top: 2px;right: 50%;transform: translateX(6px);background-color: #ff3b30;color: #fff;font-size: 10px;min-width: 16px;height: 16px;line-height: 16px;text-align: center;border-radius: 8px;padding: 0 4px;}}}
}/* 鴻蒙系統特殊樣式 */
.harmony-container {.custom-navbar {.navbar-tabs {.tab-item {&.active {&:after {background-color: #0078ff;height: 3px;border-radius: 1.5px;}}}}}.bottom-actions {&.harmony-bottom {border-top: none;box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.05);.action-btn {&.add-to-cart {background: linear-gradient(135deg, #ff9500, #ff7000);border-radius: 22px;margin: 4px 6px;height: 42px;}&.buy-now {background: linear-gradient(135deg, #ff3b30, #ff2020);border-radius: 22px;margin: 4px 6px;height: 42px;}}}}
}
</style>

輪播組件的實現

輪播圖是商品詳情頁的核心組件，下面是輪播組件的實現：

<!-- components/SwiperSection.vue -->
<template><view class="swiper-section" :class="{'harmony-swiper': isHarmonyOS}"><swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="5000" indicator-active-color="#fff"indicator-color="rgba(255, 255, 255, 0.3)"><swiper-item v-for="(image, index) in images" :key="index" @click="handlePreview(index)"><image class="swiper-image" :src="image" mode="aspectFill"></image></swiper-item></swiper></view>
</template><script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import { isHarmonyOS } from '@/utils/system';export default defineComponent({props: {images: {type: Array,default: () => []}},emits: ['preview'],setup(props, { emit }) {const isHarmonyOS = ref(false);onMounted(() => {isHarmonyOS.value = isHarmonyOS();});const handlePreview = (index: number) => {emit('preview', index);};return {isHarmonyOS,handlePreview};}
});
</script><style lang="scss">
.swiper-section {width: 100%;.swiper {width: 100%;height: 750rpx;.swiper-image {width: 100%;height: 100%;}}
}/* 鴻蒙系統特殊樣式 */
.harmony-swiper {.swiper {border-radius: 0 0 20rpx 20rpx;overflow: hidden;}
}
</style>

商品信息組件

接下來是商品信息展示組件：

<!-- components/ProductInfo.vue -->
<template><view class="product-info" :class="{'harmony-card': isHarmony}"><view class="price-section"><text class="price">￥{{ product.price.toFixed(2) }}</text><text class="original-price">￥{{ product.originalPrice.toFixed(2) }}</text><view class="discount" v-if="discountRate > 0">{{ discountRate }}折</view></view><view class="title-section"><text class="title">{{ product.title }}</text></view><view class="sales-section"><text class="sales">銷量 {{ product.sales }}</text><text class="divider">|</text><text class="stock">庫存 {{ product.stock }}</text></view></view>
</template><script lang="ts">
import { defineComponent, computed } from 'vue';export default defineComponent({props: {product: {type: Object,required: true},isHarmony: {type: Boolean,default: false}},setup(props) {// 計算折扣率const discountRate = computed(() => {if (!props.product.originalPrice || props.product.originalPrice <= 0) {return 0;}return Math.floor((props.product.price / props.product.originalPrice) * 10);});return {discountRate};}
});
</script><style lang="scss">
.product-info {background-color: #fff;padding: 20rpx;margin-top: 10rpx;.price-section {display: flex;align-items: center;.price {font-size: 36rpx;color: #ff3b30;font-weight: bold;}.original-price {font-size: 24rpx;color: #999;text-decoration: line-through;margin-left: 10rpx;}.discount {font-size: 20rpx;color: #fff;background-color: #ff3b30;padding: 2rpx 10rpx;border-radius: 10rpx;margin-left: 10rpx;}}.title-section {margin-top: 10rpx;.title {font-size: 28rpx;color: #333;line-height: 1.4;}}.sales-section {margin-top: 10rpx;display: flex;align-items: center;.sales, .stock {font-size: 24rpx;color: #999;}.divider {margin: 0 10rpx;color: #eee;}}
}/* 鴻蒙系統特殊樣式 */
.harmony-card {border-radius: 20rpx;margin: 20rpx;box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);.price-section {.price {background: linear-gradient(to right, #ff3b30, #ff6b30);-webkit-background-clip: text;color: transparent;font-family: 'HarmonyOS Sans', sans-serif;}.discount {background: linear-gradient(to right, #ff3b30, #ff6b30);border-radius: 12rpx;}}
}
</style>

鴻蒙系統適配關鍵點

在為鴻蒙系統適配我們的商品詳情頁時，以下幾點值得特別關注：

1. 檢測鴻蒙系統

首先，我們需要一個工具函數來檢測當前設備是否運行鴻蒙系統：

// utils/system.ts/*** 檢測當前設備是否為鴻蒙系統*/
export function isHarmonyOS(): boolean {// #ifdef APP-PLUSconst systemInfo = uni.getSystemInfoSync();const systemName = systemInfo.osName || '';const systemVersion = systemInfo.osVersion || '';// 鴻蒙系統識別return systemName.toLowerCase().includes('harmony') || (systemName === 'android' && systemVersion.includes('harmony'));// #endifreturn false;
}/*** 獲取狀態欄高度*/
export function getStatusBarHeight(): number {const systemInfo = uni.getSystemInfoSync();return systemInfo.statusBarHeight || 20;
}/*** 鴻蒙系統UI適配*/
export function adaptHarmonyUI(): void {// #ifdef APP-PLUSif (!isHarmonyOS()) return;try {// 全局設置圓角尺寸變量document.documentElement.style.setProperty('--harmony-border-radius', '16rpx');// 設置字體家族document.documentElement.style.setProperty('--harmony-font-family', 'HarmonyOS Sans, sans-serif');// 設置顏色變量document.documentElement.style.setProperty('--harmony-primary-color', '#0078ff');document.documentElement.style.setProperty('--harmony-gradient-start', '#ff3b30');document.documentElement.style.setProperty('--harmony-gradient-end', '#ff6b30');} catch (e) {console.error('適配鴻蒙UI失敗', e);}// #endif
}

2. UI設計適配

鴻蒙系統有其獨特的設計語言，我們需要對UI進行相應調整：

圓角設計：鴻蒙系統的設計語言偏向于使用較大的圓角，我們可以增加卡片、按鈕等元素的圓角值
漸變色：鴻蒙UI使用較多漸變色，尤其是按鈕和強調元素
陰影效果：輕微的陰影可以增強層次感
字體適配：使用鴻蒙系統的HarmonyOS Sans字體

3. 性能優化

鴻蒙系統對于動畫和滾動性能有較高的要求：

滾動優化：

<scroll-view :enhanced="isHarmonyOS" :fast-deceleration="isHarmonyOS":bounces="false"
>

圖片懶加載：

<image lazy-load :fade-show="isHarmonyOS" :webp="isHarmonyOS"mode="aspectFill"src="..."
></image>

動畫優化：使用transform代替position變化，并開啟硬件加速

.animated-element {transform: translateZ(0);will-change: transform;
}

4. 手勢交互

鴻蒙系統對手勢交互有獨特的處理，我們可以利用這一點增強用戶體驗：

// 雙指縮放預覽
const handleImageZoom = (e) => {if (!isHarmonyOS.value) return;// #ifdef APP-PLUSif (e.touches.length === 2) {const touch1 = e.touches[0];const touch2 = e.touches[1];// 計算兩指距離const distance = Math.sqrt(Math.pow(touch2.pageX - touch1.pageX, 2) + Math.pow(touch2.pageY - touch1.pageY, 2));// 根據距離變化處理縮放if (!lastDistance.value) {lastDistance.value = distance;return;}const scale = distance / lastDistance.value;if (scale > 1.05 || scale < 0.95) {// 觸發縮放操作handleZoom(scale > 1 ? 'in' : 'out');lastDistance.value = distance;}}// #endif
};