开发微信小程序 案例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--效果展示