开发微信小程序 案例01-本地生活首页页面
1---home.wxml 区域 （页面整体的标签）
<!-- 轮播图区域 -->
<swiper indicator-dots circular autoplay>
<swiper-item wx:for="{{SwiperArr}}" wx:key="id">
<image src="{{item.image}}"></image>
</swiper-item>
</swiper>
<!-- 九宫格区域 -->
<view class="grid-Arr">
<view class="grid-item" wx:for="{{GridArr}}" wx:key="id">
<image src = "{{item.icon}}"></image>
<text>{{item.name}}</text>
</view>
</view>
<!-- 图片区域 -->
<view class="imgBox">
<image src="/images/link-01.png" mode="widthFix"></image>
<image src="/images/link-02.png" mode="widthFix"></image>
</view>
2---app.json区域 （全局配置文件）
{
"pages": [
"pages/home/home",
"pages/message/message",
"pages/contact/contact"
],
"window": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "本地生活",
"navigationBarBackgroundColor": "#2b4b6b"
},
"tabBar": {
"list": [{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "/images/首页-置灰.png",
"selectedIconPath": "/images/1_导航-默认 .png"
},{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "/images/消息-置灰.png",
"selectedIconPath": "/images/即时聊天.png"
},{
"pagePath": "pages/contact/contact",
"text": "联系人",
"iconPath": "/images/填选购人.png",
"selectedIconPath": "/images/1_用户管理.png"
}]
},
"style": "v2",
"componentFramework": "glass-easel",
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents"
}
3-home.js 区域 (存放home页面的数据)
Page({
/**
* 页面的初始数据
*/
data: {
//轮播图数组SwiperArr : [],
//九宫格 数组GridArr : [],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getSwiperArr()
this.getGridArr()
},
//获取轮播图数据
getSwiperArr(){
wx.request({
// https://applet-base-api-t.itheima.net/slides
url: 'https://applet-base-api-t.itheima.net/slides',
method :'GET',
success: (res) => {
this.setData({
SwiperArr: res.data
})
}
})
},
// 获取九宫格数据
getGridArr(){
wx.request({
url: 'https://applet-base-api-t.itheima.net/categories',
method : "GET",
success : (res) => {
this.setData({
GridArr :res.data
})
}
})
},
4--home.wxss ( home页面的渲染)
/* 轮播图区域start*/
swiper{
height: 350rpx;
}
swiper image {
width: 100%;
height: 100%;
}
/* 轮播图区域end */
/*九宫格区域start*/
.grid-Arr{
display: flex;
flex-wrap: wrap; /*换行*/
}
.grid-item{
width: 33.33%;
height: 200rpx;
display: flex;
flex-direction: column;/*主轴纵向*/
/*居中*/
align-items: center;
justify-content: center;
border-bottom: 1px solid #ededde;
border-right: 1px solid #ededde;
box-sizing: border-box;
}
.grid-item image{
width: 60rpx;
height: 60rpx ;
}
.grid-item text{
font-size: 24rpx;
margin-top: 10rpx;
color: gray;
}
/*九宫格区域end*/
/*图片区域start*/
.imgBox{
display: flex;
justify-content: space-around;
padding-top: 20rpx;
}
.imgBox image{
width: 45%;
height: 200rpx;
}
/* 图片区域 end*/
5--效果展示
