微信小程序云开发项目实战之商城开发日记 02

hello，今天是第二天了，正式开始编写商城的前端代码。

今天的任务是完成商城首页的前端代码编写，任务还是比较重的哦。

我们进行的第一步操作就是进入编辑器，点开文件目录中的pages下的index文件夹，进入index.wxml。

在这里说一下在微信小程序中一个页面的文件组成吧。
其实在昨天我们注册页面的时候，其实已经注意到了，每一个被注册的页面，都会生成四个文件，分别是.js，.json，.wxml，.wxss。
首先这个wxml文件就是编写页面的结构，和web前端中的html是一模一样的作用，wxss是编写页面的样式，也就是web前端中的css，js是编写处理页面的业务逻辑。json文件是引入一些框架和组件还有自定义顶部底部导航栏时需要用到，如果我们是用纯原生并且不自定义组件的话，这个文件基本是用不到的。

下面我们说一下首页的布局思路：

由上到下的话，依次是搜索框、轮播图、商品分类入口、热门商品展示。

在这里先给大家介绍一个非常非常好用的布局方式 flex布局,我们在进行页面布局的时候，需要解决的问题其实就是横向排列、纵向排列、水平居中、垂直居中，flex布局可以完美解决我们的布局需求，在前端的行内有这么一句话，flex一把梭，几乎所有的页面布局都可以用flex来完成。我之前已经在我的博客里发过flex布局的讲解教程了，有需要的同学可以先去看一下(https://blog.csdn.net/m0_46171043/article/details/107462751)。

先来完成搜索框区域

直接上代码

<view class="search">

 <input placeholder="请输入要搜索的内容"/>

 <image src="../../images/search.png"></image>

</view>

.search {

 display: flex;

 flex-direction: row;

 background-color: green;

 width: 100%;

 padding: 20rpx 30rpx;

 justify-content: center;

 align-items: center;

}

.search > input {

 border: 1rpx solid black;

 background-color: #fff;

 text-align: center;

 width: 70%;

 height: 60rpx;

}

.search > image {

 width: 60rpx;

 height: 60rpx;

 margin-left: 20rpx;

}

效果：

大部分的商城都是这样做的，当然大家也可以根据自己的UI设计完成代码的编写。最主要的核心就是对flex布局的掌握。

接下来完成轮播图

微信小程序为我们封装好了轮播图的组件swiper。

先上代码吧

<swiper class="banner" indicator-dots="true" autoplay="true" interval="2000" style="height:{{height}}px;">

 <swiper-item wx:for="{{banner}}" wx:key="index">

  <image src="{{item}}" mode="widthFix" style="width:100%;" bindload="setContainerHeight"></image>

 </swiper-item>

</swiper>

data: {

  banner:['../../images/banner.jpg','../../images/banner.jpg','../../images/banner.jpg'],

  height:0

 },

 setContainerHeight:function(e){

  //图片的原始宽度

  var imgWidth=e.detail.width;

  //图片的原始高度

  var imgHeight=e.detail.height;

  //同步获取设备宽度

  var sysInfo=wx.getSystemInfoSync();

  //获取屏幕的高度

  var screenWidth=sysInfo.screenWidth;

  //获取屏幕和原图的比例

  var scale=screenWidth/imgWidth;

  //设置容器的高度

  this.setData({

   height:imgHeight*scale

  })

 },

swiper的子组件swiper-item我们进行了wx:for的循环渲染，减少代码量。

还有一个重要的操作就是对image组件我们添加了bindload事件，大家可以试着把这个bindload删掉，然后把swiper的style也删掉，会出现什么状态。
image会无法撑满swiper-item，面板指示点会跑到图片下面，显然不符合我们的需求。bindload就是实时获取一下图片的参数，然后赋给swiper，及时更改swiper的高，这样才能让image完全撑起swiper的内容。

这里的轮播图图片我就暂时随便找的，实际肯定是会放一些广告或者宣传商品的内容。

看一下效果：

这里指示点的颜色其实和图片不太配，大家可以根据自己的图片更改一下指示点的颜色，文档里面写的很清楚。

接下来，就是一个宫格图，根据商品的分类提供不同的入口。完全由flex布局完成。

代码部分：

<view class="container">

 <view class="body" wx:for="{{array}}" wx:key="index">

  <image src="{{item.img}}"></image>

  <text>{{item.name}}</text>

 </view>

</view>

.container {

 display: flex;

 flex-direction: row;

 flex-wrap: wrap;

 background-color: white;

 padding-top: 20rpx;

 padding-bottom: 20rpx;

}

.body {

 display: flex;

 flex-direction: column;

 width: 20%;

 padding-bottom: 10rpx;

}

.body > text {

 text-align: center;

 font-size: 24rpx;

}

.body > image { 

 width: 80rpx;

 height: 80rpx;

 margin: 0 auto;

}

 data: {
  array:[{img:'../../images/one.png',name:'水果'},

  {img:'../../images/two.png',name:'蔬菜'},

 {img:'../../images/three.png',name:'肉禽蛋品'},

 {img:'../../images/four.png',name:'海鲜水产'},

 {img:'../../images/five.png',name:'粮油调味'},

 {img:'../../images/six.png',name:'熟食卤味'},

 {img:'../../images/seven.png',name:'冰品面点'},

 {img:'../../images/eight.png',name:'牛奶面包'},

 {img:'../../images/nine.png',name:'酒水冷饮'},

 {img:'../../images/ten.png',name:'休闲零食'}],

 },

效果：

图片都是我在网上找的，大家可以根据自己的情况，把对应的图片放到images文件夹即可，还是那句话，图片的名字尽量不要是中文。

讲一下代码思路，首先，我们可以很明显的感觉到，这10个分类的局部布局是一摸一样的，所以我们用wx：for来渲染这10个分类，减少代码量，相应的wx：for渲染的对象要提前在js的data里定义好，之前的轮播图只需要一个纯数组就可以，但是这次渲染的对象，有图片和名字两个属性，所以我们用一个对象数组存放此次数据。WXSS部分就是一个flex布局，总体的container要横向排列，然后允许换行，在container内部的body要纵向排列，然后再调一下padding、margin、居中即可。

这块代码最重要的就是对flex布局的应用。

最后我们要展示的是热门商品。

其实也没有难度，wx：for+flex布局

热门商品推荐 >

</view>

<view class="tuijian_1">

 <view class="product" wx:for="{{array_tuijian}}" wx:key="index">

  <image src="{{item.img_src}}"></image>

  <text class="name">{{item.name}}</text>

  <text class="price">￥{{item.price}}</text>

  <text class="add">+购物车</text>

 </view>

</view>

.tuijian {

 width: 100%;

 padding: 30rpx 0;

 margin-top: 20rpx;

 background-color: white;

 color: #CA954E;

 text-align: center;

}

.tuijian_1 {

 display: flex;

 flex-direction: row;

 text-align: center;

 background-color: white;

 margin-top: 5rpx;

}

.product {

 margin-top: 20rpx;

 display: flex;

 flex-direction: column;

 width: 33%;

 align-items: center;

}

.product > image {

 width: 120rpx;

 height: 120rpx;

 margin:0 auto;

}

.name {

 margin-top: 10rpx;

}

.price {

 margin-top: 10rpx;

 color: rgb(225, 150, 31);

}

.add {

 border-radius: 30rpx;

 padding: 5rpx;

 border: 1rpx solid black;

 background-color: green;

 color: white;

 width: 180rpx;

 margin-top: 10rpx;

}

data: {

 array_tuijian:[

  {img_src:'../../images/apple.png',name:'苹果',price:'6'},

  {img_src:'../../images/egg.png',name:'鸡蛋',price:'10'},

  {img_src:'../../images/watermelon.png',name:'西瓜',price:'4'},

 ]

 },

WXSS的编写不唯一，其实就是调来调去，主要思想是运用flex布局，然后各种margin、padding。如果有Web前端的CSS基础的同学，做起来还是比较容易的。

看下现在的效果：

基本完成了首页的前端页面编写。这些logo图片轮播图都是我随便找的，所以看起来会比较丑，如果大家有素材的话，可以贴上去，然后改一下局部的配色就好，主要的格式是没问题的。

今天的内容就到这里了，代码可以自用自取。

点赞、关注、收藏都是对作者莫大的鼓励，谢谢！

有任何问题可以联系QQ：505417246

零基础入门微信小程序云开发QQ群：1073011570

关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs等实战学习资料