2025年从零到整开发JJ智能生鲜平台（小程序版）

科技前沿 • 2025-01-12 14:27 • 阅读 70

大家好，我是讯享网，很高兴认识大家。

现在电商做的风生水起，各家门主都想得其红利，分一杯肥羹。无论是小程序还是移动端、web端前端页面开发都大致相同。不能只会写代码，不会梳理描述。我把JJ智能生鲜平台（以下简称JJ平台）分各个页面和模块编写，然后逐一进行分析，实现页面间交互，比如点击首页轮播图跳转到对应商品详情页等，最后附上源码。

实现效果如下：

小程序效果图
讯享网

本文主要涵盖一下内容：

Easy Mock
平台首页
分类详情页
购物车
个人中心
商品详情页
提交订单页
请求并接口数据

JJ平台涉及技术：

Easy Mock
小程序
Vant Weapp（ZanUI）
javascript
css

1. Easy Mock

Easy Mock用来模拟数据，可以快速生成前端接口。它能够为小程序提供一个由前端完全控制的“服务端”平台，可以让小程序开发过程中，小程序的开发不会被后台的开发所阻塞。

创建项目和接口如下：

easymock

EasyMock使用教程可以参考官方文档

将项目所需要要的数据模拟好以后来开发首页，当然这一步也可以放在最后做。

1.项目结构

项目结构图如下：

项目结构图

2.JJ首页

首页包含navigation顶部、搜索框、轮播图、商品种类（使用商品代替了）等，搜索框和商品卡片是使用vant weapp提供的组件完成，轮播图使用小程序官方提供的组件完成。

部分wxml代码如下：

<view class='header'> <!-- 使用vant weapp的search组件 --> <van-search class="searchbox" value="{ 
    { value }}" placeholder="新鲜荔枝" use-action-slot="true" bind:search="onSearch" shape="round" background="#eee" > <view slot="action" bind:tap="onSearch">搜索</view> </van-search> </view> <view class='slide'> <!-- 轮播图 --> <swiper class='slide' autoplay='true' indicator-dots='true' indicator-color='white' circular="true" interval="2000"> <block wx:for="{ 
    {slides}}" wx:key="index"> <swiper-item> <navigator url="../goods/goods?" open-type="switchTab"> <image mode="widthFix" src='{ 
    {item.image}}'></image> </navigator> </swiper-item> </block> </swiper>

讯享网

效果如下：

3.分类详情页

详情页主要是使用小程序组件知识实现的，主要还是样式的设置。顶部按钮可以实现切换。切换的效果使用小程序提供的swiper滑动组件实现，wxml代码如下：

讯享网<!-- goods.wxml --> <!-- by tomorrownan --> <view class='tabbtn'> <ul> <li class="{ 
    {current==0 ? 'active' : ''}}" bindtap="switchCur" data-index="0">默认</li> <li class="{ 
    {current==1 ? 'active' : ''}}" bindtap="switchCur" data-index="1" >价格</li> <li class="{ 
    {current==2 ? 'active' : ''}}" bindtap

2025年从零到整开发JJ智能生鲜平台（小程序版）

1. Easy Mock

1.项目结构

2.JJ首页

3.分类详情页

相关推荐