【愚公系列】《微信小程序与云开发从入门到实践》058-迷你商城小程序的开发（商品列表与商品详情页开发）

🚀前言

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

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

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

🔎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/goo