黑马微信小程序项目实战

最新推荐文章于 2024-07-01 14:27:11 发布
最新推荐文章于 2024-07-01 14:27:11 发布
阅读量1.4k 收藏 7
点赞数
分类专栏： 前端 html 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/web18296061989/article/details/123324982
版权
本文档详细介绍了使用微信小程序进行项目开发的实战步骤，包括第三方框架的选择、项目的搭建、各个页面的创建与功能实现，如轮播图、分类导航、商品列表、商品详情、收藏和购物车等。此外，还涉及到了搜索中心和个人中心的功能实现，如搜索框、用户登录授权、意见反馈等。在整个过程中，重点讲解了如何处理异步请求和数据缓存，以及组件化开发和页面交互逻辑。
摘要由CSDN通过智能技术生成

文章目录

1.小程序的第三方框架

  1. 腾讯 wepy 类似于vue
  2. 美团 mpvue 类似于vue
  3. 京东 tao 类似于react
  4. 滴滴 chameleon
  5. uni-app 类似于vue
  6. 原生框架MINA

2. 帮助文件

接口文档地址：https://www.showdoc.com.cn/128719739414963/2513235043485226
阿里巴巴字体iconfont:https://www.iconfont.cn/
即本项目的后台已经写好了，直接调用接口即可

3.项目的搭建

3.1新建小程序项目

填入自己的openID

3.2搭建目录结构

录名

作

styles

存放公共样式

components

存放组件

lib

存放第三库

utils

的帮助库

request

的接帮助库

在这里插入图片描述

3.3. 搭建项目的页面

名称

名称

index

分类

category

商品列表

goods_list

商品详情

goods_detail

购物

cart

收藏

collect

订单

order

搜索

search

个中

user

意反馈

feedback

登录

login

授权

auth

结算

pay

3.4. 引字体图标

1. 打开阿巴巴字体图标 站
https://www.iconfont.cn/
2. 选择的图标
选择自己想要的图标添加入库
在这里插入图片描述

3. 添加项
选择购物车图标
在这里插入图片描述
点击添加至项目（我选择了三个购物车的图标）
在这里插入图片描述
可以将其添加到一个已有的项目或者新建一个项目
在这里插入图片描述
本次项目所需要的图标
在这里插入图片描述
点击Font class生成代码
在这里插入图片描述
会生成一个class地址
在这里插入图片描述
4. 点击链接，复制样式，将其放入styles目录下的iconfont.wxss中
在这里插入图片描述

@font-face {
    font-family: "iconfont"; /* Project id 3078102 */
    src: url('//at.alicdn.com/t/font_3078102_um8ol0i9ny.woff2?t=1640609932945') format('woff2'),
         url('//at.alicdn.com/t/font_3078102_um8ol0i9ny.woff?t=1640609932945') format('woff'),
         url('//at.alicdn.com/t/font_3078102_um8ol0i9ny.ttf?t=1640609932945') format('truetype');
  }
  
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-weibiaoti2fuzhi08:before {
    content: "e625";
  }
  
  .icon-shoucangxuanzhong:before {
    content: "e62b";
  }
  
  .icon-fenxiang:before {
    content: "e86e";
  }
  
  .icon-kefu:before {
    content: "e88f";
  }
  
  .icon-dingdan:before {
    content: "e645";
  }
  
  .icon-fukuantongzhi:before {
    content: "e60c";
  }
  
  .icon-tuihuotuikuan_dianpu:before {
    content: "e773";
  }
  
  .icon-shoucang:before {
    content: "e8b9";
  }
  
  .icon-gouwucheman:before {
    content: "e600";
  }
  
  .icon-gouwuchekong:before {
    content: "e601";
  }
  
  .icon-gouwucheman1:before {
    content: "e602";
  }

5. 在app.wxss中导入要使用的样式

@import "./styles/iconfont.wxss"

3.5 创建tabbar页面

1. 在项目中创建icon文件夹，并将素材中的相关图标拷贝进入
在这里插入图片描述
2. 常见tabbar相关页面和样式
app.json中

{
  "pages":[
    "pages/index/index",
    "pages/category/index",
    "pages/goods_list/index",
    "pages/goods_detail/index",
    "pages/cart/index",
    "pages/collect/index",
    "pages/order/index",
    "pages/search/index",
    "pages/user/index",
    "pages/feedback/index",
    "pages/login/index",
    "pages/auth/index",
    "pages/pay/index"
  ],
  "tabBar": {
    "color": "#999",
    "selectedColor": "#ff2d4a",
    "backgroundColor": "#fafafa",
    "position": "bottom",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "icons/home.png",
        "selectedIconPath": "icons/home-o.png"
      },
      {
        "pagePath": "pages/category/index",
        "text": "分类",
        "iconPath": "icons/category.png",
        "selectedIconPath": "icons/category-o.png"
      },
      {
        "pagePath": "pages/cart/index",
        "text": "购物车",
        "iconPath": "icons/cart.png",
        "selectedIconPath": "icons/cart-o.png"
      },
      {
        "pagePath": "pages/user/index",
        "text": "我的",
        "iconPath": "icons/my.png",
        "selectedIconPath": "icons/my-o.png"
      }
    ]
  },
  
    
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#eb4450",
    "navigationBarTitleText": "黑马优购",
    "navigationBarTextStyle":"white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

2.初始化页面
在app.wxss中

@import "./styles/iconfont.wxss";

/**在微信小程序中 不支持通配符* **/
page,view,text,swiper-item,image,navigator{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
/**
 主题颜色 通过变量来实现
 less中存在变量这个知识点
 原生的css和wxss也支持变量
**/
page{
    /**定义主题颜色**/
    --themeColor:#eb4450;
    /**
    统一字体大小
    1px = 2rpx
    **/
    font-size: 20rpx;
}

==

4.1. 效果

在这里插入图片描述

4.2 使定义组件的式实现头部搜索框

1. 在components下面创建一个SearchInput组件，实现搜索的功能
在这里插入图片描述
2. 在SearchInput.wxml创建搜索导航

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

3. SearchInput.wxss中的样式

/* components/SearchInput/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: white;
  border-radius: 15rpx;
  color: #666;
}

4.引入所使用的组件
在pages/index/index.json中引入所使用的组件
在这里插入图片描述

{
  "usingComponents": {
    "SearchInput":"../../components/SearchInput/SearchInput"
  },
  "navigationBarTitleText": "优购首页"
}

5.使用组件
在pages/index/index.wxml

<view class="pyg_index">
    <!--搜索框开始-->
    <SearchInput></SearchInput>
    <!--搜索框结束-->
</view>

4.3 首页轮播图

1. 网络请求获取轮播图的数据
在pages/index/index.js下

Page({

  /**
   * 页面的初始数据
   */
  data: {
    //轮播图数组
    swipperList:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //异步请求获取轮播图的数据
    wx.request({
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
      success:(result)=>{
        this.setData({
          swipperList:result.data.message
          })
      }

    });
    
  }
  }）

接口调用结果显示
在这里插入图片描述
没有结果显示解决办法

  • 没有添加appid，点击详情按钮，选择不校验合法域名
    在这里插入图片描述

  • 为了后面的开发管理和部署上线，选择开发管理中的服务设置，设置服务器的域名
    在这里插入图片描述
    2. 轮播图动态渲染
    在pages/index/index/wxml中

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

        </swiper-item>
    </swiper>
</view>
  
<!--轮播图结束-->

相应的wxss

.index_swiper swiper {
  width: 750rpx;
  height: 340rpx;
}
.index_swiper swiper image {
  width: 100%;
}

3. 将原生的请求改为promise方式

  1. 在request的目录下创建index.js

    export const request=(params)=>{ 

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

    }

  2. 在pages/index/index.js中加入request.js的路径

    import {request} from “…/…/request/index.js”

  3. 请求路径的改写

    onLoad: function (options) {
    //异步请求获取轮播图的数据
    // wx.request({
    // url: ‘https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata’,
    // success:(result)=>{
    // this.setData({
    // swipperList:result.data.message
    // })
    // }

    // });
request({url:'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'})
.then(result=>{
  this.setData({
    swipperList:result.data.message
  })
})

    },

4.4 首页分类导航模块

1. 请求接口数据
在pages/index/index.js中获取导航数据

  //获取导航数据
  getCatesList(){
    request({url:'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems'})
    .then(result=>{
      this.setData({
        catesList:result.data.message
      })
    })
  }

2. 页面进行导航数据的显示
在pages/index/indedx.wxml中进行导航数据的显示

    <!--导航开始-->
    <view class="index_cate">
        <navigator 
        wx:for="{
  {catesList}}"
        wx:key="name"
        >
        <image  mode="widthFix" src="{
  {item.image_src}}">
            
        </image>
        </navigator>
    </view>
      
    <!--导航结束-->

3. css样式

.index_cate {
  display: flex;
  padding: 20rpx;
}
.index_cate navigator {
  flex: 1;
}
.index_cate navigator image {
  width: 100%;
}

4.5 首页楼层模块

1. 获取接口数据
pages/index/index.js

  //获取楼层的接口数据
  getFloorList(){
    request({url:'https://api-hmugo-web.itheima.net/api/public/v1/home/floordata'})
    .then(result=>{
      this.setData({
        floorList:result.data.message
      })
    })
  }

2. 内容显示
pages/index/index.wxml

  <!--楼层开始-->
    <view class="index_floor">
    <view >
        <view wx:for="{
  {floorList}}"
        wx:for-item="item1"
        wx:for-index="index1"
        wx:key="floor_title"
        class="floor_group"
        >
        <!--标题-->
        <view class="floor_title" >
            <image src="{
  {item1.floor_title.image_src}}" mode="widthFix" ></image>
        </view>
        <!--内容-->
        <view class="floor_list">
        <navigator 
        wx:for="{
  {item1.product_list}}"
        wx:for-item="item2"
        wx:for-index="index2"
        wx:key="name">
            <image src="{
  {item2.image_src}}" mode="{
  {index2===0?'widthFix':'scaleToFill'}}"/>
              
        </navigator>
          
        </view>
        </view>
    </view>
    </view>
      
    <!--楼层结束-->

3. 导入样式
pag

最低0.47元/天 解锁文章
web18296061989
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
02-微信小程序项目(黑马优购).zip
06-24
02-微信小程序项目(黑马优购).zip
黑马小程序品优购商城项目分析
奥特蛋的博客
01-13 5174
项目页面的搭建 页面名称 文件 首页 index 分类 category 商品列表 goods_list 商品详情 goods_detail 购物车 cart 收藏 collect 订单 order 搜索 search 个人中心 user 意见反馈 user 登录 login 授权 auth 结算 pay -项目文件目录 首页 分类页面 点击左侧菜单切换内容的业务逻辑 获取被点击的标题身上的索引 给data中的currentI
微信小程序开发实战课后习题解答————第五章（作业版）
最新发布
dazhanglao的博客
07-01 853
微信小程序开发实战（黑马程序员）书籍的课后习题，自己做的，答案可能不准确，希望发现错误的大佬能帮忙给出正确答案，一起学习
微信小程序开发实战课后习题解答————第三章（作业版）
dazhanglao的博客
05-18 4646
微信小程序开发实战（黑马程序员）书籍的课后习题，自己做的，答案可能不准确，希望发现错误的大佬能帮忙给出正确答案，一起学习
微信小程序（黑马优购项目）
iaz999的博客
04-21 2590
在项目根目录的components目录上，鼠标右键，选择新建组件，填写组件信息后，最后点击创建按钮：为了增强组件的通用性，我们允许使用者自定义搜索组件的背景颜色和圆角尺寸。通过props定义bgcolor和radius两个属性，并指定值类型和属性默认值：在my-search自定义组件内部，给类名为的view绑定click事件处理函数：在分类页面中使用my-search自定义组件时，即可通过@click为其绑定点击事件处理函数：在分包里创建search页面同时在分类页面中，定义。
黑马优购微信小程序项目（学习自黑马程序员，代码纯属手工打造，在原有的基础上改造了一丢丢）
06-19
黑马优购微信小程序，一款微信小程序购物平台，前后端分离，这是前端资料
《微信小程序开发实战》课后题
weixin_46438851的博客
12-26 3万+
《微信小程序开发实战》课后题
微信小程序开发实战第二版-黑马程序员
W3033468的博客
11-06 1649
【代码】微信小程序开发实战第二版-黑马程序员。
微信小程序实战项目
Suabia的博客
09-26 1462
项目介绍： 基于原生微信小程序框架开发 已完成功能： 登录授权 购物车添加、删除物品功能 个人中心展示 商品搜索 商品收藏 查询订单 接口文档：https://www.showdoc.com.cn/128719739414963 项目github：https://github.com/suabisa/BlackDonkeyShop 小程序部分截图： 首页 商品分类 无收货地址无商品的购物车 有商品有地址的购物车 登录前的个人中心 登录后的个人中心 搜索功能 商品详情 个人收藏页面 订单查
微信小程序实战视频教程
03-04
微信小程序实战视频教程，微信小程序实战视频教程，微信小程序实战视频教程
最新 2018 黑马 web 前端36期（内含微信小程序）视频
04-01
最新2018黑马web前端36期（内含微信小程序）视频 内含主要链接以及备用链接防止无效 html
微信小程序实现婚礼邀请函源代码
07-01
在这个"微信小程序实现婚礼邀请函源代码"项目中，开发者提供了一种创新的方式，让宾客可以通过微信小程序收到并查看婚礼邀请。下面我们将深入探讨这个项目的相关知识点。 1. **微信小程序开发基础**： 微信小程序...
微信小程序完整项目实战(前端+后端)
热门推荐
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
06-20 14万+
基于微信小程序的在线商城系统，采用前后端分离的模式，使用C#作为后端语言进行开发，界面完整，上手简单。
黑马程序员_小练习
我的学习乐园
09-10 863
----------------------------------------------------------------------------- android培训、java培训、期待与您交流！ -------------------------------------------------------------------------------- 注：按Java规范书写程序
【微信小程序（黑马程序课程）案例实现——本地生活的首页基本布局】
weixin_45753504的博客
04-10 1173
黑马程序员本地生活案例的实现
uniapp黑马项目总结
qq_42765776的博客
09-12 3364
在做完了两个vue项目之后，我开始了小程序的学习，由于开学等因素影响进度一直都是断断续续的。最终在开学一周多的时间结束了uniapp项目的练习。于是我选择了黑马商场做为微信小程序uniapp的练手。uniapp是一个基于vue.js开发的一个前端框架，可以发布各个平台，本项目是开发一个微信小程序，使用HbuilderX中uniapp的内置的uni.ui模块。使用了sass，练习了对微信小程序开发的一套相对完整的流程，还有用git提交代码到gitee。
微信小程序黑马—day5
05-05
Day5 的主要学习内容是小程序的组件化编程，包括自定义组件和基础组件的使用。 自定义组件是指开发者可以根据自己的业务需求，自定义一些组件，使得小程序更加符合自己的需求。开发者可以通过 WXML、WXSS 和 JS 文件，编写自定义组件的代码。 基础组件是小程序提供的一些常用组件，如按钮、输入框、轮播图等。开发者可以直接使用这些组件，避免重复造轮子，提高开发效率。 在学习自定义组件时，需要掌握组件的生命周期函数，包括 created、attached、ready、moved 和 detached 等。这些函数可以让开发者在组件不同的生命周期阶段执行不同的操作，比如在 attached 函数中进行数据初始化，在 ready 函数中进行界面渲染等。 在学习基础组件时，需要掌握组件的属性和事件。组件的属性可以通过数据绑定进行传递，比如给按钮组件设置一个 text 属性，控制按钮的文本显示。组件的事件可以通过绑定事件处理函数进行响应，比如给按钮组件绑定一个 tap 事件，响应用户的点击操作。 总的来说，组件化编程是小程序开发中非常重要的一部分，可以使得开发更加灵活和高效。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值