1. 新建项目

点击+号

进入创建场景，选择对应的选项和自己的AppID

为了不见黄色警告热重载，可以选择关闭。

在project.config.json项目的配置文件的setting配置添加如下：

"checkSiteMap":false

2. 配置首页

2.1 新建项目与梳理项目结构

点击app.json小程序项目的全局配置文件的pages配置中新建三个页面的目录，同时删掉默认创建的index与logs路径，记得保存。

"pages/home/home",
"pages/message/message",
"pages/contact/contact"

2.2 配置导航栏

在app.json文件的window全局配置中修改导航栏名称的"navigationBarTitleText": "Weixin"为本地生活。

"navigationBarTitleText": "本地生活"

修改导航栏的默认背景颜色#fff为#2b4b6b

"navigationBarBackgroundColor": "#2b4b6b",

改变文本颜色"navigationBarTextStyle":"black"由黑变白（也就这两种颜色选择）

"navigationBarTextStyle":"white"

效果如下：

2.3 配置\(tabBar\)

由于我嫌找阿里图标太麻烦了，所以我选择直接拿别人的资料。

搜索黑马程序员公众号->黑马资源->2022资料下载->点击Web前端->找列表中的手把手快速带你开发微信小程序->找到微信小程序基础目录-领取资料中的day02。

链接：https://pan.baidu.com/s/1-2KMJ_lSHMI8JnzqUOy49w
提取码：p1op

把image文件夹放入到自己创建的项目主目录中。

在app.json文件中配置tabBar项，修改三个页面对应的选中与未选中的图标，设置好各个的导航路径，最终配置如下。

  "tabBar": {
      "list": [{
          "pagePath": "pages/home/home",
          "text": "首页",
          "iconPath": "/images/tabs/home.png",
          "selectedIconPath": "/images/tabs/home-active.png"
      },{
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath": "/images/tabs/message.png",
        "selectedIconPath": "/images/tabs/message-active.png"
      },{
        "pagePath": "pages/contact/contact",
        "text": "联系我",
        "iconPath": "/images/tabs/contact.png",
        "selectedIconPath": "/images/tabs/contact-active.png"
      }
    ]
  },

最终效果如下：

2.4 实现轮播图

2.4.1 获取数据

进入微信公众平台，登录后点击开发的开发管理

选择开发设置

选择服务器域名设置

在我们的request接口上添加黑马程序员提供的接口https://applet-base-api-t.itheima.net;

现在就可以看到微信开发者工具 右上侧详情的项目配置的域名信息了

获取Get接口为：https://applet-base-api-t.itheima.net/slides

进入pages/home/home.js文件，在data中定义数据数组swiperList

接着在onLoad函数下新增一个获取轮播图数据的方法

    //获取轮播图数据的方法
    getSwiperList(){
        wx.request({
          url: 'https://applet-base-api-t.itheima.net/slides',
          method:'GET',
          //定义一个名为res的形参，获取服务器返回的结果
          success:(res)=>{
            console.log(res);
          }
        })
    },

而我们清楚，当页面加载完成后才能显示出轮播图的结果，那么就需要修改onLoad函数对我们定义的上述方法进行加载。

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.getSwiperList()
    },

可以看到控制台显示的后台信息为对象。

那么当我们成功调用函数时，也应该考虑把相应的数据加入到之前设置的swiperList数组中，通过在setdata中设定key为该数组，并对应的value为之前控制台得到的res对象中的data数组数据。

所以修改onLoad函数如下：

    //获取轮播图数据的方法
    getSwiperList(){
        wx.request({
          url: 'https://applet-base-api-t.itheima.net/slides',
          method:'GET',
          //定义一个名为res的形参，获取服务器返回的结果
          success:(res)=>{
            console.log(res);
            this.setData({
                swiperList:res.data
            })
          }
        })
    },

接着我们在调试器下面切换到AppData中，可以看到之前默认swiperList为空数组，也即没有存放数据。

后面保存后就有对应的数据，可以看到是相应的对象，有轮播图的图片链接。

2.4.2 渲染图层

利用微信自带的swiper轮播图组件中间镶嵌swiper-item组件，结合wx:for遍历与微信mustache语法（不就是插值表达式嘛？），另外要注意设置wx:key对应数据的id（这确定不是Vue？）。

之后我们要在swiper-item里加入image组件，src为动态地址，所以还是要是使用mustache语法，由于用了wx:for可以获取item项，而我们之前可以知道之前swiperList存放的数据对象就有image键值对，因此可以写item.image。

pages/home/home.wxml