文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

微信电商小程序如何开发

2023-06-26 08:20

关注

今天小编给大家分享一下微信电商小程序如何开发的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

电商底部导航栏的制作

我想大家对电商一定不陌生,一般电商的底部导航栏有以下几个首页、分类、购物车、个人中心。所以我们按照这个来做吧,说到底部导航,不知道你还记得在 微信小程序入门篇(一)中app.json的作用,如果不记得,请翻看一下,app.json是用来配置page路径以及导航栏属性的,那我们要做首页、分类、购物车、个人中心界面就要在page也添加这几个界面,所以在app.json的page里添加如下代码,写入page路径,系统会自动帮你创建界面的

  "pages":[    "pages/home/home",    "pages/classify/classify",      "pages/cart/cart",    "pages/mine/mine",    "pages/index/index"  ],

好,既然添加了四个界面,那我们要怎么做底部导航栏呐,今天给app.json再添加一个属性,就是可以在app.json里配置导航栏,将下面代码添加到app.json里面

 "tabBar": {    "color": "#858585",    "selectedColor": "#f0145a",    "backgroundColor": "#ffffff",    "borderStyle": "#000",    "list": [      {        "pagePath": "pages/home/home",        "iconPath": "images/bottomNav/home.png",        "selectedIconPath": "images/bottomNav/home_select.png",        "text": "首页"      },      {        "pagePath": "pages/classify/classify",        "iconPath": "images/bottomNav/classify.png",        "selectedIconPath": "images/bottomNav/classify_select.png",        "text": "分类"      },      {        "pagePath": "pages/cart/cart",        "iconPath": "images/bottomNav/cart.png",        "selectedIconPath": "images/bottomNav/cart_select.png",        "text": "购物车"      },      {        "pagePath": "pages/mine/mine",        "iconPath": "images/bottomNav/mine.png",        "selectedIconPath": "images/bottomNav/mine_select.png",        "text": "我的"      }    ]  }

tabBar系统自带字段,不可改,添加这个字段就是告诉系统你要添加导航栏,color、selectedColor、backgroundColor从字面意思也字段,分别对应的属性是默认字体颜色、勾选字体颜色、背景颜色。着重说一下borderStyle,这个的定义底部导航栏与界面的边界线,属性有点特殊,特殊在如果你不想要这个分界线,可以把属性设置为white,剩下的不管你写入的是什么,系统都理解为要添加这条分界线,不信你可以试试。list属性自然是设置对应导航栏的界面啦,

这里要说的是,图片路径,一定要写对,不然找不到图片就显示不出来,这里给大家提供我的导航栏图片—提取码:8zwe 大家可以根据我的图片路径创建对应的文件夹,如下图

微信电商小程序如何开发

需要注意的:

举一反三

  1. 我们创建了四个导航栏,那么如果我想再添加两个导航栏可以吗?
    你也许觉得很简单,试着去在list列表里添加两个了吧,我也是这么做的,但是出问题啦。系统会报错,这回知道了吧,最多只能是五个,没办法,谁让微信是老大,人家定最多五个那就只能最多五个喽!
    微信电商小程序如何开发

  2. 不知道你有没有注意到,导航栏默认首页勾选为红色,那么我想要默认勾选分类为红色呐,要怎么办?
    这个有点难度了吧,我刚开始想的是在tabBar属性把list里的第一个home属性和classify属性换一下应该就可以解决,然而并不是这样的,因为没有效果,后来也是一次误打误撞给发现的,我给你点小提示,有没有注意到,pages的第一个路径是什么pages/home/home,没错,就是它,如果想要分类classify作为默认的勾选项,你只需要在pages属性把home的路径和classify路径换一下,保存,重新编译一下,你要的效果就出来了,这里可以总结的一点就是,tabBar是到page里的第一行路径作为默认勾选项的。

电商顶部导航栏制作

既然讲了导航栏,干脆今天多讲解一点,接着教教大家顶部导航栏怎么制作,先上效果图

微信电商小程序如何开发
这个导航栏可不像底部导航栏啦,因为他的级别比较低,是页面级别的导航栏,所以要写在页面里,你想要在哪个页面加入顶部导航栏就在哪个页面里添加如下代码,这里以首页的界面为例:
home.wxss

page{    display: flex;    flex-direction: column;    height: 100%;  }  .navbar{    flex: none;    display: flex;    background: #fff;  }  .navbar .item{    position: relative;    flex: auto;    text-align: center;    line-height: 80rpx;    font-size:14px;}  .navbar .item.active{    color: #f0145a;  }  .navbar .item.active:after{    content: "";    display: block;    position: absolute;    bottom: 0;    left: 0;    right: 0;    height: 6rpx;    background: #f0145a;  }

home.wxml

<!--导航条-->  <view class="navbar">    <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}</text>  </view>

在home.wxml里面bindtap字段我们已经讲解过啦,是事件监听的标识符,事件名称叫“navbarTap”可以到home.js里查找到这个事件wx:for这个字段重点讲解,在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item,这是官方解释,说白了就是item默认叫做变量的值,index表示第几个变量的值,还不太明白请看这个 微信 wx:for 的讲解

home.js

// pages/home/home.jsvar app = getApp()Page({  data: {    navbar: ['护肤', '彩妆', '香水','个人护理'],    currentTab: 0,  },  // 导航切换监听  navbarTap: function (e) {    console.debug(e);    this.setData({      currentTab: e.currentTarget.dataset.idx    })  },})

home.js,这里读过微信小程序入门篇(二)都知道,page页面里.js一般是放data数据和事件监听的,这里data有一个navbar导航栏数据,还有一个记录当前位置的currentTab,字段可以自由命名,赋值的时候对应上就好,

微信电商小程序如何开发

以上就是“微信电商小程序如何开发”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯