小程序模仿商城之（首页）

前言

最近因为要参加一个比赛要用到小程序，所以就在网上找了个视频开始了学习小程序之旅。前几天通过看视频、看官方文档对基础的知识有了大概的掌握，又跟着视频写了一个小项目。但总觉得自己哪里掌握的不够，所以打算自己不看视频，再将其写一遍

效果图

在这里插入图片描述

具体思路

首先要出创建相关的文件夹
在这里插入图片描述

底部的相关设置

底部的相关设置比较简单，只需要在 app.json 文件里设置即可，有几个 tabbar 栏就添加几个，不过要注意的是最少添加两个，最多添加五个

"tabBar": {
  "color": "#cccccc",
  "selectedColor": "#ff5777",
  "backgroundColor": "#ffffff",
  "borderStyle": "black",
  "list": [
    {
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "assets/tabbar/home.png",
      "selectedIconPath": "assets/tabbar/home_active.png"
    },
    {
      "pagePath": "pages/category/index",
      "text": "分类",
      "iconPath": "assets/tabbar/category.png",
      "selectedIconPath": "assets/tabbar/category_active.png"
    },
    {
      "pagePath": "pages/cart/index",
      "text": "购物车",
      "iconPath": "assets/tabbar/cart.png",
      "selectedIconPath": "assets/tabbar/cart_active.png"
    },
    {
      "pagePath": "pages/user/index",
      "text": "我的",
      "iconPath": "assets/tabbar/profile.png",
      "selectedIconPath": "assets/tabbar/profile_active.png"
    }
  ]
}

顶部的相关配置

顶部的相关配置同样在 app.json 文件里，不过需要注意的是在 app.json 文件里进行配置是全局的配置，配置完后，每个页面都会出现同样的效果，如果需要给不同的页面进行不同的配置，那么需要对每一个页面的 xxx.json 文件进行不同的配置，也就是局部配置

另外还有，进行全局配置时，所有的配置都需要写在 window 里面，而局部配置则不需要
在这里插入图片描述

网络请求的处理

页面上所有图片、文字的展示几乎都是渲染的请求的数据，所以应该创建一个独立的文件夹来负责对数据的请求，这样看起来代码的逻辑性清晰，也利于修改

网络请求是异步的，所以使用 promise 对网络请求函数进行了一个简单的封装

export default function(options) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: options.url,
      method: options.method || 'get',
      data: options.data || {},
      success: resolve,
      fail: reject
    })
  })
}

搜索框

搜索框的制作比较简单，因为每一个页面几乎都会用到搜索框，所以将搜索框单独抽离成一个组件，使用时直接引用即可

组件的引用
在这里插入图片描述
使用

<search></search>

轮播图

小程序的轮播图制作可谓是超级简单，不过还需要注意一下几点
1.对图片的宽度进行设置
2.对 swiper 进行设置，宽度和高度都设置为图片本身的高度和宽度
设置如下在这里插入图片描述
进行以上的设置是为了，是图片不变形的显示出来，并且适应各个机型

楼层

这一部分的设置主要是对数据如何进行遍历和如何对图片进行样式的设置

首先是遍历，我一般遍历时，是对 block 进行遍历而不是对 view 进行遍历，一方面是因为如果对 view 进行遍历的同时，还需要添加许多属性，看着很不舒服，另外一个原因：view 是一个组件，会在页面上做渲染；而 block 不是一个组件，它仅仅是一个包装元素，只接受控制属性，不会在页面中做任何渲染
在这里插入图片描述