🚀前言

在当今数字化消费时代，迷你商城小程序因其便捷性和高效性，越来越成为商家与消费者之间重要的桥梁。作为一种创新的商业工具，小程序能够让用户在微信生态内轻松浏览、选择和购买商品，满足了现代消费者对快速购物体验的需求。而在迷你商城小程序的核心功能中，商品列表与商品详情页的开发尤为重要，它们直接影响着用户的购物决策和体验。

商品列表页作为用户浏览商品的第一步，承载着展示商品信息、吸引用户点击的重要使命。而商品详情页则是用户深入了解产品、做出购买决定的关键环节。如何设计一个直观易用的商品列表，以及一个信息丰富且吸引人的商品详情页，是每个开发者在迷你商城小程序开发过程中必须面对的挑战。

🚀一、商品列表与商品详情页开发

🔎1.商品列表页开发

🦋1.1 云函数 searchProduct

文件路径：cloudfunctions/searchProduct/index.js

此云函数实现了商品的搜索功能，支持通过正则表达式在商品名称和分类名称中进行匹配。

const cloud = require('wx-server-sdk')
cloud.init({
  env: '' // 填写您的云环境ID
})
const db = cloud.database();
const _ = db.command;
exports.main = async (event, context) => {
    // 拿到检索参数
    let key = event.key;
    let collection = db.collection("shop_product");
    let data = await collection.where(_.or({
        cname:db.RegExp({
            regexp:key
        })
    },{
        name:db.RegExp({
            regexp:key
        })
    })).get();
    return data.data;
}

🦋1.2 在 server.js 中新增检索商品方法

文件路径：utils/server/server.js

我们需要在小程序端调用云函数，因此在 server.js 中新增一个方法 searchProduct，用于向云函数发送请求并获取搜索结果。

// utils/server/server.js
const server = {
    searchProduct:function(key,callback){
        wx.cloud.callFunction({
            name:"searchProduct",
            data:{
                key:key
            }
        }).then(res=>{
            callback(res.result);
        }).catch(error=>{
            wx.showToast({
              title: `搜索失败`,
              icon:"none"
            })
            console.log(error);
        });
    },
};

module.exports = { server };

🦋1.3 搜索页面 search.wxml

文件路径：pages/search/search.wxml

这个页面展示商品列表，使用之前已经开发好的商品列表组件 goods-list。

<!--pages/search/search.wxml-->
<view class="list">
    <goods-list items="{{productList}}" bindtapItem="toProductDetail" emptyText="暂无商品上架"></goods-list>
</view>

🦋1.4 搜索页面 search.json

文件路径：pages/search/search.json

在这个文件中，我们需要引入 goods-list 组件。

{
    "usingComponents": {
        "goods-list":"../../components/goods-list/index"
    }
}

🦋1.5 搜索页面 search.wxss

文件路径：pages/search/search.wxss

样式文件，可以根据实际需要进行自定义。

/* pages/search/search.wxss */
.list {
  padding: 20px;
}

🦋1.6 搜索页面 search.js

文件路径：pages/search/search.js

在该文件中，处理搜索逻辑，获取云函数返回的商品数据，并将其渲染到页面上。

// pages/search/search.js
const server = require('../../utils/server/server').server;
Page({

    /**
     * 页面的初始数据
     */
    data: {
        productList:[]
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.data.key = options.key;
        wx.setNavigationBarTitle({
          title: `与'${options.key}'相关的商品`,
        })
    },

    onShow(){
        this.search();
    },
    toProductDetail:function(event) {
        console.log(`查看商品详情-${event.detail.item.name}`);
        wx.navigateTo({
            url: '../product/product?gid=' + event.detail.item.gid,
        })
    },
    search:function() {
        server.searchProduct(this.data.key, res=>{
            this.setData({
                productList:res
            });
        });
    }
})

🦋1.7 商品列表页的跳转逻辑

在其他页面（例如分类页 category.js）中调用搜索页面：

你可以在搜索框中输入关键词进行搜索，或者在点击分类模块中的某个二级分类时跳转到搜索页面。

toSearch:function(event) {
    let key = event.detail;
    if (key.length == 0) {
        wx.showToast({
          title: '请输入搜索内容',
          icon:'none'
        });
        return;
    }
    console.log(`搜索-${event.detail}`);
    wx.navigateTo({
        url: `/pages/search/search?key=${key}`,
      })
    this.selectComponent('.search-bar').clear();
},

🦋1.8 页面效果

1. 搜索功能：用户在搜索框中输入关键词时，跳转到 search 页面，显示与搜索关键词相关的商品列表。
2. 商品展示：搜索页面通过 goods-list 组件展示商品数据，并且支持点击查看商品详情。
3. 云函数支持：云函数 searchProduct 根据输入的关键词查询商品数据，返回匹配的商品。

🔎2.商品详情页开发

🦋2.1 商品详情页 product.wxml

文件路径：pages/product/product.wxml

该文件用于展示商品的详细信息，并提供购买和加入购物车的按钮。

<!--pages/product/product.wxml-->
<view>
    <view>
        <image class="header" src="{{product.img}}" mode="aspectFit"></image>
    </view>
    <view>
        <text class="price">￥{{product.price}}</text>
        <text class="discount">惊喜折扣：{{product.discount}}折</text>
    </view>
    <view class="name">
        {{product.name}}
    </view>
    <view class="content">
        商品详情
    </view>
    <view class="bottom">
        <view class="button1" bindtap="buy">
            立即购买
        </view>
        <view class="button2" bindtap="addCar">
            加入购物车
        </view>
        <view class="car" bindtap="goCar">
            <view><text class="iconfont icon-gouwuche icon"></text></view>
            <view><text class="">购物车</text></view>
        </view>
    </view>
</view>

🦋2.2 商品详情页 product.wxss

文件路径：pages/product/product.wxss

这个文件为页面元素提供样式，可以根据实际设计进行调整。

/* pages/product/product.wxss */
.header {
    width: 100%;
    height: 300px;
}

.price {
    color: #c61100;
    font-size: 30px;
    margin-left: 15px;
}

.discount {
    margin-left: 5px;
    color: gray;
}

.name {
    margin-left: 15px;
    font-weight: bold;
    font-size: 14px;
}

.content {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    color: gray;
    font-size: 30px;
}

.bottom {
    border-top: solid 1px #d1d1d1;
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 60px;
    display: flex;
    flex-direction: row-reverse;
}

.button1 {
    margin-right: 20px;
    background-color: #d33e28;
    height: 40px;
    color: white;
    margin-top: 10px;
    line-height: 40px;
    border-radius: 20px;
    width: 100px;
    text-align: center;
    font-weight: bold;
}

.button2 {
    margin-right: 20px;
    background-color: #e6cf24;
    height: 40px;
    color: white;
    margin-top: 10px;
    line-height: 40px;
    border-radius: 20px;
    width: 100px;
    text-align: center;
    font-weight: bold;
}

.car {
    font-size: 12px;
    text-align: center;
    margin-top: 8px;
    margin-right: 15px;

}

.icon {
    font-size: 23px;
}

🦋2.3 商品详情页 product.js

文件路径：pages/product/product.js

在这个文件中，我们从云函数获取商品详情并渲染到页面上，同时处理购买、加入购物车和跳转到购物车页面的逻辑。

// pages/product/product.js
const server = require('../../utils/server/server').server;
Page({

    /**
     * 页面的初始数据
     */
    data: {
        gid:"",
        product:{}
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.data.gid = options.gid;
    },
    onShow() {
        this.getProductDetail();
    },

    getProductDetail() {
        server.getProductDetail(this.data.gid, res=>{
            console.log(res);
            wx.setNavigationBarTitle({
              title: res.name,
            })
            this.setData({
                product:res ?? {}
            });
        });       
    },

    buy() {
        server.createOrder([this.data.gid],(res)=>{
            // 跳转订单详情
            console.log("创建订单成功", res);
            wx.navigateTo({
              url: '../orderDetail/orderDetail?orderId=' + res._id,
            });
        })
    },  
    addCar() {
       server.addToCar(this.data.gid,()=>{
           wx.showToast({
             title: '添加成功',
             icon:"none"
           })
       })
    },
    goCar() {
        wx.switchTab({
          url: '/pages/shopping/shopping',
        })
    }
})

🦋2.4 云函数 getProductDetail

文件路径：cloudfunctions/getProductDetail/index.js

此云函数根据商品ID获取商品的详细信息，并返回给前端。

const cloud = require('wx-server-sdk')
cloud.init({
  env: '' // 填写您的云环境ID
})
const db = cloud.database();
exports.main = async (event, context) => {
    // 拿到参数
    let gid = event.gid;
    let collection = db.collection("shop_product");
    let data = await collection.where({
        gid:gid
    }).get();
    if (data.data.length > 0) {
        return  data.data[0];
    }
    return;
}

🦋2.5 小程序端调用云函数获取商品详情

文件路径：utils/server/server.js

我们需要在 server.js 中封装一个方法 getProductDetail，用于调用云函数获取商品详情。

// utils/server/server.js
const server = {
    getProductDetail:function(gid, callback) {
        wx.cloud.callFunction({
            name:"getProductDetail",
            data:{
                gid:gid
            }
        }).then(res=>{
            callback(res.result);
        }).catch(error=>{
            wx.showToast({
              title: `获取商品详情失败`,
              icon:"none"
            })
            console.log(error);
        });
    },
};

module.exports = { server };

🦋2.6 商品列表页跳转商品详情页

在商品列表页或首页中，使用以下方法跳转到商品详情页：

toProductDetail:function(event) {
    console.log(`查看商品详情-${event.detail.item.name}`);
    wx.navigateTo({
        url: '../product/product?gid=' + event.detail.item.gid,
    })
},