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

Posted 2022-03-02 低代码布道师

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了电商小程序实战教程-首页的创建相关的知识，希望对你有一定的参考价值。

电商小程序实战教程
第一章总体介绍
 第二章创建数据源
 第三章创建管理后台

前言

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

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

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

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

应用创建

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

输入应用的名称

点击空白页，创建页面

首页开发

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

轮播图

先往页面添加普通容器

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

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

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

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

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

选择好变量

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

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

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

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

店铺信息简介

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

里边再增加一个普通容器

放置一个文本组件

绑定变量为店铺名称

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

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

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

再添加一条分割线

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

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

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

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

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

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

修改图片的宽和高都为100

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

低代码方法如下：

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

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

分类导航

页面添加一个普通容器

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

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

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

将图片的宽和高设置为150

给普通容器绑定循环变量

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

图片的话绑定为循环变量

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