微信小程序 商城开发（ecshop ）简单实例

下面是“微信小程序 商城开发（ecshop）简单实例”的完整攻略。

准备工作

首先，在开始进行微信小程序商城开发之前，我们需要先进行以下准备工作：
- 安装好微信开发者工具
- 在 ecshop 官网 上下载 ecshop 版本的目录结构，并将其放到服务器上
- 使用 phpMyAdmin 创建好相关数据库，并将 ecshop 安装包中的 SQL 文件导入数据库中
- 配置 ecshop 目录下的 config.php 文件，填入服务器 IP 和数据库信息

准备工作完成后，我们就可以开始进行微信小程序商城的开发了。

创建小程序

1. 打开微信开发者工具，选择“小程序项目”
2. 填写 AppID、项目名称等信息，并选择“微信官方示例代码”模板
3. 创建成功后，可以在开发者工具中看到项目的目录结构

小程序主页设计

1. 将 ecshop 客户端目录下的 index.php 文件拷贝至小程序的 pages 目录下
2. 在小程序的 app.json 文件中添加首页的路径： "pages/index/index"
3. 修改 index.php 文件，将其中的布局和样式修改为小程序对应的 WXML 和 WXSS，实现相似的界面效果

请求后端数据

1. 在小程序的 index.js 文件中，编写后端数据请求代码
2. 使用 wx.request() 函数向后端服务器发送请求，并在回调函数中处理返回的数据
3. 将数据绑定到页面上，实现动态显示

示例说明1：商品列表页

我们可以创建一个类似 ecshop 客户端的商品列表页，代码如下：

WXML 文件：

<!-- 商品列表 -->
<view class="product-container">
  <view class="product-item" wx:for="{{products}}" wx:key="{{item.id}}">
    <image class="product-image" src="{{item.image}}" />
    <view class="product-info">
      <text class="product-name">{{item.name}}</text>
      <text class="product-price">{{item.price}}</text>
    </view>
    <button class="product-buy-btn">购买</button>
  </view>
</view>

JS 文件：

// 商品列表页
Page({
  data: {
    products: []
  },
  onLoad: function() {
    var that = this;
    wx.request({
      url: 'https://example.com/api/products', // 后端数据接口
      success: function(res) {
        that.setData({
          products: res.data
        });
      }
    })
  }
})

WXSS 文件：

/* 商品列表样式 */
.product-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20rpx;
}

.product-item {
  width: 300rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, .1);
}

.product-image {
  width: 300rpx;
  height: 300rpx;
  border-radius: 10rpx 10rpx 0 0;
}

.product-info {
  padding: 20rpx 10rpx;
}

.product-name {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.product-price {
  font-size: 24rpx;
  color: #f00;
}

.product-buy-btn {
  display: block;
  width: 100%;
  height: 80rpx;
  font-size: 30rpx;
  color: #fff;
  background-color: #f00;
  border: none;
  border-radius: 0 0 10rpx 10rpx;
  outline: none;
}

通过上述代码，我们可以在小程序中实现一个简单的商品列表，其中包括图片、商品名称、价格和购买按钮，来实现一个简单的商城页面的效果。

示例说明2：购物车页面

在小程序中，我们也可以创建一个购物车页面，展示用户已经选择的商品列表。

WXML 文件：

<!-- 购物车 -->
<view class="cart-container">
  <view class="cart-item" wx:for="{{cart}}" wx:key="{{item.id}}">
    <image class="cart-image" src="{{item.image}}" />
    <view class="cart-info">
      <text class="cart-name">{{item.name}}</text>
      <text class="cart-price">{{item.price}}</text>
    </view>
    <button class="cart-remove-btn" data-id="{{item.id}}" bindtap="removeCartItem">删除</button>
  </view>
</view>

JS 文件：

// 购物车页
Page({
  data: {
    cart: []
  },
  onLoad: function() {
    var that = this;
    // 将购物车数据从本地缓存中读取出来
    wx.getStorage({
      key: 'cart',
      success: function(res) {
        that.setData({
          cart: res.data
        })
      }
    })
  },
  removeCartItem: function(e) {
    var that = this;
    var id = e.target.dataset.id;
    // 从本地缓存中删除购物车中的指定商品
    wx.getStorage({
      key: 'cart',
      success: function(res) {
        var cart = res.data;
        for (var i = 0; i < cart.length; i++) {
          if (cart[i].id == id) {
            cart.splice(i, 1);
            break;
          }
        }
        wx.setStorage({
          key: 'cart',
          data: cart,
          success: function() {
            that.setData({
              cart: cart
            })
          }
        })
      }
    })
  }
})

WXSS 文件：

/* 购物车样式 */
.cart-container {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  height: 100vh;
}

.cart-item {
  height: 200rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, .1);
  display: flex;
  align-items: center;
}

.cart-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 10rpx;
}

.cart-info {
  padding: 20rpx 10rpx;
  flex-grow: 1;
}

.cart-name {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.cart-price {
  font-size: 24rpx;
  color: #f00;
}

.cart-remove-btn {
  display: block;
  width: 160rpx;
  height: 80rpx;
  font-size: 30rpx;
  color: #fff;
  background-color: #f00;
  border: none;
  border-radius: 10rpx;
  outline: none;
  margin-right: 20rpx;
}

上述代码可以帮助我们实现一个简单的购物车页面，其中包括商品列表、商品图片、商品名称、商品价格和删除按钮。在用户点击删除按钮时，该商品将从本地缓存中移除，同时更新购物车数据并重新绑定到页面上。

综上所述，通过完整的攻略和示例解释，我们可以明白如何使用微信小程序进行商城开发了。