【商城實戰】專欄重磅來襲！這是一份專為開發者與電商從業者打造的超詳細指南。從項目基礎搭建，運用 uniapp、Element Plus、SpringBoot 搭建商城框架，到用戶、商品、訂單等核心模塊開發，再到性能優化、安全加固、多端適配，乃至運營推廣策略，102 章內容層層遞進。無論是想深入鉆研技術細節，還是探尋商城運營之道，本專欄都能提供從 0 到 1 的系統講解，助力你打造獨具競爭力的電商平臺，開啟電商實戰之旅。

---

一、UniApp 適配移動端設備原理及實現

1.1 適配原理

UniApp 適配不同移動端設備的核心原理是利用條件編譯和相對單位，以及彈性布局等技術。

• 條件編譯：UniApp 允許開發者使用特殊的注釋語法來區分不同平臺的代碼。例如，通過#ifdef和#endif指令，開發者可以編寫特定平臺的代碼塊。#ifdef APP-PLUS表示只有在 App 平臺下才會編譯該代碼塊，#ifdef H5則表示只在 H5 平臺編譯。這樣可以針對手機、平板等不同設備的特性，編寫專門的邏輯，比如調用特定設備的 API。
• 相對單位：在處理不同屏幕尺寸時，使用相對單位如rpx（responsive pixel）至關重要。rpx會根據屏幕寬度進行自適應，規定屏幕寬度為 750rpx。在 iPhone6 上，屏幕寬度為 375px，此時 1rpx = 0.5px 。這樣，使用rpx作為單位設置元素的尺寸，能夠在不同屏幕尺寸的設備上保持相對一致的布局和顯示效果，避免因屏幕尺寸差異導致的布局錯亂 。
• 彈性布局：采用 Flexbox 彈性布局模型，它能夠自動調整元素的大小和位置，以適應不同的屏幕尺寸和方向。通過設置display: flex，可以方便地實現水平或垂直方向的布局，并且可以控制元素的伸縮比例、對齊方式等，使得頁面在各種設備上都能呈現出合理的布局。

1.2 實現源碼展示

假設我們有一個商品列表頁面，需要從 Spring Boot 后端獲取數據并展示，同時確保在不同設備上都能正確適配。

首先，在 Spring Boot 后端定義一個獲取商品列表的接口：

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.ArrayList;
import java.util.List;@RestController
public class ProductController {@GetMapping("/products")public List<Product> getProducts() {List<Product> productList = new ArrayList<>();// 這里可以從數據庫查詢數據，示例中簡單構造數據Product product1 = new Product(1, "商品1", "描述1", 10.0);Product product2 = new Product(2, "商品2", "描述2", 20.0);productList.add(product1);productList.add(product2);return productList;}
}class Product {private int id;private String name;private String description;private double price;public Product(int id, String name, String description, double price) {this.id = id;this.name = name;this.description = description;this.price = price;}// 省略getter和setter方法
}

在 UniApp 前端頁面中，使用uni.request獲取數據，并通過彈性布局和rpx單位進行頁面布局：

<template><view class="product-list"><view class="product-item" v-for="(product, index) in products" :key="index"><view class="product-name">{{ product.name }}</view><view class="product-description">{{ product.description }}</view><view class="product-price">價格: {{ product.price }}元</view></view></view>
</template><script>
export default {data() {return {products: []};},onLoad() {this.getProducts();},methods: {getProducts() {uni.request({url: 'http://localhost:8080/products', // 根據實際情況修改method: 'GET',success: res => {this.products = res.data;},fail: err => {console.log('獲取數據失敗', err);}});}}
};
</script><style scoped>
.product-list {display: flex;flex-direction: column;padding: 20rpx;
}.product-item {background-color: #f5f5f5;border-radius: 10rpx;padding: 15rpx;margin-bottom: 15rpx;display: flex;flex-direction: column;
}.product-name {font-size: 20rpx;font-weight: bold;margin-bottom: 10rpx;
}.product-description {font-size: 16rpx;color: #666;margin-bottom: 10rpx;
}.product-price {font-size: 18rpx;color: #f00;
}
</style>

在上述代碼中，通過uni.request向 Spring Boot 后端發送請求獲取商品數據。頁面布局使用了 Flexbox 彈性布局，使商品列表以垂直方向排列，并且使用rpx作為單位設置元素的尺寸和間距，以確保在不同設備上都能有良好的顯示效果。同時，通過v-for指令循環渲染商品數據到頁面上。

二、利用響應式布局實現頁面自適應

2.1 響應式布局功能介紹

UniApp 的響應式布局功能基于 Vue.js 的響應式原理，能夠根據屏幕尺寸的變化自動調整頁面元素的位置和大小。這一功能主要通過以下幾種方式實現：

• Flex 布局：Flexbox 布局模型是實現響應式布局的重要手段。通過設置display: flex，可以將容器內的子元素按照靈活的方式排列。例如，可以通過flex-direction屬性控制子元素是水平排列（row）還是垂直排列（column）；justify-content屬性用于控制子元素在主軸上的對齊方式，如center（居中對齊）、space-between（兩端對齊）等；align-items屬性則控制子元素在交叉軸上的對齊方式。
• 媒體查詢：雖然 UniApp 在小程序端不支持傳統的 CSS 媒體查詢，但在 H5 端可以使用。媒體查詢允許根據設備的屏幕寬度、高度、分辨率等特性來應用不同的樣式。例如，可以使用@media screen and (max-width: 600px)來針對屏幕寬度小于 600px 的設備應用特定的樣式，實現頁面在小屏幕設備上的優化布局。
• 自適應單位：除了前面提到的rpx單位，UniApp 還支持vw（視窗寬度百分比）和vh（視窗高度百分比）等自適應單位。1vw等于視窗寬度的 1%，1vh等于視窗高度的 1%。使用這些單位可以使元素的尺寸根據視窗大小進行動態調整，從而實現響應式布局。比如，設置一個元素的寬度為50vw，那么在任何設備上，該元素都會占據視窗寬度的一半。

2.2 實現源碼示例

以下是一個利用響應式布局實現商品詳情頁面自適應的示例，該頁面從 Spring Boot 后端通過 MyBatis - Plus 獲取商品數據并展示。

首先，在 Spring Boot 后端定義獲取商品詳情的接口，假設商品實體類為Product，數據庫表名為product，使用 MyBatis - Plus 進行數據查詢：

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.example.demo.entity.Product;
import com.example.demo.mapper.ProductMapper;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;@RestController
public class ProductController {private final ProductMapper productMapper;public ProductController(ProductMapper productMapper) {this.productMapper = productMapper;}@GetMapping("/products/{id}")public Product getProductById(@PathVariable Integer id) {QueryWrapper<Product> queryWrapper = new QueryWrapper<>();queryWrapper.eq("id", id);return productMapper.selectOne(queryWrapper);}
}

在 UniApp 前端頁面中，使用uni.request獲取數據，并通過 Flex 布局和媒體查詢實現響應式布局：

<template><view class="product-detail"><image :src="product.imageUrl" mode="aspectFill" class="product-image"></image><view class="product-info"><view class="product-title">{{ product.name }}</view><view class="product-price">價格: {{ product.price }}元</view><view class="product-description">{{ product.description }}</view></view></view>
</template><script>
export default {data() {return {product: {}};},onLoad(options) {const productId = options.id;this.getProductDetails(productId);},methods: {getProductDetails(id) {uni.request({url: `http://localhost:8080/products/${id}`, // 根據實際情況修改method: 'GET',success: res => {this.product = res.data;},fail: err => {console.log('獲取數據失敗', err);}});}}
};
</script><style scoped>
.product-detail {display: flex;flex-direction: column;
}.product-image {width: 100%;height: 300rpx;
}.product-info {padding: 20rpx;
}.product-title {font-size: 24rpx;font-weight: bold;margin-bottom: 10rpx;
}.product-price {font-size: 20rpx;color: #f00;margin-bottom: 10rpx;
}.product-description {font-size: 16rpx;color: #666;
}/* 媒體查詢，針對小屏幕設備調整布局 */
@media screen and (max-width: 480px) {.product-image {height: 200rpx;}.product-title {font-size: 20rpx;}.product-price {font-size: 18rpx;}.product-description {font-size: 14rpx;}
}
</style>

在上述代碼中，通過uni.request獲取商品詳情數據，并在頁面加載時根據商品 ID 請求數據。頁面布局使用 Flex 布局，使圖片和商品信息垂直排列。通過媒體查詢，當屏幕寬度小于 480px 時，調整圖片高度和文字大小，以適應小屏幕設備的顯示，確保在不同屏幕尺寸下都能提供良好的用戶體驗。同時，使用rpx單位保證在不同設備上的相對尺寸一致性。

三、解決移動端常見適配問題

3.1 劉海屏適配

隨著全面屏手機的普及，劉海屏手機越來越常見。劉海屏的出現給移動端應用的界面布局帶來了挑戰，因為屏幕頂部的劉海區域會遮擋頁面內容，影響用戶體驗。在 UniApp 中，適配劉海屏的關鍵在于正確處理安全區域，確保頁面內容不會被劉海遮擋 。安全區域是指屏幕上不會被劉海、圓角或虛擬按鍵等影響的區域。通過合理設置頁面元素的邊距和布局，使其在安全區域內顯示，可以有效解決劉海屏適配問題。

3.2 實現源碼

首先，在manifest.json文件的app-plus節點下進行安全區域配置：

{"app-plus": {"safearea": {"bottom": {"offset": "auto"}}}
}

上述配置中，safearea.bottom.offset設置為auto，表示自動計算底部安全區域偏移，確保頁面內容不會被底部的操作區域遮擋。

在頁面樣式中，使用安全區域變量來設置元素的內邊距，例如：

.page {padding-top: constant(safe-area-inset-top);padding-top: env(safe-area-inset-top);padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);
}

這里使用constant(safe-area-inset-top)和env(safe-area-inset-top)來設置頁面頂部的內邊距，constant(safe-area-inset-bottom)和env(safe-area-inset-bottom)來設置頁面底部的內邊距。constant用于兼容 iOS 12.0 - 12.1 版本，env用于兼容 iOS 11.0 - 11.4 版本 。通過這種方式，頁面內容在劉海屏手機上能夠正確顯示，不會被劉海或底部操作區域遮擋。

3.3 虛擬按鍵適配

虛擬按鍵的出現也會對頁面布局產生影響，尤其是當虛擬按鍵彈出或收起時，頁面元素的位置和大小可能需要動態調整，以避免被虛擬按鍵遮擋或覆蓋，保證用戶界面的完整性和可用性 。在 UniApp 中，適配虛擬按鍵主要通過監聽虛擬按鍵的狀態變化，并根據狀態動態調整頁面元素的樣式和布局。

3.4 實現源碼展示

以下是一個監聽虛擬按鍵狀態并動態調整頁面底部按鈕位置的示例代碼：

<template><view class="container"><view class="content"><!-- 頁面主體內容 --></view><view class="bottom-button" :style="{ bottom: buttonBottom + 'px' }" @click="handleClick">按鈕</view></view>
</template><script>
export default {data() {return {buttonBottom: 0};},onLoad() {this.initVirtualKeyListener();},methods: {initVirtualKeyListener() {uni.onKeyboardHeightChange(res => {if (res.height === 0) {// 虛擬按鍵隱藏this.buttonBottom = 0;} else {// 虛擬按鍵彈出this.buttonBottom = res.height;}});},handleClick() {// 按鈕點擊邏輯}}
};
</script><style scoped>
.container {position: relative;height: 100vh;
}.content {padding: 20rpx;
}.bottom-button {position: fixed;left: 0;width: 100%;height: 80rpx;line-height: 80rpx;text-align: center;background-color: #007aff;color: #fff;
}
</style>

在上述代碼中，通過uni.onKeyboardHeightChange方法監聽虛擬按鍵的高度變化。當虛擬按鍵隱藏時（res.height === 0），將按鈕的bottom樣式屬性設置為 0；當虛擬按鍵彈出時，將按鈕的bottom樣式屬性設置為虛擬按鍵的高度res.height，從而實現按鈕位置的動態調整，確保按鈕不會被虛擬按鍵遮擋，保證頁面在虛擬按鍵出現時仍能正常展示和交互。