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

相关推荐
CIb0la14 小时前
微软宣布 Windows 11 v25H2 GA
运维·安全·生活
云起SAAS1 天前
SCL-90症状自评量表抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·scl-90症状自评量表·scl-90
LoveEate1 天前
uniapp 运行/发版微信小程序
微信小程序·小程序·uni-app
韩立学长1 天前
【开题答辩实录分享】以《基于微信小程序的糖尿病居家健康管理系统》为例进行答辩实录分享
微信小程序·小程序
卷Java1 天前
预约记录关联查询接口说明
java·开发语言·spring boot·python·微信小程序
云起SAAS2 天前
族谱家谱抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·族谱家谱
明月(Alioo)2 天前
用AI帮忙,开发刷题小程序:微信小程序在线答题系统架构解析
微信小程序·小程序·系统架构
明月(Alioo)2 天前
用AI帮忙,开发刷题小程序:从零开始,构建微信小程序答题系统
微信小程序·开源·aigc
有来技术2 天前
UniApp 自定义导航栏适配指南:微信小程序胶囊遮挡、H5 与 App 全端通用方案
微信小程序·uni-app
知识分享小能手2 天前
微信小程序入门学习教程,从入门到精通,WXS语法详解(10)
前端·javascript·学习·微信小程序·小程序·vue·团队开发