(转)微信小程序电商实战-首页（下）

最新推荐文章于 2023-08-24 20:03:39 发布
最新推荐文章于 2023-08-24 20:03:39 发布
阅读量385 收藏
点赞数
分类专栏： WeiXin

https://www.jianshu.com/p/7100a1268453

 

好了，上一期我们把首页搜索、导航栏和广告轮播给做完了，那么接下来会继续完成我们首页的剩余部分，先看我们要实现的效果吧！

本期实现效果图.gif

本期我们要实现首页的实时热销榜、福利专场和左下方个人中心+购物车的布局。

一、实时热销榜

话不多说，先看实际效果图：

实时热销榜.gif

这个模块我们主要用到 scroll-view 视图容器，顾名思义就是滚动视图，当布局的内容超过屏幕容器的时候可以滑动开查看遮盖的内容，scroll-view可滚动视图区域属性详解：

  • scroll-x 允许横向滚动（类型：Boolean，默认值：false）
  • scroll-y 允许纵向滚动（类型：Boolean，默认值：false）
  • upper-threshold 距顶部/左边多远时（单位px），触发 scrolltoupper 事件（类型：Number，默认值：50）
  • lower-threshold 距底部/右边多远时（单位px），触发 scrolltolower 事件（类型：Number，默认值：50）
  • scroll-top 设置竖向滚动条位置（类型：Number）
  • scroll-left 设置横向滚动条位置（类型：Number）
  • scroll-into-view 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素（类型：String）
  • scroll-with-animation 在设置滚动条位置时使用动画过渡（类型：Boolean，默认值：false）
    更多请属性详情请查看微信官方scroll-view视图容器

home.wxss

/*==========实时热销榜========*/
.category-title {
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;
  margin-bottom: 0rpx;
  padding: 0px 10px;
  
}
.category-title .title{
  font-size: 14px;
  font-weight:900;
}

.category-title .line_name{
  font-size: 10px;
  color: #98989f;
  display: flex;
  justify-content:space-between;/**两边对齐**/

}

.goods {
   display: flex;
} 
.goods-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #333;
}
.goods-image{
  width: 280rpx;
  height: 300rpx; 
}
.goods-item text {
  font-size: 25rpx;
} 
.goods-item p{
  font-size: 30rpx;
}

home.wxml

<!--实时热销榜 start-->
<view class="hots-container"> 
  <view class="category-title">
    <text class="title">实时热销榜</text>
    <view class="line_name">
      <text>每15分钟更新一次</text>
      <text>查看全部 ></text>
    </view>
  </view>  
  <scroll-view scroll-x="true">
      <view class="goods">
         <block wx:for-items="{{goodsHotItems}}" wx:key="name">
          <view class="goods-item" catchtap="catchTapCategory" data-type="{{item.name}}" data-typeid="{{item.typeId}}">
              <image src="{{item.imageurl}}" class="goods-image" />   
            <text>{{item.name}}</text>
            <p>￥{{item.newprice}}</p>  
          </view>
        </block> 
      </view>
    </scroll-view>   
</view> 
<!--实时热销榜 end-->

home.js

// 实时热销榜
    goodsHotItems: [
      {
        goodId: 0,
        name: '天然植物唇膏2.4g',
        url: 'bill',
        imageurl: 'https://a3.vimage1.com/upload/merchandise/pdc/272/707/8870197248301707272/2/6922446703595-5_360x456_90.jpg',
        newprice: "32.00",
        oldprice: "59.00",
      },
      {
        goodId: 1,
        name: '流光水彩唇膏升级版 3.5g',
        url: 'bill',
        imageurl: 'https://a3.vimage1.com/upload/merchandise/pdcvis/2017/08/03/8/4fb444e7-3417-4f4a-b5a1-7f1d884c610f_218x274_70.jpg',
        newprice: "89.00",
        oldprice: "99.00",
      },
      {
        goodId: 2,
        name: '卡姿兰蜗牛氧气泡泡面膜',
        url: 'bill',
        imageurl: 'https:a3.vimage1.com/upload/merchandise/pdcvis/2017/08/24/167/28c3726f-dfdd-4a59-89ac-b79ea8e24f40_218x274_70.jpg',
        newprice: "139.00",
        oldprice: "159.00",
      },
      {
        goodId: 3,
        name: '特效润肤露',
        url: 'bill',
        imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/14805828016.jpg',
        newprice: "30.00",
        oldprice: "80.00",
      },
      {
        goodId: 4,
        name: '御泥坊 | 美白嫩肤泥浆...',
        url: 'bill',
        imageurl: 'https://a4.vimage1.com/upload/merchandise/pdcvis/2017/11/03/98/f34a6c251abf45e5ba60a645f13c7757-5.jpg',
        newprice: "79.00",
        oldprice: "80.00",
      }, {
        goodId: 5,
        name: '日本资生堂洗颜',
        url: 'bill',
        imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058328876.jpg',
        newprice: "30.00",
        oldprice: "80.00",
      }
      , {
        goodId: 6,
        name: '玉兰油 | 水感透白光塑钻...',
        url: 'bill',
        imageurl: 'https://a3.vimage1.com/upload/merchandise/pdcvis/2017/05/19/2/e5de903ab5ba4a6492f3574469fdfca9-5.jpg',
        newprice: "145.00",
        oldprice: "324.00",
      }
    ]

好了大家赶紧运行一下效果看看吧~~~

福利专场

先看效果：

福利专场效果图.gif

home.wxml

<!--福利专场 start-->
<view class="welfare-container"> 
  <view class="category-title">
    <text class="title">福利专场</text>
    <view class="line_name">
      <text>每天早10晚8准时上新</text>
    </view>
  </view>  
  <scroll-view scroll-y="true">
      <view class="welfares">
         <block wx:for-items="{{goodsWelfareItems}}" wx:key="name">
          <view class="welfares-good" catchtap="catchTapCategory" data-type="{{item.name}}" data-typeid="{{item.typeId}}">
            <view>
              <image src="{{item.imageurl}}" class="welfares-image" mode="widthFix"/> 
            </view>
            <view class="product-name">
              {{item.name}}
            </view>
            <view class="product-price-wrap">
              <p class="product-price-new">￥{{item.newprice}}</p>  
              <p class="product-price-old">￥{{item.oldprice}}</p> 
              <p class="discount">{{item.discount}}折</p>  
            </view>
            
          </view>
        </block> 
      </view>
  </scroll-view>  
</view> 
<!--福利专场 end-->

home.wxss

/**=========福利专场============**/
.welfares{
  display: flex;
  justify-content: left;
  flex-direction: row;
  flex-wrap: wrap;
  margin:10px 5px;
}
.welfares-good{
  height: 560rpx; 
  width: 47%;
  margin:0px auto;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
  font-size: 24rpx;
}
.welfares-image{
  width: 100%;
  display: inline-block;
  border: 1px #eee solid; 
}
.welfares-good .product-name{
  color: #000;
  height: 28px;
  text-align:left;
   margin: 0px 5px; 
   margin-bottom: 5px; 
}
.product-price-wrap .product-price-new{
  color: #e80080;
  margin-left:5px;
  font-weight:900;
}
.product-price-wrap .product-price-old{
  color: #888;
  text-decoration: line-through;
  padding-left: 2px;
}
.product-price-wrap .discount{
  position: absolute;
  right: 5px;
  background-color: #000;
  color: #fff;
}

home.js

// 福利专场
    goodsWelfareItems: [
      {
        goodId: 0,
        name: '泊尔崖蜜蜜光面膜（5片盒装）',
        url: 'bill',
        imageurl: 'https://a3.vimage1.com/upload/merchandise/pdcvis/2017/08/21/142/fb2960bf8e074d029c24315279289c19-5_218x274_70.jpg',
        newprice: "86",
        oldprice: "88",
      },
      {
        goodId: 1,
        name: '透无瑕矿物养护两用粉饼#03',
        url: 'bill',
        imageurl: 'https://a4.vimage1.com/upload/merchandise/pdcvis/2017/08/21/27/4b24e2a629644877866d3da755f6a36e-5_218x274_70.jpg',
        newprice: "147.00",
        oldprice: "150.00",
      },
      {
        goodId: 2,
        name: '川水水光面膜（5片盒装）',
        url: 'bill',
        imageurl: 'https://a2.vimage1.com/upload/merchandise/pdcvis/2017/08/21/86/7891361fdab348a1bc91aeca31fc77b1-5_218x274_70.jpg',
        newprice: "86.00",
        oldprice: "88.00",
      },
      {
        goodId: 3,
        name: '蜜三色渐变咬唇膏3.2g 03蜜橙动心恋',
        url: 'bill',
        imageurl: 'http://a3.vimage1.com/upload/merchandise/pdcvis/2017/08/21/176/c3b9453a4d7f46c6a8fe78705f77352b-5_218x274_70.jpg',
        newprice: "97.00",
        oldprice: "99.00",
      },
      {
        goodId: 4,
        name: '时焕颜亮采套装',
        url: 'bill',
        imageurl: 'https://a2.vimage1.com/upload/merchandise/pdcvis/2017/08/21/93/69a6bc1c11eb4be184b7dffb43b8565b-5_218x274_70.jpg',
        newprice: "398.00",
        oldprice: "459.00",
      }, {
        goodId: 5,
        name: '雪域眼霜套装',
        url: 'bill',
        imageurl: 'https://a4.vimage1.com/upload/merchandise/pdcvis/2017/08/23/127/53409c86f74647af915bc379427b97c2-5_218x274_70.jpg',
        newprice: "238.00",
        oldprice: "358.00",
      }
      , {
        goodId: 6,
        name: '凝时鲜颜冰肌水套装',
        url: 'bill',
        imageurl: 'https://a2.vimage1.com/upload/merchandise/pdcvis/2017/11/13/95/fb6c3d0c1f304b449dadb1f0100c1205-5_218x274_70.jpg',
        newprice: "248.00",
        oldprice: "348.00",
      }
      , {
        goodId: 7,
        name: '雪润皙白精选三件套',
        url: 'bill',
        imageurl: 'https://a3.vimage1.com/upload/merchandise/pdcvis/2017/08/30/184/a5000156098940b5a05a0e696535ac20-5_218x274_70.jpg',
        newprice: "348.00",
        oldprice: "396.00",
      }
    ]

好了，以上代码可以将数据渲染出来，接下来会对以上代码做一下调整 可以进行下拉刷新。

home.wxml

<view class="weui-loadmore" hidden="{{isHideLoadMore}}">
    <view class="weui-loading"></view>
    <view class="weui-loadmore__tips">努力加载中</view>
  </view>

home.wxss

/*  加载更多   */
.weui-loading {
  margin: 0 5px;
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  -webkit-animation: weuiLoading 1s steps(12, end) infinite;
  animation: weuiLoading 1s steps(12, end) infinite;
  background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
  background-size: 100%;
}
.weui-loadmore {
  width: 65%;
  margin: 1.5em auto;
  line-height: 1.6em;
  font-size: 12px;
  text-align: center;
}
.weui-loadmore__tips {
  display: inline-block;
  vertical-align: middle;
  color: #888;
}

home.js

//加载更多
  onReachBottom: function () {
    console.log('加载更多');
    setTimeout(() => {
      this.setData({
        isHideLoadMore: true,
        goodsWelfareItems: [
          {
            goodId: 0,
            name: '泊尔崖蜜蜜光面膜（5片盒装）',
            url: 'bill',
            imageurl: 'https://a3.vimage1.com/upload/merchandise/pdcvis/2017/08/21/142/fb2960bf8e074d029c24315279289c19-5_218x274_70.jpg',
            newprice: "86",
            oldprice: "88",
            discount: "8.8",
          },
          {
            goodId: 1,
            name: '透无瑕矿物养护两用粉饼#03',
            url: 'bill',
            imageurl: 'https://a4.vimage1.com/upload/merchandise/pdcvis/2017/08/21/27/4b24e2a629644877866d3da755f6a36e-5_218x274_70.jpg',
            newprice: "147.00",
            oldprice: "150.00",
            discount: "8.8",
          },
          {
            goodId: 2,
            name: '川水水光面膜（5片盒装）',
            url: 'bill',
            imageurl: 'https://a2.vimage1.com/upload/merchandise/pdcvis/2017/08/21/86/7891361fdab348a1bc91aeca31fc77b1-5_218x274_70.jpg',
            newprice: "86.00",
            oldprice: "88.00",
            discount: "8.8",
          },
          {
            goodId: 3,
            name: '蜜三色渐变咬唇膏3.2g 03蜜橙动心恋',
            url: 'bill',
            imageurl: 'http://a3.vimage1.com/upload/merchandise/pdcvis/2017/08/21/176/c3b9453a4d7f46c6a8fe78705f77352b-5_218x274_70.jpg',
            newprice: "97.00",
            oldprice: "99.00",
            discount: "8.8",
          },
          {
            goodId: 4,
            name: '时焕颜亮采套装',
            url: 'bill',
            imageurl: 'https://a2.vimage1.com/upload/merchandise/pdcvis/2017/08/21/93/69a6bc1c11eb4be184b7dffb43b8565b-5_218x274_70.jpg',
            newprice: "398.00",
            oldprice: "459.00",
            discount: "8.8",
          }, {
            goodId: 5,
            name: '雪域眼霜套装',
            url: 'bill',
            imageurl: 'https://a4.vimage1.com/upload/merchandise/pdcvis/2017/08/23/127/53409c86f74647af915bc379427b97c2-5_218x274_70.jpg',
            newprice: "238.00",
            oldprice: "358.00",
            discount: "8.8",
          }
          , {
            goodId: 6,
            name: '凝时鲜颜冰肌水套装',
            url: 'bill',
            imageurl: 'https://a2.vimage1.com/upload/merchandise/pdcvis/2017/11/13/95/fb6c3d0c1f304b449dadb1f0100c1205-5_218x274_70.jpg',
            newprice: "248.00",
            oldprice: "348.00",
            discount: "8.8",
          }
          , {
            goodId: 7,
            name: '雪润皙白精选三件套',
            url: 'bill',
            imageurl: 'https://a3.vimage1.com/upload/merchandise/pdcvis/2017/08/30/184/a5000156098940b5a05a0e696535ac20-5_218x274_70.jpg',
            newprice: "348.00",
            oldprice: "396.00",
            discount: "8.8",
          }

        ],
      })
    }, 500)
  }

备注：将上面的 goodsWelfareItems 数据集合可以注释掉，使用onReachBottom

三、个人中心+购物车

home.wxml

 <view class='tab-bar'>
      <image src="../../images/bottomNav/mine_select.png"/> 
      <p></p>
      <image src="../../images/bottomNav/cart_select.png"/> 
</view>

home.wxss

/**购物车和个人中心**/
.tab-bar{
  width: 100px;
  height: 40px;
  background-color: #000;
  border-radius:5px;
  opacity:0.7;
  position: fixed; 
  z-index: 2;
  bottom:10px;
  left: 8px;
 display: flex;
 justify-content:center;
}
.tab-bar image{
  height: 25px;
  width: 25px;
  margin: 0px auto; 
  margin-top: 8%;
}
.tab-bar p{
  border:1rpx solid #888; 
  height: 95%;
  display: inline-block;
}

总结

首页的功能基本都已经写完了，大家有什么问题可以可以在下方留言哦。

下期预告

首页已经结束，下期开始做商品详情页啦，先放上效果图初稿一睹芳容！

商品详情效果图.png

备注：具体效果以实际开发为准。



作者：IT实战联盟Lin
链接：https://www.jianshu.com/p/7100a1268453
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

stableboy
关注
专栏目录
微信小程序电商实战-首页（下）
zhenghhgz的博客
12-04 6122
上一篇：微信小程序电商实战-首页（上）好了，上一期我们把首页搜索、导航栏和广告轮播给做完了，那么接下来会继续完成我们首页的剩余部分，先看我们要实现的效果吧！本期我们要实现首页的实时热销榜、福利专场和左下方个人中心+购物车的布局。一、实时热销榜话不多说，先看实际效果图：这个模块我们主要用到 scroll-view 视图容器，顾名思义就是滚动视图，当布局的内容超过屏幕容器的时候可以滑动开查看遮盖的内容，
微信小程序电商实战（-）商城首页
deze0926的博客
11-18 1205
首先在app.json中配置页面和底部tabbar { "pages":[ "pages/index/index", "pages/kind/kind", "pages/car/car", "pages/my/my" ], "window":{ "backg...
微信小程序自定义弹窗，Loading
云未然的博客
07-06 5318
var app = getApp(); var baseUrl = getApp().baseUrl; //开启toast // flag（1表示成功，2表示失败，msg表示自定义提示信息,time提示显示时长); var Toast = (flag, msg, that, time) => { that.data.toast.flag = flag; that.data.toast.msg = msg; that.data.toast.show = false; th
微信小程序电商实战-入门篇
热门推荐
zhenghhgz的博客
11-24 2万+
小程序开发工具有新版本更新啦！开发体验更好了，详情可以查看微信公众平台-小程序https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html 好了我们开始小程序实战吧！ 第一步：开发工具下载 下载开发工具：微信开发者工具 第二步：创建小程序项目 1、选择“小程序”开发模式 安装完成后，
微信小程序电商实战-首页（上）
zhenghhgz的博客
11-24 1万+
上一篇：微信小程序电商实战-入门篇嗨，大家好！经过近两周的精心准备终于开始微信小程序电商实战之路喽。那么最终会做成什么样呢？当然可以肯定不会只做一个静态demo哦，先把我们小程序电商实战的整体架构发出来晒一下，请看下图： 好了，不啰嗦了 我们先看首页长什么样吧！为了能够更好的表达出来，首页准备分成两次写完。 第一部分先实现如下的功能划分模块大家都知道电商平台一般分为首页、商品分类、购物车和个人中
实战：微信小程序电商项目
qq_42104961的博客
08-24 916
本套课程采用主流技术栈实现，Mysql数据库，SpringBoot2+Mybatis Plus后端，微信小程序原生实现，Vue3.2+Element Plus实现后台管理。基于JWT技术实现前后端分离。微信小程序端涵盖了axios异步请求，Promise应用，swiper组件，自定义组件，应用了微信小程序提供的登录，支付，地址管理，包括下拉滑动分页，less应用，以及结合SpringBoot后端实现了企业级微信小程序支付功能，为了方便教学，采用ngrok实现映射本机IP，开发环境演示真实支付功能。
微信小程序电商实战-商品列表流式布局
qsj0606的博客
02-02 1493
微信小程序电商实战-商品列表流式布局 流式布局概念 流式布局也叫百分比布局 把元素的宽,高,margin,padding不再用固定数值,改用百分比, 这样元素的宽,高,margin,padding会根据页面的尺寸随时 调整已达到适应当前页面的目的. 如上图所示，为了能够看的更直观一点我给布局设置了红色虚线边框，整体页面根据元素的百分比进行布局。 直接看代码： wxml <scroll-view scroll-y="true" style="height:{{scrollH}}px" bindscr
微信小程序电商实战-购物车（下）
zhenghhgz的博客
05-18 1923
我们继续接着昨天的购物车写，主要把剩下的数量加减template模板、选中计算功能实现掉！template模板如果拿购物车（上）来做应该会报错的因为引用不到 template模板，接下来我们来实现！template.wxml&lt;template name="quantity"&gt; &lt;!-- 主容器 --&gt; &lt;view class="stepper"&gt;...
微信小程序电商实战-商品详情（上）
zhenghhgz的博客
12-28 5142
上一篇：微信小程序电商实战-首页（下）先看一下今天要实现的小程序商品详情页吧！本期我们要实现小程序商品详情页的头部标题、头部轮播、商品详情浮动按钮和商品内页布局。一、设置头部标题如上图所示，头部标题是商品详情 如果不进行设置的话会默认为app.json 设置的window.navigationBarTitleText值。detail.json{ "navigationBarTitleText":
微信小程序电商实战-购物车（上）
zhenghhgz的博客
05-17 3149
好久没更新小程序电商实战的文章了，是因为最近一直做整体架构调整，一些准备工作也是比较耗费时间的。在这几天将会有新版的 小程序电商教程推出，先透露一下 新版将会以https的方式请求动态获取数据来展现，不再是目前的静态页面了 新版也更贴近于实战。这篇购物车因为内容比较多 特别是中间有用到template模板的只是点，所以会分文 上下两部分。大家耐心看完哦~~~购物车效果购物车效果图.gifc...
微信小程序电商实战-你所困扰的自定义顶部导航栏都在这里
03-29
微信小程序电商实战-解决你的登陆难问题 微信自6.6.0版本之后提供了自定义底部导航栏的功能，这使得我们的全屏页面设计成为了可能  首先演示下最终的实现效果 (此图片来源于网络，如有侵权，请联系删除! )   我们...
微信小程序-电商小程序-程序源码.zip
05-31
总的来说，这个压缩包中的源码可以作为微信小程序开发的实战教程，帮助开发者深入理解微信小程序的架构、组件、API 使用以及电商应用的开发流程。通过对这些源码的学习和实践，开发者不仅可以提升技术能力，还能为...
微信小程序源码_电商简约模板.zip
03-08
在这个“微信小程序源码_电商简约模板.zip”压缩包中，我们可以找到一个用于构建电商平台的小程序源代码。源码通常包含一系列的文件和目录，用于定义小程序的功能、界面和交互逻辑。 首先，我们要了解微信小程序的...
微信小程序电商实战课程SpringBoot2+Vue3+Element plus.rar
05-17
《微信小程序电商实战课程：SpringBoot2+Vue3+Element plus》是一门深入探讨现代电商应用开发技术的课程，结合了微信小程序、后端SpringBoot框架以及前端Vue3和Element Plus组件库。本课程旨在帮助开发者掌握从...
微信小程序电商实战课程SpringBoot2+Vue3(85到96讲)
04-09
微信小程序端涵盖了axios异步请求，Promise应用，swiper组件，自定义组件，应用了微信小程序提供的登录，支付，地址管理，包括下拉滑动分页，less应用，以及结合SpringBoot后端实现了企业级微信小程序支付功能，...
java基于ssm+vue物流配送管理系统源码 带毕业论文+PPT
09-18
1、开发环境：ssm框架；内含Mysql数据库；VUE技术 2、需要项目部署的可以私信 3、项目代码都经过严格调试，代码没有任何bug！ 4、该资源包括项目的全部源码，下载可以直接使用！ 5、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 6、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。
java基于ssm+jsp实验室排课系统源码 带毕业论文
09-18
1、开发环境：ssm框架；内含Mysql数据库；JSP技术 2、需要项目部署的可以私信 3、项目代码都经过严格调试，代码没有任何bug！ 4、该资源包括项目的全部源码，下载可以直接使用！ 5、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 6、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。
VB人事管理系统（源代码+论文）.zip
最新发布
09-18
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看rEADME.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看rEADME.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。
【高创新】基于龙格库塔优化算法RUN-Transformer-BiLSTM实现故障识别Matlab实现.rar
09-18
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
微信小程序电商实战：自定义顶部导航栏详解与实现
本文档是一篇关于微信小程序电商开发实战的文章，作者针对开发者在实践中常见的问题，特别是自定义顶部导航栏的设计和实现进行了深入探讨。自6.6.0版本以来，微信小程序提供了自定义导航栏功能，这对于全屏页面设计...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值