1. Toy模板网首页
  2. > Toy博客

微信小程序作品实例

10月前 作者：宝子向前冲 分类：Toy博客 阅读(34) 违法举报

这篇具有很好参考价值的文章主要介绍了微信小程序作品实例。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目录

简介

作品详情

作品代码

一、主页界面

1、WXML文件:

2、WXSS文件:

3、JS文件

4、JSON文件:

5、补充 

二、购物车界面

 1、WXML文件

 3、JS文件

 4、JSON文件

三、分类界面和个人中心界面

简介

        这是我在学习完微信小程序后，写的一个小案例，是一个关于女性商品的，数据也是自己通过数组写的死数据。这是学习完vue之后才学习的，感觉和vue很像，导致我自己的懒癌犯了，学不进去了，就大致了解之后就上手了，因为写的比较简单，部分我感觉重复的功能也没有写。所有整体来说写的还是比较顺利。

作品详情

        这个作品我写了四个页面，分别是首页、分类、购物车、个人中心。其中主页和个人中心页面的功能，相对其它两个页面来说更多一点。

        在作品中我使用了一个插件库Lin UI，但是我感觉功能一般，所有大家可以使用其他的

微信小程序插件库

作品代码

一、主页界面

微信小程序实例,微信小程序,小程序,前端

1、WXML文件:
<!--pages/home/home.wxml-->
<!--轮播图-->
<view class="swiper-container">
  <swiper indicator-dots="{{true}}" autoplay interval="3000" duration="1500" circular class="swiper">
    <swiper-item class="lun">
      <image mode="scaleToFill" src="/images/carousel/carousel-1 .jpg"></image>
    </swiper-item>
    <swiper-item class="lun">
      <image mode="scaleToFill" src="/images/carousel/carousel-2.jpg"></image>
    </swiper-item>
    <swiper-item class="lun">
      <image mode="scaleToFill" src="/images/carousel/carousel-3.jpg"></image>
    </swiper-item>
  </swiper>
</view>
<view class="brand-title">
  <text>品牌推荐</text>
</view>
<view class="container">
<!--循环遍历数组grids1中的品牌数据展示到界面上-->
  <view wx:for="{{grids1}}" wx:key="idx" wx:for-index="idx" wx:for-item="item" class="container-grid">
    <view class="sort-grid">
      <image mode="widthFix" src="{{item.src}}"></image>
      <view class="">{{item.text}}</view>
    </view>
  </view>
</view>
<!--商品推荐-->
<view class="">
  <image src="/images/fashion/fashion.png" mode="scaleToFill" class="fashion" />
  <view class="fashion-brand">
<!--循环遍历数组grids2中的商品数据展示到界面上-->
    <view wx:for="{{grids2}}" wx:key="idx" wx:for-item="item" class="brand-holder">
      <image mode="widthFix" src="{{item.src1}}" class="holder-src1"></image>
      <view class="brand-logo-holder">
        <image mode="widthFix" src="{{item.src2}}" class="holder-src2"></image>
      </view>
      <view class="siding">
        <text>2023新款优雅打揽千鸟格舒适显瘦百搭女装</text>
        <text style="font-size: 30rpx; padding-top: 10rpx; color: rgb(241, 6, 124); font-weight: 700;">{{item.text2}}</text>
      </view>
      <view class="brand-price">
        <l-price unit="￥" value="666" class="price" color="#000"></l-price>
        <button plain="{{falsh}}" class="holder-button" style="width: 110rpx;height: 30rpx; line-height: 10rpx;" bindtap="buy" data-id="{{item.idx}}">
          <view style="font-size: 10rpx;">加入购物车</view>
        </button>
      </view>
    </view>
  </view>
</view>
2、WXSS文件:
/* pages/home/home.wxss */

.lun image {
  width: 750rpx;
  height: 300rpx;
}

.swiper-container {
  margin-bottom: 14rpx;
}


.brand-title {
  font-size: 40rpx;
  font-weight: 600;
  margin: 25rpx 20rpx;
}

.brand-title text {
  display: block;
  text-align: center;
}

.container {
  width: 95%;
  display: flex;
  margin: auto;
  flex-wrap: wrap;
  justify-content: space-around;
  border-left: 1rpx solid #dddddd;
  border-top: 1rpx solid #dddddd;
}

.container-grid {
  width: 33%;
  border-bottom: 1rpx solid #dddddd;
  border-right: 1rpx solid #dddddd;
}

.sort-grid {

  text-align: center;
  margin-top: 25rpx;
  margin-bottom: 25rpx;
  font-size: 16rpx;
}

.sort-grid image {
  width: 50%;
}

.fashion {
  width: 760rpx;
  height: 100rpx;
}

.fashion-brand {
  display: flex;
  flex-wrap: wrap;
  margin: 40rpx;
  justify-content: space-around;
  font-size: 10rpx;
  text-align: center;
}

.brand-holder {
  margin: 20rpx;
  position: relative;
  width: 230rpx;
  height: 420rpx;
  border: 1px solid #dddddd;
}

.holder-src1 {
  width: 230rpx;
}

.brand-logo-holder {
  width: 52rpx;
  height: 28rpx;
  position: absolute;
  background-color: #fff;
  border: 1px solid #dddddd;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.holder-src2 {
  position: absolute;
  width: 60rpx;
  /* height: 20rpx; */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.siding text {
  display: block;
  margin: auto;
  width: 200rpx;
  font-size: 20rpx;
  color: #818181;
}

.siding text {
  display: block;
  margin: auto;
  width: 200rpx;
  font-size: 20rpx;
  color: #818181;
}

.holder-button {
  color: #ec0973;
  width: 60rpx;
  height: 18rpx;
  line-height: 2rpx;
  padding: 10rpx 10rpx;
  border: 1rpx solid #ec0973;
}

.brand-price {
  display: flex;
  margin-top: 10%;
  margin-left: 5%;
  line-height: -1rpx;
}

.brand-holder:hover {
  border: 1rpx solid #ec0973;
}

.brand-holder:hover .holder-button {
  color: #fff;
  background-color: #ec0973;
}
3、JS文件
// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    grids1: [{
        src: "/images/sort/sort-1.png",
        text: "恩裳",
        idx: 0
      },
      {
        src: "/images/sort/sort-2.png",
        text: "音儿",
        idx: 1
      },
      {
        src: "/images/sort/sort-3.png",
        text: "波司登",
        idx: 2
      }, {
        src: "/images/sort/sort-4.png",
        text: "诗篇",
        idx: 3
      }, {
        src: "/images/sort/sort-5.png",
        text: "哥弟",
        idx: 4
      }, {
        src: "/images/sort/sort-6.png",
        text: "富挺",
        idx: 5
      }, {
        src: "/images/sort/sort-7.png",
        text: "罗蒙",
        idx: 6
      }, {
        src: "/images/sort/sort-8.png",
        text: "米皇",
        idx: 7
      }, {
        src: "/images/sort/sort-9.png",
        text: "天美意",
        idx: 8
      }
    ],
    grids2: [{
      src1: "/images/fashion/fashion-1.png",
      src2: "/images/fashion/fashion-icon-1.png",
      text1: "对白女装疯抢专场",
      text2: "三折封顶",
      idx: 0
    }, {
      src1: "/images/fashion/fashion-2.png",
      src2: "/images/fashion/fashion-icon-2.png",
      text1: "对白女装疯抢专场",
      text2: "三折封顶",
      idx: 1
    }, {
      src1: "/images/fashion/fashion-3.png",
      src2: "/images/fashion/fashion-icon-3.png",
      text1: "对白女装疯抢专场",
      text2: "三折封顶",
      idx: 2
    }, {
      src1: "/images/fashion/fashion-4.png",
      src2: "/images/fashion/fashion-icon-4.png",
      text1: "对白女装疯抢专场",
      text2: "三折封顶",
      idx: 3
    }, {
      src1: "/images/fashion/fashion-5.png",
      src2: "/images/fashion/fashion-icon-5.png",
      text1: "对白女装疯抢专场",
      text2: "三折封顶",
      idx: 4
    }, {
      src1: "/images/fashion/fashion-6.png",
      src2: "/images/fashion/fashion-icon-6.png",
      text1: "对白女装疯抢专场",
      text2: "三折封顶",
      idx: 5
    }, {
      src1: "/images/fashion/fashion-7.png",
      src2: "/images/fashion/fashion-icon-7.png",
      text1: "对白女装疯抢专场",
      text2: "三折封顶",
      idx: 6
    }, {
      src1: "/images/fashion/fashion-8.png",
      src2: "/images/fashion/fashion-icon-8.png",
      text1: "对白女装疯抢专场",
      text2: "三折封顶",
      idx: 7
    }, {
      src1: "/images/fashion/fashion-9.png",
      src2: "/images/fashion/fashion-icon-9.png",
      text1: "对白女装疯抢专场",
      text2: "三折封顶",
      idx: 8
    }, {
      src1: "/images/fashion/fashion-10.png",
      src2: "/images/fashion/fashion-icon-10.png",
      text1: "对白女装疯抢专场",
      text2: "三折封顶",
      idx: 9
    }, {
      src1: "/images/fashion/fashion-11.png",
      src2: "/images/fashion/fashion-icon-11.png",
      text1: "对白女装疯抢专场",
      text2: "三折封顶",
      idx: 10
    }, {
      src1: "/images/fashion/fashion-12.png",
      src2: "/images/fashion/fashion-icon-12.png",
      text1: "对白女装疯抢专场",
      text2: "三折封顶",
      idx: 11
    }],
    cart: []
  },
  // 点击事件

  buy(event) {
    const grids2 = this.data.grids2;
    let id = event.currentTarget.dataset.id;
    var app = getApp();
    const cartData = app.globalData.cartData;
    let nums = 0;
    for (let i = 0; i < grids2.length; i++) {
      // 在循环过程中操作每个数组项
      const item = grids2[i];

      if (cartData.length != 0 && id == grids2[i].idx) {
      
        for (let i = 0; i < cartData.length; i++) {
          console.log("id:" + id, cartData[i].id);
          if (id == cartData[i].id) {
      //购物车里面有数据，且选中的商品在购物车中，商品数加一
            cartData[i].nums += 1;
            break;
          }
          if (id != cartData[i].id && i == cartData.length - 1) {
            //购物车里面有数据，且选中的商品不在购物车中，添加商品
            cartData.push({
              id: id,
              isChecked: false,
              nums: nums + 1,
              item
            })
            break;
          }
        }
      } else {
        if (id == grids2[i].idx) {
          cartData.push({
            id: id,
            isChecked: false,
            nums: nums + 1,
            item
          }); // 向全局数组中添加新的项
        }
      }
    }
    console.log(cartData);
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})
4、JSON文件:
//注册需要用的的组件
{
  "usingComponents": {

    "l-button": "/miniprogram_npm/lin-ui/button/index",
    "l-icon": "/miniprogram_npm/lin-ui/icon/index",
    "l-price": "/miniprogram_npm/lin-ui/price/index",
    "l-grid": "/miniprogram_npm/lin-ui/grid/index",
    "l-grid-item": "/miniprogram_npm/lin-ui/grid-item/index"
  }
}
5、补充 

同时为了和购物车界面发生数据交互，我在app.js中声明了一个数组，用来传递数据

app.js

// app.js
App({

  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })

  },
  // userInfo: null,
  globalData: {
//声明全局数组，传递数据
    cartData: []
  }
})

二、购物车界面

 微信小程序实例,微信小程序,小程序,前端

        购物车界面的功能相对来说还是比较好一点的，全选、单选，都有逻辑判断，就是那个件数我用的组件，所以功能只是虚假的并没有改变本地数组里面的值。只是界面自身的渲染，     

 1、WXML文件
<!--pages/cart/cart.wxml-->
<view class="add">
<!--用 wx:if 进行判断，有商品和没有商品展示不同的界面-->
  <view wx:if="{{cart}}" class="add-cart">
    <!--购物车为空-->
    <image src="/images/my/cart-empty.png" mode="widthFix" />
    <view class="add-text">
      <text>购物车空空如也，去逛逛吧~~</text>
    </view>
  </view>
  <view wx:if="{{!cart}}">
    <!--购物车里面有商品-->
    <view style="padding-bottom: 12%;">
      <l-checkbox-group>
        <l-checkbox key="{{item.id}}" checked="{{item.isChecked}}" wx:for="{{cartData}}" wx:key="id" wx:for-item="item" class="product" bindtap="Single" data-id="{{item.id}}" selected-color="blue">
          <image src="{{item.item.src1}}" mode="widthFix" />
          <l-counter count="{{item.nums}}" min="1" max="10" />
          <l-button type="error" shape="semicircle" width="120" height="60" class="sanchu" bindtap="Delete" data-id="{{item.id}}">删除</l-button>
        </l-checkbox>
      </l-checkbox-group>
    </view>
    <view class="settle">
      <l-checkbox-group bind:linchange="onChangeTap" class="select">
        <l-checkbox key="1" selected-color="blue" checked="{{Checked}}">全选</l-checkbox>
      </l-checkbox-group>
      <view class="total">
        合计：<l-price unit="￥" value="0"></l-price>
      </view>
      <l-button type="error" shape="semicircle" width="120" height="60">结算</l-button>
    </view>
  </view>
</view>

 2、WSXX文件

/* pages/cart/cart.wxss */
page {
  background-color: #f5f5f5;
}

.add {
  width: 100%;
}

.add-cart {
  align-items: center;
}

.add-cart image {
  width: 400rpx;
  margin-left: 50%;
  margin-top: 50%;
  transform: translate(-50%, -50%);

}

.add-text {
  align-items: center;
  width: 65%;
}

.add-text text {
  display: block;
  font-size: 40rpx;
  margin-left: 20%;
  transform: translate(25%, -100%);
}

.product {
  display: flex;
  width: 100%;
  margin: 15rpx;
  border-radius: 20rpx;
  background-color: #ffffff;
}

.product image {
  width: 200rpx;
  margin-left: 5%;
  margin-right: 12%;
}

.sanchu {
  margin-left: 3%;
}

.settle {
  position: fixed;
  width: 100%;
  padding: 10rpx;
  bottom: 0%;
  display: flex;
  height: 60rpx;
  border-top: 1rpx solid #e8e8e8;
  background-color: #ffffff;

}

.select {
  height: 60rpx;
  line-height: 65rpx;
}

.total {
  padding: 10rpx;
  margin-left: 20rpx;
  width: 400rpx;
}
 3、JS文件
// pages/cart/cart.js
Page({

  /**
   * 页面的初始数据
   */

  /**
   * cartData: [],    用来储存商品数据
   * cart: true,      修改展示的内容
   * Checked: false   判断商品是否选中
   */
  data: {
    cartData: [],
    cart: true,
    Checked: false
  },

  onChangeTap: function (event) {
    // 处理 "linchange" 事件的逻辑代码
    var app = getApp();
    const cartData = app.globalData.cartData;
   //获取加入购物车的数据并赋值给cartData

    for (let i = 0; i < cartData.length; i++) {
//循环数组，如果按钮选中就改为取消，未选就改为选中
      if (this.data.Checked == false) {
        cartData[i].isChecked = true;
      } else {
        cartData[i].isChecked = false;
      }
    }
//变成响应式数据
    this.setData({
      Checked: !this.data.Checked,
      cartData: cartData
    });
  },
  Single(event) {
//全选按钮
    const id = event.currentTarget.dataset.id;
    var app = getApp();
    const cartData = app.globalData.cartData;
    for (let i = 0; i < cartData.length; i++) {
      if (id == cartData[i].id) {
        cartData[i].isChecked = !cartData[i].isChecked;
      }
      if (cartData[i].isChecked == false) {
        this.data.Checked = false
      }
    }
    // 判断数组中的所有对象的 isChecked 属性是否全部为 true
    const allTrue = cartData.every(item => item.isChecked === true);

    // 如果所有对象的 isChecked 属性都为false，则将它们的值改为true
    if (allTrue) {
      cartData.forEach(item => {
        this.data.Checked = true;
      });
    }

    this.setData({
      Checked: this.data.Checked,
      cartData: cartData
    });
  },

  Delete(event) {
    const id = event.currentTarget.dataset.id;
    var app = getApp();
    const cartData = app.globalData.cartData;
    for (let i = 0; i < cartData.length; i++) {
      if (id == cartData[i].id) {
        cartData.splice(i, 1); // 删除索引为i的元素
        break; // 停止遍历，因为已经找到并删除了对应的元素
      }
    }
    this.setData({
      cartData: cartData
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
//进入界面的时候进行判断，看看满足不满足全选条件
    var app = getApp();
    const cartData = app.globalData.cartData;
    if (cartData.length === 0) {
      this.data.cart = true;
    } else {
      this.data.cart = false;
    }
    for (let i = 0; i < cartData.length; i++) {
      if (cartData[i].isChecked == false) {
        this.data.Checked = false
      }
    }
    this.setData({
      cartData,
      Checked: this.data.Checked,
      cart: this.data.cart
    })

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})
 4、JSON文件
{
  "usingComponents": {
    "l-search-bar": "/miniprogram_npm/lin-ui/search-bar/index",
    "l-icon": "/miniprogram_npm/lin-ui/icon/index",
    "l-index-list": "/miniprogram_npm/lin-ui/index-list/index"
  }
}

三、分类界面和个人中心界面

微信小程序实例,微信小程序,小程序,前端

     这两个界面写的比较简单个人中心界面上没有啥功能，分类上面实现一个功能我还是比较满意的，就是分类商品的展示问题，这个我思考了好一会，想找个组件用但是没有找到，然后就想到了一个办法，就是点击分类的名称时在JS中处理数据，将对应的数据放到一个新的空数组里面，然后进行展示。

        分类界面：红框包裹起来的部分循环的是两个不同的数组

微信小程序实例,微信小程序,小程序,前端

 代码比较简单，就不展示啦文章来源地址https://www.toymoban.com/news/detail-739585.html

到了这里，关于微信小程序作品实例的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包