app开发定制欢迎来到我的博客
📔app开发定制博主是一名大学在读本科生,app开发定制主要学习方向是前端。
🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏
🛠目前正在学习的是🔥 R e a c t / 小程序 React/小程序 React/小程序🔥,中间穿插了一些基础知识的回顾
🌈博客主页👉😇本文目录😇
本文被专栏收录
🕹坚持创作✏️,一起学习📖,码出未来👨🏻💻!
上篇文章详细讲解了微信小程序的网络数据请求,这篇文章将带领大家学习的是小程序的「首页布局案例」
首页效果以及实现步骤
- 新建项目并梳理项目结构
- 配置导航栏效果
- 配置tabBar效果
- 实现轮播图效果
- 实现九宫格效果
- 实现图片布局
新建项目并梳理项目结构
- 新建项目并梳理项目结构
app.json
{ "pages": [ "pages/home/home", "pages/message/message", "pages/contact/contact" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#2b4b6b", "navigationBarTitleText": "本地生活", "navigationBarTextStyle": "white" }, "style": "v2", "sitemapLocation": "sitemap.json"}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 配置导航栏效果
配置效果
在app.json
中与pages、window
平级的地方新增tabBar
节点,节点内容如下:
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" } ] },
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
效果如下:
- 配置tabBar效果
实现效果
接口地址
获取轮播图数据列表的接口
- 【GET】https://www.escook.cn/slides
home.js
// pages/home/home.jsPage({ /** * 页面的初始数据 */ data: { // 存放轮播图数据的列表 swiperList: [] }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { this.getSwiperList() }, // 获取轮播图数据 getSwiperList() { wx.request({ url: 'https://www.escook.cn/slides', method: 'GET', success: res => { this.setData({ swiperList: res.data }) } }) }})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
home.wxss
/* pages/home/home.wxss */swiper { height: 350rpx;}swiper image { width: 100%; height: 100%;}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 实现轮播图效果
实现效果
接口地址
获取九宫格数据列表的接口
- 【GET】https://www.escook.cn/categories
home.js
// 获取九宫格数据 getGridList() { wx.request({ url: 'https://www.escook.cn/categories', method: 'GET', success: res => { this.setData({ gridList: res.data }) } }) }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
home.wxml
<!-- 九宫格区域 --><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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
home.wxss
/* pages/home/home.wxss */swiper { height: 350rpx;}swiper image { width: 100%; height: 100%;}.grid-list { display: flex; flex-wrap: wrap; border-top: 1rpx solid #efefef; border-left: 1rpx solid #efefef;}.grid-list .grid-item { width: 33.33%; height: 200rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; border-bottom: 1rpx solid #efefef; border-right: 1rpx solid #efefef; box-sizing: border-box;}.grid-item image { width: 60rpx; height: 60rpx;}.grid-item text { margin-top: 10rpx; font-size: 24rpx;}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 实现九宫格效果
实现图片布局
home.wxml
<!-- 图片区域 --><view class="img-box"> <image src="/images/link-01.png" mode="widthFix"></image> <image src="/images/link-02.png" mode="widthFix"></image></view>
- 1
- 2
- 3
- 4
- 5
home.wxss
.img-box { display: flex; padding: 20rpx 5rpx; justify-content: space-around;}.img-box image { width: 45%;}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 实现图片布局