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

喜欢下雨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%;
}

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

相关推荐
萧寂1732 小时前
微信小程序自定义轮播图指示点样式
微信小程序·小程序
SuperherRo10 小时前
自动化反编译微信小程序工具-e0e1-wx
微信小程序·自动化·hook·反编译
R_yy11 小时前
微信小程序开发——视频播放实现（本地视频或者云端视频均可）
前端·微信小程序·小程序
京河小蚁13 小时前
解决Moodo调节心情模块-大声喊出来无法测量出音频分贝
微信小程序·音视频·ai编程·cursor
低代码布道师15 小时前
加油站小程序实战教程03站点管理
低代码·小程序
蒜香拿铁15 小时前
小程序参数获取方式
前端·微信小程序
V+zmm1013418 小时前
智慧物流小程序（论文源码调试讲解）
java·数据库·微信小程序·小程序·毕业设计
霍格沃兹测试开发学社测试人社区18 小时前
性能测试丨微信小程序性能优化指南
性能优化·微信小程序·小程序
猿毕设21 小时前
【FL0100】基于SSM微信小程序的走失人员的报备平台
java·spring boot·后端·python·微信小程序·小程序
猿毕设21 小时前
【FL0091】基于SSM和微信小程序的社区二手物品交易小程序
java·spring boot·后端·python·微信小程序·小程序
热门推荐
01DeepSeek各版本说明与优缺点分析02本地部署DeepSeek教程（Mac版本）03如何在WPS和Word/Excel中直接使用DeepSeek功能04DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具05太炸裂了！清华大学deepseek从入门到精通使用手册又出第三版了，《普通人如何抓住DeepSeek红利》（无套路，直接下载）06DeepSeek本地部署详细指南07从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑08本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程09DeepSeek r1本地安装全指南10保姆级教程：利用Ollama与Open-WebUI本地部署 DeedSeek-R1大模型