博客阅读顺序

1.准备工作  链接：(41条消息) 【小程序开发之微信登录】_隐隐池玉的博客-CSDN博客

2.实现调用微信登录  链接：(41条消息) 【小程序开发之微信登录】_隐隐池玉的博客-CSDN博客

3.制作首页（本篇博客）

系统框架图

我完成的小程序包括以下模块和功能，之后将一一介绍，但是有些功能的代码逻辑有些乱，或者使用的方法比较笨。

首页实现的效果

个人档案 查看报表按钮旁边的插图也是在阿里巴巴矢量图标库找的，轮播图是用美图秀秀的海报设计里面公众号首图的模板自己修改出来的，感觉更加清晰美观（也可以在百度上找轮播图广告的图片或者随便放几张长度较大的图片），食谱和文章的图片都是百度找的图片

购物商城首页的实现过程也大同小异啦

实现步骤

首页轮播图的数据、食谱的数据、文章的数据都是存放在数据库里面

步骤1  打开cms内容管理系统，创建内容模型 

首先填写内容模型的信息，我创建了三个内容模型，包括首页轮播图的内容模型、食谱数据表的内容模型、文章数据表的内容模型。

新建文章数据表的内容模型，如图。

我的食谱数据表的内容模型  其数据库名称为recipelist，我的首页轮播图内容模型 其数据库名称为banners。

步骤2 在内容模型里面添加字段

 我的首页轮播图数据表的内容模型，一共有三个字段。字段可以设置是否隐藏、是否必须，默认值、最小长度，根据自己的需要设置内容模型就好

  我的食谱数据表的内容模型，一共有三个字段，如下图所示。中文是字段的展示名称，英文是实际的数据库字段名，图片、富文本、单行字符串这些是字段的类型。这里就不一一展示字段的具体信息了。

 我的文章数据表的内容模型，一共有三个字段，如下图所示。不一一展示字段的具体信息了。

步骤3 在内容集合里新建记录

填写你的数据库记录的内容（下图是我填写好的数据）

 

 步骤4 编写代码，获取数据库的数据

下面直接展示我的首页页面的js文件的完整代码，注意：需要先创建page页面才能写函数进行跳转。

let nowstate=""
const app = getApp()

Page({
  data: {
  
  },
  tocreateprofile:function(){   //跳转到个人档案填写界面
   
        if(app.globalData.userInfo!=null){//判断用户是否登录（登录的用户userInfo不会为null）
          wx.navigateTo({
            url: '../createprofile/createprofile',
          })
        }else{
          wx.showToast({
            title: '您还没有登录噢',
            icon:'none'
          })
        }
 
   
     
    
    
  },
  tosearchmenu:function(){   //跳转到查找菜谱界面
  
        if(app.globalData.userInfo!=null){   //判断用户是否登录
          wx.navigateTo({
            url: '../searchmenu/searchmenu',
          })
        }else{
          wx.showToast({
            title: '您还没有登录噢',
            icon:'none'
          })
        }
   
    
  },
  torankinglist:function(){   //跳转到食物排行界面
 
        if(app.globalData.userInfo!=null){//判断用户是否登录
          wx.navigateTo({
            url: '../rankinglist/rankinglist',
          })
        }else{
          wx.showToast({
            title: '您还没有登录噢',
            icon:'none'
          })
        }
   


   
  },
  todailyreport:function(){   //跳转到日报周报界面
  
        if(app.globalData.userInfo!=null){//判断用户是否登录
          wx.navigateTo({
            url: '../report/report',
          })
        }else{
          wx.showToast({
            title: '您还没有登录噢',
            icon:'none'
          })
        }
  


  },

 
 

  onLoad() {
 var that=this;
 that.getbanners();//调用自定义函数获取轮播图数据
 that.getrecipe();//调用自定义函数获取食谱数据
   that.getarticle();调用自定义函数获取文章数据
  },

  
  getbanners(){//获取轮播图数据
    var that=this;
    wx.cloud.database().collection('banners').get()  //banners是我的数据表名称
    .then(res=>{
      console.log(res)
      that.setData({
        bannerlist:res.data
      })
    })
    },

    getrecipe(){//获取食谱
      var that=this;
      wx.cloud.database().collection('recipelist').aggregate().sample({ 
             //随机获取数据表里面的三条记录。
             //recipelist是我的数据表名称

        size: 3
      }).end()
      .then(res=>{
        console.log(res)
        that.setData({
          recipe:res.list
        })
     
      })
    
    },
    torecipedetail(event){//在首页显示的食谱图片和食谱标题组件处绑定了这个函数
       //点击了食谱图片或者食谱标题时会获取这个食谱的在数据库里面的id        
      console.log(event.currentTarget.dataset.id)
      let id=event.currentTarget.dataset.id
      wx.navigateTo({
        url: '/pages/recipedetail/recipedetail?id='+id,
  //携带食谱的id跳转到我创建的recipedetail页面（展示食谱详情）
      })
    },
    tobannerdetail(event){//在首页显示的轮播图图片组件处绑定了这个函数
       //点击了食谱图片或者食谱标题时会获取这个食谱的在数据库里面的id  
      console.log(event.currentTarget.dataset.id)
      let id=event.currentTarget.dataset.id
      wx.navigateTo({
        url: '/pages/bannerdetail/bannerdetail?id='+id,
     //携带轮播图的id跳转到我创建的bannerdetail页面（展示轮播图文章详情）
      })
    },
 getarticle(){//获取文章
      var that=this;
      wx.cloud.database().collection('article-list').aggregate().sample({
          //随机获取数据表里面的三条记录。
             //article-list是我的数据表名称
        size: 3
      }).end()
      .then(res=>{
        console.log(res)
        that.setData({
          articlelist:res.list,
        })
     
      })
    
    },
    toarticle(event){//在首页显示的文章图片和文章标题组件处绑定了这个函数
       //点击了文章图片或者文章标题时会获取这个文章的在数据库里面的id          
      console.log(event.currentTarget.dataset.id)
      let id=event.currentTarget.dataset.id
      wx.navigateTo({
        url: '/pages/article/article?id='+id,  
     //携带文章的id跳转到我创建的article页面（展示文章详情）
      })
    },
  
})

步骤4 编写WXML布局和WXSS样式

<!--轮播图-->
<view>

    <swiper autoplay indicator-dots interval="6000" circular class="swiper-wrap">
       <block wx:for="{{bannerlist}}" wx:key="_id">
       <swiper-item>
          <image bindtap="tobannerdetail" data-id="{{item._id}}" class="swiper-img" src="{{item.cover}}"> </image>
       </swiper-item>
       </block>
    </swiper>
</view>

<!--导航模块 -->
<view class="nav">
  <view class="nav-item"  bindtap="tocreateprofile">
    <view>
      <view class="nav-content" >个人档案</view>
  
    </view>
        
    <view>
      <image class="nav-img"  src="cloud://cloud1-2gyv1gezf9b6eeb9.636c-cloud1-2gyv1gezf9b6eeb9-1308464701/5.png"  style="height:100rpx;width:100rpx;"  alt=""></image>
    </view> 
  </view> 
  <view class="nav-item" bindtap="todailyreport">
    <view>
      <view  class="nav-content">查看报表</view>
     
    </view>
        
    <view>
      <image class="nav-img"  src="cloud://cloud1-2gyv1gezf9b6eeb9.636c-cloud1-2gyv1gezf9b6eeb9-1308464701/9.png"  style="height:100rpx;width:100rpx;"  alt=""></image>
    </view> 
  </view> 
  
</view>
<view class="nav">
<view class="nav-item"  bindtap="torankinglist">
    <view>
      <view  class="nav-content" >食物排行</view>
     
    </view>
        
    <view>
      <image class="nav-img"  src="cloud://cloud1-2gyv1gezf9b6eeb9.636c-cloud1-2gyv1gezf9b6eeb9-1308464701/6.png"  style="height:100rpx;width:100rpx;"  alt=""></image>
    </view> 
  </view> 
  <view class="nav-item" bindtap="tosearchmenu">
    <view>
      <view class="nav-content" >查找菜谱</view>
     
    </view>
        
    <view>
      <image class="nav-img" src="cloud://cloud1-2gyv1gezf9b6eeb9.636c-cloud1-2gyv1gezf9b6eeb9-1308464701/3.png" style="height:100rpx;width:100rpx;" alt=""></image>
    </view> 
  </view> 
</view>
<!--热门搜索 -->
	<!-- 猜你喜欢 -->
	<view class="hmly-like">
		<view class="hmly-bar-title">
			<view class="hmly-title-left" >食谱推荐</view>
			<view class="hmly-title-right" bindtap="getrecipe">换一换</view>
		</view>
                                
		<view class="hmly-like-item-box">
			<view 
				class="hmly-like-item" 
			
				
				wx:for="{{recipe}}"
				wx:key="index"
			>
				<view class="hmly-like-img">
					<image 	bindtap="torecipedetail"  class="hmly-like-item-icon" data-id="{{item._id}}" src="{{item.recipecover}}" mode="widthFix"></image>
					<view class="hmly-like-cover">
						
					</view>
				</view>
				<view data-id="{{item._id}}"bindtap="torecipedetail"  class="hmly-like-text">{{item.recipename}}</view>
			</view>
		</view>
	</view>

<!--分割线 -->
<view class="hr">
</view>
<!-- 列表  -->
<view class="weekText">-文章-</view>






<view  class="content-box" >
   <view class="box-top">
     
       <text class="content-box-title">今天也要好好吃饭</text>
       <view class="content-box-change" bindtap="getarticle">换一换</view>
    </view>
         <view class="articlebox" wx:for="{{articlelist}}" wx:key="_id">
            <image class="article-img" src="{{item.cover}}"></image>   
            <view class="article-center">
               <view>{{item.title}}</view>
               
         
             </view>      
            <view class="article-right">
               <button data-id="{{item._id}}"bindtap="toarticle" plain="true" size="mini"><text class="article-btu-txt">进入</text></button>
            </view>

           </view>


        </view>

<view class="indexbottom-tip">

<view class="indexbottom-cont">休息一会吧，已经到底啦</view>
</view>

wxss的完整代码如下

/* pages/my/my.wxss */
/* 轮播图*/
.swiper-img{
 width: 750rpx;
 height: 400rpx;
 border-radius: 30rpx;
}
.swiper-wrap{
  height: 400rpx;
}
/* 导航栏*/
.nav{
  display: flex;
  flex-direction: row;
  text-align: center;
 margin: 20rpx 15rpx 20rpx 15rpx;
}
.nav-item{
  display: flex;
  flex-direction: row;
  width: 360rpx;
  height: 120rpx;

  margin:0 5rpx 0 5rpx;
  font-size: 40rpx;
  font-weight: bold;
  background-color: #faead3;
  border-radius: 10rpx;
}
.nav-img{
  padding: 15rpx  40rpx 15rpx 40rpx;
}
.nav-content{
  padding: 0 30rpx;
}
/*食谱推荐的样式*/

.hmly-like {
	width: 95%;
	margin: 0rpx auto;
	margin-top: 20rpx;
}

.hmly-like-item-box {
	width: 100%;
	display: flex;
	justify-content: space-between;
	overflow: hidden;
}
.hmly-bar-title{
  display: flex;
  flex-direction: row;
  margin-bottom: 8rpx;
  margin-left:5rpx ;
}
.hmly-like-item {
	width: 210rpx;
	height: 260rpx;
	border-radius: 15rpx;
}

.hmly-like-img {
	width: 210rpx;
	height: 210rpx;
	border-radius: 15rpx;
	position: relative;
}

.hmly-like-item-icon {
	width: 100%;
	height: 100%;
	border-radius: 15rpx;
}

.hmly-like-text {
	font-size: 28rpx;
	color: #333;
	margin-top: 10rpx;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	/*行数n*/
	-webkit-box-orient: vertical;
	overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.hmly-like-cover {
	width: 190rpx;
	height: 40rpx;
	
	/* opacity: 0.3; */
	position: absolute;
	bottom: 0rpx;
	color: #fff;
	font-size: 25rpx;
	padding: 5rpx 10rpx;
	border-bottom-left-radius: 15rpx;
	border-bottom-right-radius: 15rpx;
}
.hmly-title-left{
font-size: larger;
font-weight: bolder;
}
.hmly-title-right{
padding-left: 420rpx;
}
/*分割线*/
.hr{
  height: 15rpx;
  background-color: #ccc;
  margin:10rpx 0;
  opacity: 0.3;
}
.weekText{
  text-align: center;
  margin:30rpx 0;
}


/*首页底部提示的样式*/

.indexbottom-tip{
  align-items: center;
  justify-content: center;
  margin-top: 10rpx;
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: row;
}
.indexbottom-cont{
  color: #ea9518;
}
/*文章部分的样式*/
.content-box-change{
  margin-left: 250rpx;
  margin-top: 20rpx;
}
 
  .content-box-title{
    font-size:larger;
    font-weight: bold;
    margin-top: 10rpx;
    margin-bottom: 10rpx;
  }
  .content-box{
    background-color: #faead3;
    width: 710rpx;
    height: 620rpx;
    margin-left:20rpx;
    margin-right: 20rpx;
    border-radius: 20rpx;
    }

    .box-top{
      display: flex;
      flex-direction: row;
      margin-left: 20rpx;
    }
  
    .articlebox{ /*一个文章盒子的样式 包括方形图片 标题 描述  点击进入的按钮*/
    display: flex;
    flex-direction: row;
    margin-left: 20rpx;
    margin-top: 10rpx;
    margin-bottom: 20rpx;
    align-items: center;

    }
    .article-img{/*一个文章盒子中方形图片的样式 */
     width: 150rpx;
     height: 150rpx;
     margin-right: 20rpx;
    }
    .article-center{/*一个文章盒子中间文字部分的样式 是竖向的*/
    display: flex;
    flex-direction: column;
    margin-right: 20rpx;
    width: 300rpx;
    }
    .article-right{/*一个文章盒子中间文字部分的样式 是竖向的*/
      display: flex;
      flex-direction: column;
     
      }
      .article-btu-txt{
     color: #ea9518;
      }
   

json文件的代码

{
  "usingComponents": {},
  "navigationBarTitleText": "首页",
  "navigationBarBackgroundColor": "#faead3"
}

TIP：

1  可以找一些别人公开的小程序项目，复制一些好看的样式，修改一下用到自己的小程序里面或者是跟着视频一点点敲代码也是可以的，附上一些我参考过的项目和跟着敲过代码的视频

(42条消息) 推荐几个微信小程序开源项目_xiangzhihong8的博客-CSDN博客_微信小程序开源项目

一天搞定微信小程序开发-JavaScript项目实战教学-新手必学零基础项目实战（小程序框架、小程序组件、小程序API)_哔哩哔哩_bilibili

我个人参考的是里面的仿喜马拉雅的小程序，这个小程序只使用了微信原生的组件，也没有使用什么其他的复杂的框架之类的，比较适合初学者吧。

2  在制作小程序的过程中我也尝试过使用第三方组件库，当时尝试了Vant组件库，但是出现了一个问题（使用这些组件进行编译时控制台出现很多warnings    提示  [Component] slot ““ is not found.） 我暂时找不到解决办法，所以项目里面都只使用微信原生的组件。想省事并且让页面快速美观起来的朋友可以试一试Vant组件库或者其他的组件库。附上Vant的官方网页和使用教程

介绍 - Vant Weapp (youzan.github.io)

 (42条消息) 微信小程序组件库 iView Weapp使用教程_前端王小婷的博客-CSDN博客_iview 微信

2  可以使用美图秀秀的海报设计里面的模板去制作竖屏海报、电商主图等等，会比百度的图片更清晰，也更符合自己小程序的需求（比如我的小程序里面的轮播图是用美图秀秀里面公众号首图的模板自己修改出来的）

3  在一开始开发小程序的时候可以选择好小程序的基调颜色，统一基调颜色会让小程序看起来更加和谐，比如我选择的是#faead3（从米兰迪色系里面选的一个偏浅棕黄的颜色），我的按钮、提示文字使用橙色，商城标价使用红色。用浅色作为底色去配深色。

莫兰迪色系博客 链接：(42条消息) 莫兰迪色系表_白鳯的博客-CSDN博客_莫兰迪色系rgb数值

传统色 渐变色网页  链接：中国色彩-中国传统颜色配色方案-禾坡网 (hepou.com)