【小程序开发之制作首页】

博客阅读顺序

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: '您还没