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

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

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

相关推荐
HappyAcmen8 小时前
关于微信小程序的面试题及其解析
微信小程序·小程序·notepad++
乔冠宇8 小时前
微信小程序修改个人信息头像（uniapp开发）
微信小程序·小程序·uni-app
lvbb669 小时前
微信小程序-路线规划功能
微信小程序·小程序·notepad++
爱上大树的小猪12 小时前
微信小程序模仿快播标签云滚动特效
微信小程序·小程序
從南走到北16 小时前
挪车小程序挪车二维码php+uniapp
微信小程序·小程序·开源·微信公众平台
黑云压城After16 小时前
uniapp小程序自定义日历(签到、补签功能)
小程序·uni-app
黑云压城After17 小时前
小程序(物流、快递)，接入GPS北斗获取路线以及当前车辆位置
小程序
万岳科技程序员小金18 小时前
互联网医院系统源码解析：如何开发智能化的电子处方小程序？
小程序·app开发·互联网医院系统源码·智慧医疗小程序·医院app
Java Fans19 小时前
微信小程序——访问服务器媒体文件的实现步骤
服务器·微信小程序·小程序
Evaporator Core1 天前
微信小程序数据绑定与事件处理：打造动态交互体验
微信小程序·小程序·交互
热门推荐
01DeepSeek各版本说明与优缺点分析02如何在WPS和Word/Excel中直接使用DeepSeek功能03DeepSeek本地部署详细指南04太炸裂了！清华大学deepseek从入门到精通使用手册又出第三版了，《普通人如何抓住DeepSeek红利》（无套路，直接下载）05本地部署DeepSeek教程（Mac版本）06DeepSeek r1本地安装全指南07DeepSeek RAGFlow构建本地知识库系统08本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程09DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具10【docker】Windows10安装Docker Desktop - WSL update failed