黑马程序员——微信小程序本地生活案例

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 配置

把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

效果如下：

但是有点不太好看， 所以我们可以利用wxss（相当于微信的CSS独立样式文件）进行调整。

通过类选择器限定高度为350rpx,swiper 的 子类 image 强制高宽拓屏设100%。

swiper {
height: 350rpx;
}

swiper image {
width:100%;
height:100%;
}
然后为了让轮播图可以衔接的同时，可以显示小点表示位置变化，在home.wxml中的swiper修改成如下内容

最终效果如下：

2.5 实现九宫格
2.5.1 获取数据
获取Get接口为：https://applet-base-api-t.itheima.net/categories
实现以下的步骤跟实现轮播图的步骤一致，所以接下来只写代码部分。

pages/home/home.js：

/**
 * 页面的初始数据
 */
data: {
    //存放轮播图数据的数组
    swiperList:[],
    //存放九宫格数据的数组
    gridList:[],
},

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

//获取九宫格数据的方法
getGridList() {
    wx.request({
        url:'https://applet-base-api-t.itheima.net/categories',
        method : 'GET',
        success:(res)=>{
            console.log(res);
            this.setData({
                gridList : res.data
            })
          }
    })
},

2.5.2 渲染页面
要设置九宫格，就需要在外层容器里循环加入子容器，子容器之间限定对应的长宽并添加我们已有的九宫格数据的图标与文本，最后flex布局。

pages/home/home.wxml：

{{item.name}} pages/home/home.wxss：

.grid-list{
display:flex;
/* 一行存不下，允许换行 /
flex-wrap:wrap;
/ 在item的基础上增加外部边框 */
border-left: 1rpx solid #efefef;
border-top: px solid #efefef;
}

.grid-item{
width:33.33%;
height:200rpx;
/* 居中对齐，并保证组合为纵向布局 /
display: flex;
flex-direction: column;
/ 横向和纵向的居中 /
align-items: center;
justify-content: center;
/ 增加右侧和底部边框 /
border-right: 1rpx solid #efefef;
border-bottom: 1rpx solid #efefef;
/ 为了不让边框挤压子容器图标，
修改默认的content-box */
box-sizing: border-box;
}

.grid-item image{
/* 图片太大了 */
width:60rpx;
height:60rpx;
}

.grid-item text{
font-size:24rpx;
/* 文本与图片之间有距离 */
margin-top: 10rpx;
}
最终效果如下：

2.6 实现底部图片布局
pages/home/home.wxml

pages/home/home.wxss：

.img-box{
display: flex;
/* 图片上下、左右有间距 /
padding:20rpx 10rpx;
/ 平分占满的img-box所留剩下右侧的空白区域 */
justify-content: space-around;
}

.img-box image{
width:45%;
}
最终效果如下：

3. 模板与配置的总结
   3.1 总结图

3.2 注意事项
wx:if与hidden的区别就像v-if与v-show一样，前者是动态删除链接，后者只是样式的隐藏，如果要节省资源和经常使用可以用hidden

rpx在使用iphone6的模拟时进行换算更加方便，因为rpx就是把手机屏幕划分成750等份，即750rpx=375px->2rpx=1px