我在b站上看的项目是微信小程序大作业_全套项目实例（含源码）_哔哩哔哩_bilibili

有现成的代码路径为安心食疗: 分享一个经典的微信小程序项目，安心食疗，里面的 接口都可用，需要的小伙伴快快拿去吧~ (gitee.com)

一，创造底部页面

首页，我们要实现对底部首页，食物馆，私人订制，我的。四个图标和页面的创建

1.1，在app.json中配置

"sitemapLocation": "sitemap.json",

  "tabBar": {

    "list": [

      {

        "pagePath": "pages/index/index",

        "text": "首页",

        "iconPath": "/pages/tabar_pic/R-C.png",

        "selectedIconPath": "/pages/tabar_pic/z6GeT7Bxs0.jpg"

      },

      {

        "pagePath": "pages/foodcare/foodcare",

        "text": "食物馆",

        "iconPath": "/pages/tabar_pic/R.png",

        "selectedIconPath": "/pages/tabar_pic/12.png"

      },

      {

        "pagePath":"pages/myCart/myCart",

        "text": "私人订制",

        "iconPath": "/pages/tabar_pic/1.png",

        "selectedIconPath": "/pages/tabar_pic/3.png"

      },

      {

        "pagePath": "pages/mine/mine",

        "text": "我的",

        "iconPath": "/pages/tabar_pic/45.png",

        "selectedIconPath": "/pages/tabar_pic/65b.png"

      }

在这个与"sitemapLocation":同级的下面创建tabBar.然后创建。注意，这个icon和selectediconpath的图片路径容易写错。可以用../../或直接把存储图片的tabar_pic/文件夹放到pages目录下。还有图片大小不能够超过40kb，图片格式也有限制

二创建首页的页面

2.1创建swiper轮播图的效果，它会自动播放图片，并且数字2/5会实时变化

那么如何实现。

首先，创造一个swiper容器，接得思考有几种办法能够实现轮播的效果

方法一，直接使用5个swiper-item，简单粗暴

<swiper-item>

    <image src="{{item.image}}" mode="scaleToFill"/>

    <view class="banner-info">{{item.title}}</view>

    </swiper-item>

方法2，使用wx:for功能，对一个数组内图片路径的遍历。高级，有效

 <swiper class="banner"  indicator-color="black" indicator-active-color="white" circular="true"  bindchange="swiperchange" autoplay >

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

    <image src="{{item.image}}" mode="scaleToFill"/>

    <view class="banner-info">{{item.title}}</view>

    </swiper-item>

  </swiper>

我们要学习wx:for的使用方法

问题

在使用swiper把图片加载上去的时候，图片的横向宽度不足，留有 空距。解决办法

<image src="{{item.image}}" mode="scaleToFill"/>mode使用scaleToFill然后再css中样式中调整

image{

  width: 100%;

  height: 125%;

}

顺便一提

在css中常见几种布局display要掌握

如.userinfo {

  display: flex;

  flex-direction: column;

  align-items: center;

  color: #aaa;

}

flex为弹性布局，功能最为强大。把userinfo属性盒子定义为弹性布局，在这个盒子里面的子元素方向为column即列对其。align-items center元素处于盒子横向居中

css还能实现蒙版的效果

把两个vier标签的位置叠加，定义不同的背景色就行了。

2.2 swiper中数据的获取来源

数据的获取来自于页面.js中的

page中的data,你可以定义不同的名字代表要获取的不同的数据。我在这里定义了bannerArr为一个数组。

在onload事件中我们引入了app.js中的函数http.关于onload是小程序生命周期函数里面的一部分。只执行一次

我们的app.http(这个函数）就是我们定义的请求函数

它做了什么呢  

http(url,that,arr){

    // var that=this;

    wx.request({

      url:url,

      success:(res)=>{

        wx.showLoading({

          title:"加载完毕",

          duration:500

        })

        if (res.data.status==200 ) {

          that.setData({[arr]:res.data.data})   

          console.log(res.data);    

          // console.log(res.data,'89')

      }

      else if ( typeof res.data.status === 'undefined'){

        that.setData({[arr]:res.data[0]})  

        console.log(res.data)

        wx.setNavigationBarTitle({

          title:res.data[0].title

        })

      }

    else {console.log("错 了");

      console.log(url)

      console.log(res.data);

      } 

      },

      complete(){

        wx.hideLoading()

        wx.hideNavigationBarLoading()

      }

    })

  },

传入了三个参数url,that,arr。使用了wx.request请求数据。使用了   that.setData({[arr]:res.data.data})   将从请求的url中得到的数据赋值给arr这个数组。关于[arr]因为这是数组，所以需要[]。

在后面的页面中我们同样要用到wx.request来进行请求，只不过请求的url和要赋值给的键不同，这里的是barlist

我们的bannerArr现在就是一个拥有5条数据的数组了。接的我们才能够用wx:for遍历使用。

在使用js中定义的数据都要用{{}}引用。wx:for是{{item.}}这个item只是默认的使用名字，还是能进行修改

绑定事件

回到swiper  <swiper class="banner"  indicator-color="black" indicator-active-color="white" circular="true"  bindchange="swiperchange" autoplay >

我们注意到这里有关bindchange。这个就是绑定的事件，每个标签都有自己的绑定事件如bindtap,这里的swiper的绑定事件是监控item变化后，即滑到了下一张后调用函数swiperchange。这个函数需要在js中定义

 swiperchange(e){

    this.setData({

      currrentIdex:e.detail.current

    })}。

注意这个e，它起到传递参数的作用。可以data-id={{}}然后你点击事件时，这个id就会到e中。现在我们把e.detail.current赋值给了 currrentIdex，就知道了现在是第几张图片了。那么获取图片的总数能从列表.length//  <view class="biaodi">{{currrentIdex+1}}/{{bannerArr.length}}</view>

这块获取了

2.2 实现

这个的实现主要是用image标签和css样式的使用

这里的position有相对定位和绝对定位需要注意

.info{

  padding: 5rpx;

  position: relative;

  top: 40rpx;

  right: 10%;

  // border:1rpx red solid;

  width: 150rpx;

  height:150rpx;

}

.info text{

  text-align: center;

  position: relative;

  left: 30rpx;

}

2.3实现如图的布局

这个我们同样需要请求数据，用wx:for

如图wxml代码

我们在onload中再一次使用了    app.http(host+indexUrl,this,'listArr');

  <view class="list" wx:for="{{listArr}}" wx:key="index" bind:tap="goodtail" data-id="{{item.id}}">

    <!-- 点击list列表进入对应的详细页 -->

    <!-- 不过也能够通过绑定点击的事件触发 -->

    <!-- <navigator url="../iindexdetail/indexdetail?id={{item.id}}"> 然后在这里用data-id="{{item[id]}}把参数传递给点击的事件，改事件的参数同样是通过e来传递"-->

    <view class="title"> {{item.title}}</view>

    <view class="wrapper">

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

     <view class="info"> 

      <view class="desc">{{item.detail}}</view>

      <view class="readnum"><text>{{item.readNum}}阅读</text> </view>

     </view>

     </view>

    <!-- </navigator> -->

  </view>

其实在js中我们同样也能定义函数，使用函数this.http，将http函数写作页面的js中。

这里的html中我们外面使用了一个view容器包裹小容器，然后用wx:for遍历数据，把数据放到小容器中

在这里同样使用了事件绑定，当点击这个view包括的内容时，页面跳转到详细页

bind:tap="goodtail" data-id="{{item.id}}"这里传递了产生id来给函数goodtail

下面我们来看看这个函数做了什么

它获取了这个e.currentTarget.dataset.id}。跳转了页面

 goodtail(e){

    console.log(e)

    wx.navigateTo(

      {url:"../iindexdetail/indexdetail?id="+e.currentTarget.dataset.id}

    )

  },

关于跳转页面有几种，可自行查阅。这里的页面跳转到了../iindexdetail/indexdetail这个路径。

在这里?id是传递参数给跳转的页面，

详细页面

我们可以看到在onload中传递了一个参数opnion。这个名字同样是可以随便定义的。然后打印了传递过来的id.然后又把这个当作参数另一个url所需要的进入http函数。得到信息后返回给html页面

得到的详细页面数据

注意这里的标题栏发生了改变。如何回事呢？

在http这个函数内部我们是调用了wx.navigatiombartitle这个wx自带函数

app.js中的http函数

这就完成了home页面的构建