【微信小程序】-- 案例 - 本地生活(二十)

简介: 【微信小程序】-- 案例 - 本地生活(二十)



一、案例 - 本地生活

  前面已经介绍了小程序的网络数据请求,通过栗子学习了在小程序中如何发起 GET 和 POST 请求。接下来通过一个案例将前面学习到知识进行巩固。话不多说,让我们原文再续,书接上回吧。


1、首页效果以及实现步骤

  可以先来看一下要实现的效果图,图中有轮播图、九宫格、导航栏和tabBar等效果,如下所示:


  想要实现上面的那个效果,实现步骤可分为 6 个步骤:

  • Step 1、首先新建一个项目并且梳理整个项目结构;
  • Step 2、配置导航栏效果,修改背景、标题等属性;
  • Step 3、配置 tabBar 效果,添加图片、选中等样式,总共要实现3个 tarBar;
  • Step 4、在页面主体区域实现轮播图效果;
  • Step 5、在页面主体区域实现九宫格区域效果;
  • Step 6、最后实现图片布局;

二、项目结构

1、新建项目

  虽然前面已经学习过了如何新建项目,但是还要操作一遍加深印象。首先打开微信开发者工具,点击加号按钮进行创建项目。

  接下来就是填写项目信息,填好项目名称和目录,AppID是前面注册过的,不清楚的可以看一下【微信小程序】–注册小程序账号&安装开发者工具(一)。然后后端服务选择不使用云服务,这两种开发模式是不同的,这里先学习不使用云服务。(注意: 你要选择一个空的目录才可以创建项目)

  后面就是确认编程语言了,这里是以JavaScript为例。选择完之后点击 确认 按钮即可。

2、梳理项目结构

  从项目效果图可以知道,需要新建三个页面。删除小程序的默认页面 indexlogs ,创建 homemessagecontact 页面,具体代码如下:

app.json

{
  "pages":[
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact"
  ],
}

  代码重新编译之后就会生成三个页面,home 为主页面,实际效果如下所示:

三、配置导航栏效果

   页面创建之后,接下来就是要从导航栏开始配置。通过修改 app.jsonwindow 属性来配置导航栏效果,具体代码如下所示:

app.json

{
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText": "本地生活CSH",
    "navigationBarTextStyle":"white"
  },
}

   修改完之后重新编译就可以其导航栏效果:

四、配置 tabBar 效果

  首先把下载好的 images 资源,拷贝到小程序项目根目录中,图片内容如下所示:

  打开 app.json 配置文件,和 pageswindow 平级,新增 tabBar 节点,其次 tabBar 节点中,新增 list 数组,这个数组中存放的,是每个 tab 项的配置对象,最后在 list 数组中,新增每一个 tab 项的配置对象。具体代码如下所示:

app.json

{
  "tabBar": {
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/images/home.png",
      "selectedIconPath": "/images/home-active.png"
    },{
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/images/message.png",
      "selectedIconPath": "/images/message-active.png"
    },{
      "pagePath": "pages/contact/contact",
      "text": "联系夜阑",
      "iconPath": "/images/contact.png",
      "selectedIconPath": "/images/contact-active.png"
    }]
  },
}

   修改完之后重新编译就可以看到 tarBar 效果:

五、实现轮播图效果

  这里需要通过接口来获取轮播图的数据,从而来渲染轮播图效果。获取轮播图数据列表的接口:

【GET】https://www.escook.cn/slides

1、获取轮播图数据

  知道接口之后,就可以通过 wx.request 来获取数据,由于不需要对服务器进行提交数据,所以data属性可以省略。如果不知道返回的数据是什么的话,可以用 console.log 打印出来看看。

home.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 存放轮播图数据的列表
    swiperList: []
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getSwiperList();
  },
  /**
   * 获取轮播图数据的方法
   */
  getSwiperList(){
    wx.request({
      url: 'https://www.escook.cn/slides',
      method: "GET",
      success: (res) =>{
        console.dir(res.data);
        this.setData({
          swiperList: res.data
        })
      }
    })
  }
})

  这样就能获取到轮播图的数据,来看一下实际效果:

  从图中可以看出,服务器返回的数据 res.data 被打印出来了,AppData 中 swiperList 数据被赋上了值,说明已经成功获取数据了。

2、渲染轮播图

  前面已经获取到了轮播图的数据,接下来就是渲染轮播图效果并进行美化样式。

home.wxml

  将轮播设置为循环自动播放。

<swiper indicator-dots circular indicator-color="white" indicator-active-color="gray"
autoplay interval="2000">
  <swiper-item wx:for="{{swiperList}}" wx:key="id">
    <image src="{{item.image}}"></image>
  </swiper-item>
</swiper>

home.wxss

  这里的单位尽量使用 rpx。

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

  这样就完成轮播图的渲染,来看一下实际效果:

六、实现九宫格效果

  与前面轮播图一样,也需要通过接口来获取九宫格的数据,从而来渲染九宫格图效果。获取九宫格图数据列表的接口:

【GET】https://www.escook.cn/categories

1、获取九宫格数

  通过 wx.request 来获取数据,由于不需要对服务器进行提交数据,所以data属性可以省略。如果不知道返回的数据是什么的话,可以用 console.log 打印出来看看。

home.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 存放轮播图数据的列表
    swiperList: [],
    // 存放九宫格数据的列表
    gridList:[]    
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getSwiperList();
    this.getGridList();
  },
  /**
   * 获取九宫格数据的方法
   */
  getGridList(){
    wx.request({
      url: 'https://www.escook.cn/categories',
      method:"GET",
      success: (res) =>{
        console.dir(res.data);
        this.setData({
          gridList: res.data,
        })
      }
    })
  }
})

  这样就能获取到九宫格的数据,来看一下实际效果:

2、渲染九宫格

  前面已经获取到了轮播图的数据,接下来就是渲染九宫格区域的布局并进行美化样式。

home.wxml

  有 id 的话尽量用 id 当 key。

<view class="grid-list">
  <view class="grid-item" wx:for="{{gridList}}" wx:key="id">
    <image src="{{item.icon}}"></image>
    <text>{{item.name}}</text>
  </view>
</view>

home.wxss

  这里的单位尽量使用 rpx。

.grid-list{
  /* 开启flex布局 */
  display: flex;
  /* 允许换行 */
  flex-wrap: wrap;
  /* 添加左侧跟顶部之间的边框 */
  border-left: 1rpx solid #efefef;
  border-top: 1rpx solid #efefef;
}
.grid-item {
  width: 33.33%;
  height: 200rpx;
  /* 添加布局 */
  display: flex;
  flex-direction: column;
  /* 横向纵向的居中 */
  align-items: center;
  justify-content: center;
  /* 添加右侧跟底部之间的边框 */
  border-right: 1rpx solid #efefef;
  border-bottom: 1rpx solid #efefef;
  /* 改变box方式 */
  box-sizing: border-box;
}
.grid-item image{
  width: 60rpx;
  height: 60rpx;
}
.grid-item text{
  font-size: 24rpx;
  margin-top: 10rpx;
}

  这样就完成九宫格的渲染,来看一下实际效果:

七、实现图片布局

  前面基本上已经完成大部分的效果,接下来就剩下最后两张图片的设置和美化了,具体代码如下所示:

home.wxml

  有 id 的话尽量用 id 当 key。

<view class="img-box">
  <image src="/images/link-01.png"></image>
  <image src="/images/link-02.png"></image>
</view>

home.wxss

.img-box{
  display: flex;
  /* 添加间距 上下, 左右*/
  padding: 20rpx 10rpx;
  justify-content: space-around;
}
.img-box image{
  width: 45% ;
}

  到了这里基本上就已经完成整个案例了,来看一下完整效果:


总结

  感谢观看,这里就是案例 - 本地生活的介绍,如果觉得有帮助,请给文章点个赞吧,让更多的人看到。🌹 🌹 🌹

  也欢迎你,关注我。👍 👍 👍

  原创不易,还希望各位大佬支持一下,你们的点赞、收藏和留言对我真的很重要!!!💕 💕 💕 最后,本文仍有许多不足之处,欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正!下期再见。

相关文章
|
12天前
|
新零售 小程序 搜索推荐
认养模式小程序系统开发|成熟技术|项目案例
随着新零售的发展,我们设想更多创新的商业模式和营销方式。
|
12天前
|
JSON 小程序 前端开发
【微信小程序】-- 案例 - 自定义 tabBar(四十六)
【微信小程序】-- 案例 - 自定义 tabBar(四十六)
|
12天前
|
小程序
【微信小程序】-- 自定义组件 - 数据监听器 - 案例 (三十五)
【微信小程序】-- 自定义组件 - 数据监听器 - 案例 (三十五)
|
12天前
|
JSON 小程序 API
【微信小程序】-- 案例 - 本地生活(列表页面)(三十)
【微信小程序】-- 案例 - 本地生活(列表页面)(三十)
|
12天前
|
小程序
【微信小程序】-- 页面事件 - 上拉触底 - 案例(二十七)
【微信小程序】-- 页面事件 - 上拉触底 - 案例(二十七)
|
12天前
|
新零售 人工智能 供应链
多人拼团奖励系统开发小程序软件案例
新零售以互联网技术为基础,通过利用数字化信息处理、人工智能等先进技术
|
12天前
|
JSON 小程序 JavaScript
微信小程序快速入门02(含案例)
微信小程序快速入门02(含案例)
|
12天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
12天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
12天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。

热门文章

最新文章