微信小程序项目（南师中北生活圈）（二）首页实现

最新推荐文章于 2024-01-17 16:43:23 发布
最新推荐文章于 2024-01-17 16:43:23 发布
阅读量615 收藏 3
点赞数 1
分类专栏： 微信小程序 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zjzounir/article/details/108806619
版权

完成首页界面的搭建

首页界面包含了搜索框、轮播图、导航、楼层。

1、搜索框的实现

页面需要使用自定义组件时，多个页面会使用到搜索功能，看起来是个输入框，本质是一个导航标签，以超链接的形式。

components中新建文件夹SearchInput
新建4个文件，可通过新建Component直接新建
在首页中引入组件（三步骤）
1、新增组件
2、申明引用（使用页面的index.json文件，引用SearchInput.js路径）

这边使用的是相对路径，usingComponents表示要引用的组件是什么！

{
  "usingComponents": {
    "SearchInput":"../../components/SearchInput/SearchInput"
  },
  "navigationBarTitleText": "南师中北生活圈"
}

3、页面中使用标签，在index.wxml中实现

<!--pages/index/index.wxml-->
<view class="pyg_index">
<!--搜索框  开始-->
<SearchInput></SearchInput>
<!--搜索框  结束-->
</view>
}

进去组件代码SearchInput.wxml

<view class="search_input">
    <navigator url="/pages/search/index" open-type="navigate">搜索</navigator>
</view>
}

SearchInput.wxss中编辑样式，加效果

.search_input{
    height: 90rpx;
    padding: 10rpx;
    background-color: var(--themeColor);		//搜索框背景颜色
}
.search_input navigator{		//变成伸缩盒子，让内部文字水平居中
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 15rpx;
    color: #666;
}

效果图如下所示：

点击搜索框会跳转到pages中search，即搜索中心页面。
即 url="/pages/search/index" open-type=“navigate”

在这里插入图片描述

2、轮播图的实现

分为两个部分

1、获取轮播图接口数据
接口路径 https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata
请求方式Get
2、把数据跟标签相结合

2.1、在pages/index/index.js进行操作

swiperList:[ ]
发送异步请求，请求成功后进行赋值，在以页面上渲染。
url
要请求数据的地址
success
成功之后的回调函数

Page({
  /** 页面的初始数据*/
  data: {
    //轮播图数组
    swiperList:[]
  },
  /**生命周期函数--监听页面加载*/
  onLoad: function (options) {
    //1 发送异步请求获取轮播图数据
      wx.request({
        url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
        success: (result)=>{
          this.setData({
            swiperList:result.data.message
          })
        }
      });
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   *  onReady: function () {
  },
   */

})

这时候回到AppData中查看是否接收到数据，如下图所示：

在这里插入图片描述
如果没有现实数据，如下两种操作方法
1、在详情=>本地设置中=>勾选不效应合法域名，如下图所示：
在这里插入图片描述
2、登录微信公众平台=>开发=>开发设置中=>添加服务器域名，如下图所示：
在这里插入图片描述

2.2、将轮播图中的数据变成页面标签渲染出来

打开首页的页面标签文件，pages/index/index.wxml

wx:for="{{swiperList}}"
循环获取的数据数组
wx:key=“goods_id”
绑定id
src="{{item.image_src}}"
指定渲染的图片路径
autoplay indicator-dots circular
分别是自动轮播、显示面板指示点、循环轮播

<!--轮播图  开始-->
    <view class="index_swiper">
        <!--
            1、swiper标签已经存在默认的宽度和高度
            100%*150px
            2、image标签也存在默认的宽度和高度
            320px*240px
            3、设计图片和轮播图
                1、先看下原图的宽高 750*340
                2、让图片的高度自适应   宽度    等于100%
                3、让swiper标签的高度 变成和图片的高一样即可
            4、图片标签
                mode属性    渲染模式
                widthFix    让图片的标签宽度    和  图片标签的内容的宽高都等比例发生变化
        -->
        <swiper autoplay indicator-dots circular>
            <swiper-item 
                wx:for="{{swiperList}}"
                wx:key="goods_id"
            >
                <navigator >
                    <image mode="widthFix" src="{{item.image_src}}"></image>
                </navigator>
            </swiper-item>
        </swiper>
    </view>
<!--轮播图  结束-->

调整图片的样式，设置图片的为主大小等，打开index.wxss文件

/* pages/index/index.wxss */
.index_swiper swiper {
  width: 750rpx;
  height: 340rpx;
}
.index_swiper swiper image {
  width: 100%;
}

效果如下图所示：

在这里插入图片描述

2.3、将原生的请求修改为promise的方式

对上方发送请求的代码进行优化pages/index/index.js，优化手段可通过es6的promise来解决这个问题。

首先，先在request文件夹中新建index.js文件用来出来请求。
resolve
成功时候执行的回调函数
reject
失败执行的回调函数

export const request=(params)=>{
    return new Promise((resolve,reject)=>{
        wx.request({
          ...params,
          success:(result)=>{
              resolve(result);
          },
          fail:(err)=>{
              reject(err);
          }
        });
    })
}

然后，首页引入用来发送请求的
import {request} from “…/…/request/index.js”;

request({url: ‘https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata’})将解构到…params

//0 引入  用来发送请求的  方法  一定要把路径补全
import {request} from "../../request/index.js";
Page({
  /** 页面的初始数据*/
  data: {
    //轮播图数组
    swiperList:[]
  },
  /**生命周期函数--监听页面加载*/
  onLoad: function (options) {
    //1 发送异步请求获取轮播图数据  优化手段可通过es6的promise来解决这个问题
      request({url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'})
        .then(result=>{
          this.setData({
            swiperList:result.data.message
          })
      })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   *  onReady: function () {
  },
   */

})

3、分类导航模块

分成4部分，分类、秒杀拍、超市购、易充值。
接口路径https://api-hmugo-web.itheima.net/api/public/v1/home/catitems

为了便于代码的方便查阅，这边将上方代码的获取轮播数据变成调用的方式。

// pages/index/index.js
import {request} from "../../request/index.js";
Page({
  data: {
    //轮播图数组
    swiperList:[],
  onLoad: function (options) {
      this.getSwiperList();
  },
  //获取  轮播图数据
  getSwiperList(){
    request({url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'})
        .then(result=>{
          this.setData({
            swiperList:result.data.message
          })
      })
  },
})

跟获取轮播图的方法一致，这边我们将获取分类导航数据。

// pages/index/index.js
import {request} from "../../request/index.js";
Page({

  data: {
    //轮播图数组
    swiperList:[],
    //导航数组
    cateList:[]
  },
  onLoad: function (options) {
      this.getSwiperList();
      this.getCateList();
  },
  //获取  轮播图数据
  getSwiperList(){
    request({url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'})
        .then(result=>{
          this.setData({
            swiperList:result.data.message
          })
      })
  },
  //获取  分类导航数据
  getCateList(){
    request({url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems'})
        .then(result=>{
          this.setData({
            cateList:result.data.message
          })
      })
  }
})

回到AppData中查看是否接收到数据，如下图所示：
会显示4个数据
在这里插入图片描述

将分类导航中的数据变成页面标签渲染出来
<!--pages/index/index.wxml-->
<!--导航    开始-->
    <view class="index_cate">
        <navigator 
        wx:for="{{cateList}}"
        wx:key="name"
        >
        <image mode="widthFix" src="{{item.image_src}}"></image>
        </navigator>
    </view>
<!--导航    结束-->
在wxss中调整好样式
/* pages/index/index.wxss */
.index_cate{
  display: flex;
}
.index_cate navigator{
  flex: 1;
  padding: 20rpx;
}
.index_cate image{
  width: 100%;
}

效果如下图所示：

在这里插入图片描述

4、楼层模块

分成3部分，时尚女装、勇往直前、清新气质。
数据接口路径https://api-hmugo-web.itheima.net/api/public/v1/home/floordata
分为两类循环，三部分以及商品列表的循环。

跟之前一样，这边我们将获取楼层的数据。

// pages/index/index.js
import {request} from "../../request/index.js";
Page({
  data: {
    //轮播图数组
    swiperList:[],
    //导航数组
    cateList:[],
    //楼层数据
    floorList:[]
  },
  onLoad: function (options) {
      this.getSwiperList();
      this.getCateList();
      this.getFloorList();
  },
  //获取  轮播图数据
  getSwiperList(){
    request({url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'})
        .then(result=>{
          this.setData({
            swiperList:result.data.message
          })
      })
  },
  //获取  分类导航数据
  getCateList(){
    request({url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems'})
        .then(result=>{
          this.setData({
            cateList:result.data.message
          })
      })
  },
  //获取  楼层数据
  getFloorList(){
    request({url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/floordata'})
        .then(result=>{
          this.setData({
            floorList:result.data.message
          })
      })
  }
})

回到AppData中查看是否接收到数据，如下图所示：
会显示3个数据

在这里插入图片描述

将楼层导航中的数据变成页面标签渲染出来

分为两块循环，即标题和内容。

<!--pages/index/index.wxml-->
<!-- 楼层 开始 -->
  <view class="index_floor">
    <view class="floor_group"
    wx:for="{{floorList}}"
    wx:for-item="item1"
    wx:for-index="index1"
    wx:key="floor_title"
    >
      <!-- 标题 -->
      <view class="floor_title">
        <image mode="widthFix" src="{{item1.floor_title.image_src}}"></image>
      </view>
      <!-- 内容 -->
      <view class="floor_list">
        <navigator 
        wx:for="{{item1.product_list}}"
        wx:for-item="item2"
        wx:for-index="index2"
        wx:key="name"
        url="{{item2.navigator_url}}"
        >
        <image mode="{{index2===0?'widthFix':'scaleToFill'}}" src="{{item2.image_src}}"></image>
      </navigator>
      </view>
    </view>
  </view>
<!-- 楼层 结束 -->
在wxss中调整好样式
/* pages/index/index.wxss */
.index_floor .floor_group .floor_title {
  padding: 10rpx 0;
}
.index_floor .floor_group .floor_title image {
  width: 100%;
}
.index_floor .floor_group .floor_list {
  overflow: hidden;
}
.index_floor .floor_group .floor_list navigator {
  float: left;
  width: 32.33%;
  /* 后四个超链接 */
  /* 2 3 两个超链接 */
}
.index_floor .floor_group .floor_list navigator:nth-last-child(-n+4) {
  /* 原图的宽高 232 *386 */
  height: 26.4vw;
  border-left: 10rpx solid #fff;
}
.index_floor .floor_group .floor_list navigator:nth-child(2),
.index_floor .floor_group .floor_list navigator:nth-child(3) {
  border-bottom: 10rpx solid #fff;
}
.index_floor .floor_group .floor_list navigator image {
  width: 100%;
  height: 100%;
}

效果如下图所示：

在这里插入图片描述

仅供学习参考使用！！！

不足之处，请指出，蟹蟹！！！

Little-曾
关注
专栏目录
echarts markline名称_echarts的markline的使用 y轴预警线
weixin_42134051的博客
12-31 585
代码示例：app.title = '坐标轴刻度与标签对齐';option = {color: ['#3398DB'],tooltip : {trigger: 'axis',axisPointer : { // 坐标轴指示器，坐标轴触发有效type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'}},grid: {left: '...
微信小程序 实例汇总 完整项目源代码
11-01
这个压缩包文件“wechat”很可能包含了多个微信小程序的实例项目，提供完整的源代码，非常适合学习和参考。 微信小程序的开发涉及以下几个核心知识点： 1. **框架结构**：微信小程序基于一套自定义的XML-like语法...
如何实现echarts markline标签名显示自己想要的
10-15
主要介绍了实现echarts markline标签名显示自己想要的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
echarts markline 不显示_ECharts 新东西：「ECharts 术语速查手册」
weixin_39963830的博客
11-27 689
今天偶然想查下 ECharts 配置项，结果发现了一个新东西——「ECharts 术语速查手册」，于是点开了解一下。「ECharts 术语速查手册」目前有 4 个功能：常用组件说明系列类型文档速查坐标系文档速查组件文档速查常用组件说明常用组件说明如图，通过一种类似浏览器 F12 的元素拾取器那样的交互方式，我们可以看到 ECharts 图表各种组件的名称、描述和配置项手册直达链接。这简直对新手太友...
echarts中markLine 的标签名显示在该线上方内侧
高压锅博客
06-22 6658
效果如图： 在option中设置markLine里的padding设置一下就到线上方了，如图：
微信小程序 小工具类 生活圈 （源代码+截图）
06-21
微信小程序 小工具类 生活圈 （源代码+截图）微信小程序 小工具类 生活圈 （源代码+截图）微信小程序 小工具类 生活圈 （源代码+截图）微信小程序 小工具类 生活圈 （源代码+截图）微信小程序 小工具类 生活圈 （源...
微信小程序项目实例——今日美食
05-24
【微信小程序项目实例——今日美食】是一个以移动开发技术为核心，专注于美食分享的应用。这个小程序旨在为用户带来丰富的美食制作教程，提供详细的食材配料和步骤指导，让用户在家中也能轻松制作出美味佳肴。 首先...
基于微信小程序云开发的校园生活圈小程序源码.zip
05-06
基于微信小程序云开发的校园生活圈小程序，有表白墙、失物招领、兼职、闲置买卖功能。 基于微信小程序云开发的校园生活圈小程序，有表白墙、失物招领、兼职、闲置买卖功能。 基于微信小程序云开发的校园生活圈小...
微信小程序模仿朋友圈实现（点赞、评论等）.zip
05-05
微信小程序模仿朋友圈实现： 朋友圈发布 朋友圈点赞 朋友圈评论 朋友圈回复评论 点赞撤销 评论删除 已发布朋友圈删除 评论内容安全审核校验 微信小程序模仿朋友圈实现： 朋友圈发布 朋友圈点赞 朋友圈...
ehcarts绘制横向/纵向辅助线（markLine）
weixin_46917162的博客
10-20 5555
【代码】ehcarts绘制横向/纵向辅助线（markLine）
前台序列化多个表单进行ajax提交
royal1235的博客
08-08 2206
1.如下所示： 三个表单代表三个实体的数据，后台直接使用三个实体接收就可以了，切记三个实体之间属性名字尽量不要出现相同的
echarts的markLine 图表标线使用
最新发布
weixin_63681863的博客
01-17 5013
官网介绍。
echarts 折线图设置标记线 自定义值
qq_36702286的博客
11-09 1128
基准线 配置在markLine上。
Echarts加警示线/markLine，双Y轴，附各标签含义
热门推荐
qiudechao1的博客
08-16 1万+
series:[{第一组数据},{第二组数据}]：series里面放生成柱状图或折线图的数组， 而markLine是数组的一个属性，要放在数组内，每组数组可以有自己独立的markLine， series:[{ name: '销量', type: 'bar', data: datas1, yAxisIndex:0, ...
echarts markLine 的标签名称如何显示在线上方
qq_36707926的博客
03-13 2766
markLine里的padding设置一下就到线上方了 效果图：
【Echarts】markLine自定义位置及样式
芳草萋萋鹦鹉洲哦
04-13 7291
symbol : [ 'none' , 'arrow' ] , // none为标线两端的样式为无，可更改 data : [ {silent : false , yAxis : 50 , // 警戒线位置，这个赋值为纵轴50 label : {position : 'end' , // 文字位置 formatter : '标准供给时长' , //文字 color : 'green' // 文字颜色 } , lineStyle : {
EChart t小坑记,legend 不显示,markLine 说明跑到左上角等等
退休码农的自留地
01-15 1668
legend和series是一一对应的关系,legend不显示是因为legend 的名字和series 的名字没有对应上,要一一对应才能显示 MarkLine 的文字说明是可以调整位置的,但是有点儿不一样的是,它的三个位置的写法不是 left,middle,right,而是 start , middle , right. 希望以后能改进, 改成和其他定位符一样的.如果legend跑到了左上角,请检查一下这三个写法. maraSun 2021–01-15 BJFWDQ ...
echarts 手撸简单动态markLine
van先生的博客
03-11 9256
“其实echarts默认是不支持曲线markLine的.” 咳咳,为了不触发我的flag属性,我改一下我刚刚的发言 截止2018年11月14日,本人还没有看到echarts官档上支持曲线markLine. 这就让我很尴尬了啊.因为我接到一个需求. 这个需求呢,是这样的: 画个图, 三条线, 一个代表上限, 一个代表下限, 一个是实际值. 实际值超过上限或者下限的地方标红一下. 实际内容下来了之...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值