【微信小程序（黑马程序课程）案例实现——本地生活的首页基本布局】

喜欢下雨t2024-04-13 11:20

一. 新建一个项目

二. 添加页面和删除页面

（1）添加页面 ------app.json/pages中添加路径，并删除原有的路径

（2）删除页面------路径已经被删除，现在删除文件

三.设置导航栏效果 ------app.json/windows中更改

效果图：

代码如下：

html 复制代码 
"window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "本地生活",
    "navigationBarBackgroundColor": "#70f3ff"
  },

四.设置tabBar效果 ------在app.json中创建tabBar（与windows同级）

效果图：

代码如下：------创建tabBar与windows同级
注 ：我没有使用黑马老师的图标，我用的自己的------写完文章后我会上传到资源，需要的自取。

html 复制代码 
 "tabBar": {
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/images/tabBar_png/home.png",
      "selectedIconPath": "/images/tabBar_png/home-active.png"
    },{
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/images/tabBar_png/messages.png",
      "selectedIconPath": "/images/tabBar_png/messages-active.png"
    },{
      "pagePath": "pages/contact/contact",
      "text": "联系我们",
      "iconPath": "/images/tabBar_png/contact.png",
      "selectedIconPath": "/images/tabBar_png/contact-active.png"
    }
  ]
  },

五.实现轮播图效果 ------**注：**我使用的是自己本地的图片，所以没有发请求
而是将图片放入images文件中

代码：

在home.wxml中编写

html 复制代码 
<!-- 轮播图区域 -->
<swiper indicator-dots circular>
<swiper-item wx:for="{{swiperList}}">
  <image src="{{item}}"></image>
</swiper-item>
</swiper>

在home.js中编写

html 复制代码 
data:{ 
swiperList:[
      '/images/swiper_png/swiper_1.jpg',
      '/images/swiper_png/swiper_2.jpg',
      '/images/swiper_png/swiper_3.jpg'
  ]
  }

在home.wxss中编写

html 复制代码 
/* 轮播图样式设计 */
swiper{
  height: 350rpx;

}
swiper image{
  width: 100%;
  height: 100%;
}

效果如图：

六. 九宫格编写 ------注：依旧用的本地的图片没有发起网络申请------想去发起请求的去看原视频即可------（Day2的案例------本地生活）--- 课程连接: link

在home.wxml中编写

html 复制代码 
<!-- 九宫格区域 -->
<view class="grid-list">
  <view class="gird-item" wx:for="{{gridlist}}">
    <image src="{{item.icon}}"></image>
    <text>{{item.name}}</text>
  </view>
</view>

在home.js中编写

html 复制代码 
data:{
gridlist:[
    {'name':'洗车','icon':'/images/jiugongge_png/car_service.png'},
    {'name':'便利店','icon':'/images/jiugongge_png/conv_store.png'},
    {'name':'美食','icon':'/images/jiugongge_png/food.png'},
    {'name':'美甲','icon':'/images/jiugongge_png/mannicure.png'},
    {'name':'辅导班','icon':'/images/jiugongge_png/auxi_class.png'},
    {'name':'超市','icon':'/images/jiugongge_png/shopping.png'},
    {'name':'买菜','icon':'/images/jiugongge_png/vegetable.png'},
    {'name':'装修','icon':'/images/jiugongge_png/renovation.png'},
    {'name':'二手市场','icon':'/images/jiugongge_png/s_h_market.png'}
  ]

  },

在home.wxss中编写

html 复制代码 
.grid-list{
  /* 布局flex */
display: flex;
/* 允许换行 */
flex-wrap:wrap;
/* 添加左侧和上册边框 */
border-left: 1rpx solid #edefef;
border-top: 1rpx solid #edefef;
}
.gird-item{
  width: 33.33%;
  height: 200rpx;
  display: flex;
  /* 纵向布局 */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 添加右侧和下册边框 */
  border-right: 1rpx solid #edefef;
  border-bottom: 1rpx solid #edefef;
  /* 改变box方式 */
  box-sizing: border-box;
}
.gird-item image{
  width: 60rpx;
  height: 60rpx;
}
.gird-item text{
  font-size: 24rpx;
  /* 文本和图片有距离 */
  margin-top: 10rpx;
}

效果图如下：

七.图片排布 ------图片位置如下：

在home.wxml中编写：

html 复制代码 
<!-- 任务区和售卖区 -->
<view class="img-box">
<image src="/images/task_2/send_tasks.png" mode="widthFix"></image>
<image src="/images/task_2/senc_sales.png" mode="widthFix"></image>
</view>

不用在home.js中编写

在home.wxss中编写：

html 复制代码 
.img-box{
  /* 先横过来 */
  display:flex;
  padding: 20rpx 10rpx;
  justify-content: space-around;
}
.img-box image{
  width: 45%;
}

效果图如下：

------------------本地生活案列完成！！！

全部代码如下：

app.json代码：

javascript 复制代码 
{
  "pages": [
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "本地生活",
    "navigationBarBackgroundColor": "#70f3ff"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/images/tabBar_png/home.png",
      "selectedIconPath": "/images/tabBar_png/home-active.png"
    },{
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/images/tabBar_png/messages.png",
      "selectedIconPath": "/images/tabBar_png/messages-active.png"
    },{
      "pagePath": "pages/contact/contact",
      "text": "联系我们",
      "iconPath": "/images/tabBar_png/contact.png",
      "selectedIconPath": "/images/tabBar_png/contact-active.png"
    }
  ]
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

home.wxml代码：

html 复制代码 
<!--pages/home/home.wxml-->

<!-- 轮播图区域 -->
<swiper indicator-dots circular>
<swiper-item wx:for="{{swiperList}}">
  <image src="{{item}}"></image>
</swiper-item>
</swiper>

<!-- 九宫格区域 -->
<view class="grid-list">
  <view class="gird-item" wx:for="{{gridlist}}">
    <image src="{{item.icon}}"></image>
    <text>{{item.name}}</text>
  </view>
</view>

<!-- 任务区和售卖区 -->
<view class="img-box">
<image src="/images/task_2/send_tasks.png" mode="widthFix"></image>
<image src="/images/task_2/senc_sales.png" mode="widthFix"></image>
</view>

home.js代码：

javascript 复制代码 
// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    //存放轮播图数据
    swiperList:[
      '/images/swiper_png/swiper_1.jpg',
      '/images/swiper_png/swiper_2.jpg',
      '/images/swiper_png/swiper_3.jpg'
  ],
   gridlist:[
    {'name':'洗车','icon':'/images/jiugongge_png/car_service.png'},
    {'name':'便利店','icon':'/images/jiugongge_png/conv_store.png'},
    {'name':'美食','icon':'/images/jiugongge_png/food.png'},
    {'name':'美甲','icon':'/images/jiugongge_png/mannicure.png'},
    {'name':'辅导班','icon':'/images/jiugongge_png/auxi_class.png'},
    {'name':'超市','icon':'/images/jiugongge_png/shopping.png'},
    {'name':'买菜','icon':'/images/jiugongge_png/vegetable.png'},
    {'name':'装修','icon':'/images/jiugongge_png/renovation.png'},
    {'name':'二手市场','icon':'/images/jiugongge_png/s_h_market.png'}
  ]

  },
  //获取轮播图数据函数------未编写，而使用本地图片
  


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

home.wxss代码：

css 复制代码 
/* pages/home/home.wxss */
/* 轮播图样式设计 */
swiper{
  height: 350rpx;

}
swiper image{
  width: 100%;
  height: 100%;
}

.grid-list{
  /* 布局flex */
display: flex;
/* 允许换行 */
flex-wrap:wrap;
/* 添加左侧和上册边框 */
border-left: 1rpx solid #edefef;
border-top: 1rpx solid #edefef;
}
.gird-item{
  width: 33.33%;
  height: 200rpx;
  display: flex;
  /* 纵向布局 */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 添加右侧和下册边框 */
  border-right: 1rpx solid #edefef;
  border-bottom: 1rpx solid #edefef;
  /* 改变box方式 */
  box-sizing: border-box;
}
.gird-item image{
  width: 60rpx;
  height: 60rpx;
}
.gird-item text{
  font-size: 24rpx;
  /* 文本和图片有距离 */
  margin-top: 10rpx;
}


.img-box{
  /* 先横过来 */
  display:flex;
  padding: 20rpx 10rpx;
  justify-content: space-around;
}
.img-box image{
  width: 45%;
}

**注：**如果图片资料到我的资源里免费下载就行！！！------其实自己找点自己喜欢的图标也挺好的

相关推荐
郭wes代码4 小时前
Cmd命令大全（万字详细版）
python·算法·小程序
.生产的驴9 小时前
SpringBoot 对接第三方登录 手机号登录 手机号验证 微信小程序登录 结合Redis SaToken
java·spring boot·redis·后端·缓存·微信小程序·maven
汤姆yu15 小时前
基于微信小程序的乡村旅游系统
微信小程序·旅游·乡村旅游
计算机徐师兄15 小时前
基于TP5框架的家具购物小程序的设计与实现【附源码、文档】
小程序·php·家具购物小程序·家具购物微信小程序·家具购物
曲辒净15 小时前
微信小程序实现二维码海报保存分享功能
微信小程序·小程序
朽木成才17 小时前
小程序快速实现大模型聊天机器人
小程序·机器人
peachSoda717 小时前
随手记：小程序使用uni.createVideoContext视频无法触发播放
小程序
何极光17 小时前
uniapp小程序样式穿透
前端·小程序·uni-app
小墨&晓末18 小时前
【PythonGui实战】自动摇号小程序
python·算法·小程序·系统安全
oil欧哟1 天前
🤔认真投入一个月做的小程序，能做成什么样子？有人用吗？
前端·vue.js·微信小程序
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10树莓派 5 AI 套件（Hailo-8L）使用教程