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

相关推荐
WLJT1231231231 小时前
生活电器:重构家居体验的产业变革与发展探索
大数据·人工智能·科技·生活
彷徨而立1 小时前
【生活】秋冬季节,鼻子很干结痂,扣掉鼻孔干痂流血,鼻塞等护理方法
生活
菜鸟una15 小时前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)
前端·vue.js·微信小程序·小程序·typescript·taro·1024程序员节
科技宅说16 小时前
OPARTMENT发布Light 系列 以“光”重塑都市青年生活方式
大数据·人工智能·生活
AGI_Eval16 小时前
美团 LongCat 团队发布 VitaBench:基于复杂生活场景的交互式 Agent 评测基准
生活
從南走到北17 小时前
JAVA国际版一对一视频交友视频聊天系统源码支持H5 + APP
java·微信·微信小程序·小程序·音视频·交友
從南走到北17 小时前
同城派送小程序
微信·微信小程序·小程序
-曾牛17 小时前
从零到一:XSS靶场 haozi.me 全关卡通关教程(含冷知识汇总)
前端·网络安全·渗透测试·靶场·xss·攻略·靶场教程
程序00718 小时前
html+js 实现生活缴费页面模板
生活
腾讯云云开发20 小时前
3小时上线!云开发“零运维”外卖小程序指南
微信小程序·ai编程·小程序·云开发