最终样式：
1、在微信小程序管理页面增加第三方调用接口
注意事项：必须是htts安全协议的接口
配置完成后在微信开发工具中可以看到配置的第三方接口URL
2、项目目录文件结构
3、程序代码
app.json
{"pages": ["pages/home/home","pages/message/message","pages/contact/contact"],"window": {"backgroundTextStyle": "light","navigationBarTextStyle": "white","navigationBarTitleText": "本地生活","navigationBarBackgroundColor": "#2b4b6b"},"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"}]},"style": "v2","sitemapLocation": "sitemap.json"
}home.js
// pages/home/home.js
Page({/*** 页面的初始数据*/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) => {this.setData({gridList: res.data})}})},getSwiperList(){wx.request({url: 'https://applet-base-api-t.itheima.net/slides',method: 'GET',success:(res) => {this.setData({swiperList:res.data})}})},
})home.wxml
<!--pages/home/home.wxml-->
<swiper indicator-dots circular><swiper-item wx:for="{{swiperList}}" wx:key="id"><image src="{{item.image}}"></image></swiper-item>
</swiper>
<!--九宫格区域-->
<view class="grid-list"><view class="grid-item" wx:for="{{gridList}}" wx:key="id"><image src="{{item.icon}}"></image><text>{{item.name}}</text></view>
</view>
<!--图片区域-->
<view class="img-box"><image src="/images/link-01.png"></image><image src="/images/link-02.png"></image>
</view>home.wxss
/* pages/home/home.wxss */
swiper {height: 350rpx;
}
swiper image {width: 100%;height: 100%;
}
.grid-list {display: flex;flex-wrap: wrap;border-left: 1rpx solid #efefef;border-top: 1rpx 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;box-sizing: border-box;
}
.grid-item image {width: 60rpx;height: 60rpx;
}
.grid-item text {font-size: 24rpx;margin-top: 10rpx;
}
.img-box {display: flex;padding: 20rpx 10rpx;justify-content: space-around;
}
.img-box image {width: 45%;height: 300rpx;
}gitee地址：localLife: 本地生活
