文章目錄

• 前言
• 七、商品詳情
• • 1、創建 goodsdetail 分支并添加編譯模式
  • 2、獲取商品詳情數據
  • 3、渲染商品詳情頁的 UI 結構
  • • （1）渲染輪播圖區域
    • （2）實現輪播圖預覽效果
    • （3） 渲染商品信息區域
    • （4）渲染商品詳情信息
    • （5） 解決商品價格閃爍的問題
  • 4、渲染詳情頁底部的商品導航區域
  • （1） 渲染商品導航區域的 UI 結構
  • （2）點擊跳轉到購物車頁面
  • 5、分支的合并與提交

---

前言

基于 uni-app 開發的微信小程序商城項目

• 備用接口地址：https://api-hmugo-web.itheima.net
• 商品詳情

---

七、商品詳情

1、創建 goodsdetail 分支并添加編譯模式

基于 master 分支在本地創建 goodsdetail 子分支，用來開發商品詳情頁相關的功能：

git checkout -b goodsdetail

2、獲取商品詳情數據

在 data 中定義商品詳情的數據節點：

data() {return {// 商品詳情對象goods_info: {}} }

在 onLoad 中獲取商品的 Id，并調用請求商品詳情的方法：

onLoad(options) {// 獲取商品 Idconst goods_id = options.goods_id// 調用請求商品詳情數據的方法this.getGoodsDetail(goods_id) }

在 methods 中聲明 getGoodsDetail 方法：

methods: {// 定義請求商品詳情數據的方法async getGoodsDetail(goods_id) {const { data: res } = await uni.$http.get('/api/public/v1/goods/detail', { goods_id })if (res.meta.status !== 200) return uni.$showMsg()// 為 data 中的數據賦值this.goods_info = res.message}}

3、渲染商品詳情頁的 UI 結構

（1）渲染輪播圖區域

使用 v-for 指令，循環渲染如下的輪播圖 UI 結構：

<!-- 輪播圖區域 --> <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"><swiper-item v-for="(item, i) in goods_info.pics" :key="i"><image :src="item.pics_big"></image></swiper-item> </swiper>

美化輪播圖的樣式：

swiper {height: 750rpx;image {width: 100%;height: 100%;} }

（2）實現輪播圖預覽效果

為輪播圖中的 image 圖片綁定 click 事件處理函數：

<swiper-item v-for="(item, i) in goods_info.pics" :key="i"><!-- 把當前點擊的圖片的索引，傳遞到 preview() 處理函數中 --><image :src="item.pics_big" @click="preview(i)"></image> </swiper-item>

在 methods 中定義 preview 事件處理函數：

// 實現輪播圖的預覽效果 preview(i) {// 調用 uni.previewImage() 方法預覽圖片uni.previewImage({// 預覽時，默認顯示圖片的索引current: i,// 所有圖片 url 地址的數組urls: this.goods_info.pics.map(x => x.pics_big)}) }

（3） 渲染商品信息區域

定義商品信息區域的 UI 結構如下：

<!-- 商品信息區域 --> <view class="goods-info-box"><!-- 商品價格 --><view class="price">￥{{goods_info.goods_price}}</view><!-- 信息主體區域 --><view class="goods-info-body"><!-- 商品名稱 --><view class="goods-name">{{goods_info.goods_name}}</view><!-- 收藏 --><view class="favi"><uni-icons type="star" size="18" color="gray"></uni-icons><text>收藏</text></view></view><!-- 運費 --><view class="yf">快遞：免運費</view> </view>

美化商品信息區域的樣式：

// 商品信息區域的樣式 .goods-info-box {padding: 10px;padding-right: 0;.price {color: #c00000;font-size: 18px;margin: 10px 0;}.goods-info-body {display: flex;justify-content: space-between;.goods-name {font-size: 13px;padding-right: 10px;}// 收藏區域.favi {width: 120px;font-size: 12px;display: flex;flex-direction: column;justify-content: center;align-items: center;border-left: 1px solid #efefef;color: gray;}}// 運費.yf {margin: 10px 0;font-size: 12px;color: gray;} }

（4）渲染商品詳情信息

在頁面結構中，使用 rich-text 組件，將帶有 HTML 標簽的內容，渲染為小程序的頁面結構：

<!-- 商品詳情信息 --> <rich-text :nodes="goods_info.goods_introduce"></rich-text>

修改 getGoodsDetail 方法，從而解決圖片底部 空白間隙 的問題：

// 定義請求商品詳情數據的方法 async getGoodsDetail(goods_id) {const { data: res } = await uni.$http.get('/api/public/v1/goods/detail', { goods_id })if (res.meta.status !== 200) return uni.$showMsg()// 使用字符串的 replace() 方法，為 img 標簽添加行內的 style 樣式，從而解決圖片底部空白間隙的問題res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g, '<img style="display:block;" ')this.goods_info = res.message }

解決 .webp 格式圖片在 ios 設備上無法正常顯示的問題：

// 定義請求商品詳情數據的方法 async getGoodsDetail(goods_id) {const { data: res } = await uni.$http.get('/api/public/v1/goods/detail', { goods_id })if (res.meta.status !== 200) return uni.$showMsg()// 使用字符串的 replace() 方法，將 webp 的后綴名替換為 jpg 的后綴名res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g, '<img style="display:block;" ').replace(/webp/g, 'jpg')this.goods_info = res.message }

（5） 解決商品價格閃爍的問題

導致問題的原因：在商品詳情數據請求回來之前，data 中 goods_info 的值為 {}，因此初次渲染頁面時，會導致 商品價格、商品名稱 等閃爍的問題。

解決方案：判斷 goods_info.goods_name 屬性的值是否存在，從而使用 v-if 指令控制頁面的顯示與隱藏：

<template><view v-if="goods_info.goods_name"><!-- 省略其它代碼 --></view> </template> <br/>

4、渲染詳情頁底部的商品導航區域

（1） 渲染商品導航區域的 UI 結構

基于 uni-ui 提供的 GoodsNav 組件來實現商品導航區域的效果

在 data 中，通過 options 和 buttonGroup 兩個數組，來聲明商品導航組件的按鈕配置對象：

data() {return {// 商品詳情對象goods_info: {},// 左側按鈕組的配置對象options: [{icon: 'shop',text: '店鋪'}, {icon: 'cart',text: '購物車',info: 2}],// 右側按鈕組的配置對象buttonGroup: [{text: '加入購物車',backgroundColor: '#ff0000',color: '#fff'},{text: '立即購買',backgroundColor: '#ffa200',color: '#fff'}]} }

在頁面中使用 uni-goods-nav 商品導航組件：

<!-- 商品導航組件 --> <view class="goods_nav"><!-- fill 控制右側按鈕的樣式 --><!-- options 左側按鈕的配置項 --><!-- buttonGroup 右側按鈕的配置項 --><!-- click 左側按鈕的點擊事件處理函數 --><!-- buttonClick 右側按鈕的點擊事件處理函數 --><uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" /> </view>

美化商品導航組件，使之固定在頁面最底部：

.goods-detail-container {// 給頁面外層的容器，添加 50px 的內padding，// 防止頁面內容被底部的商品導航組件遮蓋padding-bottom: 50px; }.goods_nav {// 為商品導航組件添加固定定位position: fixed;bottom: 0;left: 0;width: 100%; }

（2）點擊跳轉到購物車頁面

點擊商品導航組件左側的按鈕，會觸發 uni-goods-nav 的 @click 事件處理函數，事件對象 e 中會包含當前點擊的按鈕相關的信息：

// 左側按鈕的點擊事件處理函數 onClick(e) {console.log(e) }

打印的按鈕信息對象如下：

根據 e.content.text 的值，來決定進一步的操作：

// 左側按鈕的點擊事件處理函數 onClick(e) {if (e.content.text === '購物車') {// 切換到購物車頁面uni.switchTab({url: '/pages/cart/cart'})} }

5、分支的合并與提交

將 goodsdetail 分支進行本地提交：

git add . git commit -m "完成了商品詳情頁面的開發"

將本地的 goodsdetail 分支推送到碼云：

git push -u origin goodsdetail

將本地 goodsdetail 分支中的代碼合并到 master 分支：

git checkout master git merge goodsdetail git push

刪除本地的 goodsdetail 分支：

git branch -d goodsdetail

總結

以上是生活随笔為你收集整理的微信小程序--优购商城项目（6）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。