电商小程序实战教程-首页的创建

电商小程序实战教程

第一章 总体介绍

第二章 创建数据源

第三章 创建管理后台

前言

我们已经利用三篇的内容介绍了电商小程序的总体规划、数据源的开发及管理后台的开发。有了这三个基础就相当于打好了地基，之后就是在地基上按照图纸进行施工了。

日常店铺对外的主要是小程序，顾客登录小程序可以浏览商品，将需要购买的商品加入购物车，确认无误后进行支付等操作。

本节我们就开始介绍小程序部分的开发。开发的步骤包括：

• 创建应用
• 页面开发
• 测试及发布

应用创建

登录控制台，点击应用，点击新建空白应用

在这里插入图片描述

输入应用的名称

在这里插入图片描述

点击空白页，创建页面

在这里插入图片描述

在这里插入图片描述

首页开发

我们按照需求的规划，首页主要是展示店铺的信息、产品的导航及热销商品。

轮播图

先往页面添加普通容器

在这里插入图片描述

往普通容器里添加轮播组件

在这里插入图片描述

为了将图片的地址替换为数据源里真实的图片，我们需要定义一个模型变量，点击导航条的变量

在这里插入图片描述

在页面旁边点击 号，创建一个模型变量

在这里插入图片描述

选择好店铺的数据源，选择分页方法，并且设置好参数，只取一条

在这里插入图片描述

在这里插入图片描述

变量设置好后就可以给图片的地址进行绑定了，点击绑定按钮

在这里插入图片描述

选择好变量

在这里插入图片描述

第二张图片我们用表达式进行绑定

代码语言：javascript复制

$page.dataset.state.shopimages.records[0].guanggaotupian[1]

在这里插入图片描述

看你个人的需要，如果需要继续展示图片可用继续用表达式进行绑定。

这样轮播图就设置好了，可以看到预览窗口里已经展示出来了真实的图片了

在这里插入图片描述

店铺信息简介

轮播图下边我们可以放置店铺的简介信息，先添加一个普通容器

在这里插入图片描述

里边再增加一个普通容器

在这里插入图片描述

放置一个文本组件

在这里插入图片描述

绑定变量为店铺名称

在这里插入图片描述

可以给文本组件的父容器设置一点内边距

在这里插入图片描述

接着在文本组件下边添加一条分割线

在这里插入图片描述

增加一个文本组件用来显示店铺的地址

在这里插入图片描述

在这里插入图片描述

再添加一条分割线

在这里插入图片描述

添加一个网格布局，并且设置列比例为9:3

在这里插入图片描述

第一个分栏插槽里添加，一个普通容器组件，里边添加两个文本组件

在这里插入图片描述

第一个文本内容修改为营业时间

在这里插入图片描述

第二个文本内容绑定为营业时间

在这里插入图片描述

在这里插入图片描述

第二个分栏插槽我们添加一个图片组件

在这里插入图片描述

图片的话从素材库里选择一个电话的图标

在这里插入图片描述

修改图片的宽和高都为100

在这里插入图片描述

我们想要的效果是点击电话的时候直接调用手机拨打电话的功能，为此需要创建一个自定义方法，点击菜单栏的低代码编辑器

在这里插入图片描述

低代码方法如下：

代码语言：javascript复制

export default function({event, data}) {
    let phone = $page.dataset.state.shopimages.records[0].lianxidianhua
   
    wx.makePhoneCall({
        phoneNumber: phone  // 在此处修改店家的联系方式即可
    })
}

在这里插入图片描述

自定义方法创建好后，给图片添加个点击事件，调用我们刚刚设置好的方法

在这里插入图片描述

分类导航

页面添加一个普通容器

在这里插入图片描述

设置普通容器的布局为弹性布局，主轴方向为水平，主轴对齐为横向平分，副轴对齐为中点对齐

在这里插入图片描述

里边添加一个普通容器，里边放置图片和文本组件

在这里插入图片描述

将普通容器的布局样式设置为弹性布局，主轴方向为垂直，主轴和副轴都是居中对齐

在这里插入图片描述

将图片的宽和高设置为150

在这里插入图片描述

给普通容器绑定循环变量

在这里插入图片描述

还需要创建一个变量，选择分类数据源，并且绑定变量

在这里插入图片描述

图片的话绑定为循环变量

在这里插入图片描述

文本内容也从循环变量里绑定

在这里插入图片描述

热销商品

先添加一个普通容器

在这里插入图片描述

添加一个标题组件

在这里插入图片描述

添加一个分割线组件

在这里插入图片描述

里边的商品展示设置可以参考分类导航，设置好后的效果

在这里插入图片描述

总结

本篇我们介绍了电商小程序首页的搭建方法，使用低代码进行可视化搭建还是非常快的，基本上就是通过组件的拖拽 变量的绑定即可实现想要的效果。

微搭低代码

0 人点赞