电商小程序实战01·项目简介与开发环境搭建

2024-12-18 / weapp

电商小程序实战01·项目简介与开发环境搭建

项目简介

本项目旨在开发一款简单的电商小程序，主要功能包括：

商品展示
购物车管理
订单提交与支付
用户身份验证

我们将从零开始，逐步实现这些功能，最终实现一个完整的小程序电商应用。整个项目使用微信小程序的标准开发工具和云开发功能，适合开发者通过实战掌握微信小程序的开发技巧。

前言

本篇为《电商小程序实战》第一篇：开发环境搭建。

内容简介：根据项目的背景和需求，帮助读者完成开发环境的搭建。
主要内容：
- 项目背景：简要说明电商小程序的功能需求（如商品展示、购物车、订单提交等）；
- 规划项目结构与模块：整体的页面设计和功能规划
- 安装与配置微信开发者工具（含Linux用户免Wine安装），创建项目
- 项目文件目录结构和配置文件（app.json、page.json 等）
目标：提供详细的项目配置，解决Linux用户的安装问题，帮助读者顺利启动项目。

开发环境搭建

要开发微信小程序，首先需要安装微信开发者工具并配置开发环境。以下是详细步骤：

安装微信开发者工具

访问微信官网（微信开发者工具）并下载适用于你操作系统的开发者工具。
- 对于 Linux 用户也可免Wine安装:
  - Ubuntu实测可通过snap安装。（笔者使用中发现无法使用git功能，且偶尔会闪退）
  - https://github.com/msojocs/wechat-web-devtools-linux/ ，最新版为v1.06.2409140-2。
  - https://github.com/dragonation/wechat-devtools/ ，最新版为1.03.2009140（截止时间2020年9月28日）。
安装并启动微信开发者工具。
注册一个小程序账号，登录微信开发者工具，点击“创建小程序”，并输入小程序的AppID（如果没有AppID，可以选择”无AppID”进行测试）。

创建小程序项目

在微信开发者工具顶部菜单栏中，选择“项目-新建项目”。
设置项目名称（例如：“ecommerce-miniprogram”）和项目目录（选择一个空文件夹作为项目存储位置）。
如果你没有注册小程序的AppID，选择”无AppID”进行测试。
我们暂不使用模板。

创建一个新的微信小程序项目后，你将看到以下的默认目录结构：

为了方便后续项目开发，我们新建部分目录如下：

/ecommerce-miniprogram
├── /assets          // 存放图片、图标等静态资源
├── /components      // 通用组件
├── /pages           // 页面目录
│   ├── /login       // 登录页面
│   ├── /profile     // 用户信息管理页面
│   ├── /order       // 订单管理页面
│   ├── /product     // 商品展示页面
│   ├── /cart        // 购物车页面
│   ├── /checkout    // 结算页面
│   ├── /payment     // 支付页面
│   └── /faq         // FAQ 页面
├── /utils           // 工具函数
├── app.js           // 小程序主入口文件
├── app.json         // 小程序配置文件
└── app.wxss         // 小程序全局样式文件

配置app.json
在 app.json 中配置首页和其他页面的路径，并设置应用的窗口样式。以下是一个基本的配置文件：

{
"pages": [
"pages/index/index",
"pages/cart/cart",
"pages/order/order"
],
"window": {
"navigationBarBackgroundColor": "#ff6600",
"navigationBarTitleText": "电商小程序",
"navigationBarTextStyle": "white"
}
}

pages：数组中列出了所有的页面路径。当我们需要新增页面模块的时候，可以在这里进行配置并保存，开发工具会自动生成对应的模块目录及文件。
window：设置小程序的导航栏样式，包括背景颜色、标题文本颜色等。

在 miniprogram/pages/ 目录下，我们将创建多个页面。例如：

index：商品展示页
cart：购物车页
order：订单提交页

接下来，我们创建首页 index 页面。

编写首页（商品展示页面）

在 miniprogram/pages/index/index 文件夹下，创建以下文件：

index.wxml：页面结构
index.wxss：页面样式
index.js：页面逻辑
index.json：页面配置（可选）

创建商品展示页面 (index.wxml)

首先，我们创建一个简单的商品展示页面，使用 swiper 组件展示商品图片，使用 view 和 text 组件显示商品信息。

<!-- index.wxml -->
<view class="container">
  <!-- 商品轮播图 -->
  <swiper class="swiper-container" autoplay="true" interval="3000" circular="true">
    <swiper-item wx:for="{{banner}}" wx:key="index">
      <image class="swiper-image" src="{{item.imageUrl}}" mode="aspectFill"></image>
    </swiper-item>
  </swiper>

  <!-- 商品列表 -->
  <view class="product-list">
    <view class="product-item" wx:for="{{products}}" wx:key="index">
      <image class="product-image" src="{{item.imageUrl}}" mode="aspectFill"></image>
      <view class="product-info">
        <text class="product-name">{{item.name}}</text>
        <text class="product-price">{{item.price}}元</text>
      </view>
    </view>
  </view>
</view>

swiper 组件用于展示商品的轮播图。
view 和 text 用于展示商品的图片、名称和价格。

编写样式文件 (index.wxss)

接下来，我们为页面添加样式。

/* index.wxss */
.container {
  padding: 10px;
}

.swiper-container {
  width: 100%;
  height: 200px;
}

.swiper-image {
  width: 100%;
  height: 200px;
}

.product-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}

.product-item {
  width: 50%;
  padding: 10px;
}

.product-image {
  width: 100%;
  height: 150px;
}

.product-info {
  margin-top: 10px;
}

.product-name {
  font-size: 16px;
  font-weight: bold;
}

.product-price {
  font-size: 14px;
  color: #ff6600;
}

设置了商品展示页面的布局、图片尺寸和文字样式。

编写页面逻辑 (index.js)

在 index.js 文件中，编写页面的 JavaScript 逻辑，加载商品数据和轮播图数据。

// index.js
Page({
  data: {
    banner: [
      { imageUrl: 'https://example.com/banner1.jpg' },
      { imageUrl: 'https://example.com/banner2.jpg' },
      { imageUrl: 'https://example.com/banner3.jpg' }
    ],
    products: [
      { name: '商品1', price: 99, imageUrl: 'https://example.com/product1.jpg' },
      { name: '商品2', price: 199, imageUrl: 'https://example.com/product2.jpg' },
      { name: '商品3', price: 299, imageUrl: 'https://example.com/product3.jpg' },
      { name: '商品4', price: 399, imageUrl: 'https://example.com/product4.jpg' }
    ]
  },
  onLoad: function () {
    // 模拟获取商品数据
    console.log('首页加载');
  }
});

data 中存储了商品和轮播图的数据。
onLoad 生命周期函数会在页面加载时执行，可以用于模拟获取数据。

配置页面 (index.json)

如果你有特殊的页面配置需求，可以在 index.json 文件中进行设置。例如，设置页面的标题：

{
  "navigationBarTitleText": "首页"
}

运行与测试

保存所有文件后，在微信开发者工具中点击“编译”按钮查看效果。
你应该能够看到一个带有轮播图和商品列表的首页。

小结

在本篇文章中，我们：

搭建了微信小程序的开发环境。
创建了一个简单的电商小程序项目。
编写了首页页面，展示了商品轮播图和商品列表。

接下来的篇章中，我们将逐步实现购物车功能、订单提交、支付集成等功能，完成这个电商小程序的开发。

下一步

在下一篇文章中，我们将实现购物车功能，包括商品的添加、删除、修改数量等功能，并通过本地存储来管理购物车数据。

demo1984s 的个人博客

记录精彩的程序人生