07 商品详情
7.0 創建 goodsdetail 分支
運行如下的命令，基于 master 分支在本地創建 goodsdetail 子分支，用來開發商品詳情頁相關的功能：
git checkout -b goodsdetail#7.1 添加商品詳情頁的編譯模式
在微信開發者工具中，點擊工具欄上的編譯模式下拉菜單，選擇?添加編譯模式?選項：
勾選?啟動頁面?的路徑，并填寫了?啟動參數?之后，點擊?確定?按鈕，添加詳情頁面的編譯模式：
#7.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} }#7.3 渲染商品詳情頁的 UI 結構
#7.3.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%;} }#7.3.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)}) }#7.3.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;} }#7.3.4 渲染商品詳情信息
?渲染富文本內容
在頁面結構中，使用?rich-text?組件，將帶有 HTML 標簽的內容，渲染為小程序的頁面結構：
<!-- 商品詳情信息 --> <rich-text :nodes="goods_info.goods_introduce"></rich-text>修改?getGoodsDetail?方法，從而解決圖片底部?空白間隙?的問題：? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖片間隙，在網頁里邊只需要加dispaly:block樣式就可以
? // 定義請求商品詳情數據的方法 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 }?
?
#7.3.5 解決商品價格閃爍的問題
導致問題的原因：在商品詳情數據請求回來之前，data 中?goods_info?的值為?{}，因此初次渲染頁面時，會導致?商品價格、商品名稱?等閃爍的問題。
解決方案：判斷?goods_info.goods_name?屬性的值是否存在，從而使用?v-if?指令控制頁面的顯示與隱藏：
? <template><view v-if="goods_info.goods_name"><!-- 省略其它代碼 --></view> </template>#7.4 渲染詳情頁底部的商品導航區域
?
?
#7.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%; }#7.4.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'})} }#7.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總結
- 上一篇： 01_测试基础知识---微信公众号测试点
- 下一篇： 康复期需注意什么？一组手账告诉你