微信小程序笔记

最新推荐文章于 2024-07-10 19:16:05 发布
最新推荐文章于 2024-07-10 19:16:05 发布
阅读量923 收藏 26
点赞数 25
文章标签： 微信小程序 笔记 notepad++
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/libai040720/article/details/139803467
版权

1.页面代码

首页

<view class="index-container">

  <!-- 首页背景图 -->

  <view class="window-bgc"></view>

  <!-- 页面主体部分 -->

  <view class="container">

    <!-- 轮播图区域 -->

    <banner />

    <!-- 导航区域 -->

    <entrance />

    <!-- 广告区域 -->

    <view class="adver">

      <view class="adver-left">

      <navigator url="">

        <image src="../../assets/images/love.jpg" mode="widthFix" />

      </navigator>

    </view>

    <view class="adver-right">

    <view>

    <navigator url="">

      <image src="../../assets/images/elder.jpg" mode="widthFix" />

    </navigator>

  </view>

  <view>

    <navigator url="">

      <image src="../../assets/images/friend.jpg" mode="widthFix" />

    </navigator>

  </view>

</view>

</view>

<!-- 商品列表 -->

<goods-list title="人气推荐"/>

<goods-list title="猜我喜欢"/>

<goods-card/>

</view>

</view>

  //首页背景图

.window-bgc{

  height: 200rpx;

  position:absolute;

  width:100%;

  background-color: #f3514f;

  border-radius:0rpx 0rpx 40% 40%;

}

.adver {

  display: flex;

  margin:0 auto;

  width: 96%;

  padding: 18rpx;

  box-sizing: border-box;

  background-color:rgb(177, 54, 54);

  border-radius: 18rpx;

  .adver-left{

    width: 50%;

    padding: 8rpx 8rpx 0rpx 8rpx;

  }

  .adver-right{

    width: 50%;

    padding: 8rpx 8rpx 0rpx 6rpx;

    view:laat-child{

      padding-top: 10rpx;

    }

  }

  image{

    width: 100%;

  }

}

边边框框

 position: relative;

  .swiper{

    height: 320rpx;

    //设置圆角弧度

    border-radius: 18rpx;

    //设置溢出隐藏

    overflow: hidden;

    width: 95%;

    //margin设置外边距

    margin: 0 auto;

  }

  .swiper-item{

    .img{

      width: 100%;

      height: 100%;

      border-radius: 18rpx;

    }

  }

  .indicator{

    display: flex;

    justify-content: center;

    position: absolute;

    bottom: 16rpx;

    left: 0rpx;

    right: 0rpx;

    .rectangle{

      width: 30rpx;

      height: 6rpx;

      background-color: #f3514f;

      margin: 0 8rpx;

      border-radius: 6rpx;

    }

  }

<!--components/goods-card/goods-card.wxml-->
<view class="goods_card_container">
<!-- 图片 -->
  <navigator class="navigator_nav" url="/pages/goods/detail/detail?goodsId={{goodItem.id}}">
    <image src="{{ goodItem.imageUrl }}" mode="widthFix" class="goods_img"/>
  <!-- 详细信息 -->
  <view class="goods_item_info">
    <!-- 商品名称 -->
    <text class="goods_item_info_name">{{ goodItem.name }}</text>
    <!-- 商品描述 -->
    <text class="goods_item_info_promo">{{ goodItem.floralLanguage }}</text>
    <!-- 商品价格 -->
    <view class="goods_item_info_bottom">
      <view class="goods_item_info_price">
        <text class="text">￥</text>{{ goodItem.price }}
      </view>
      <view class="goods_item_info_origin_price">
        <text class="text">￥</text>{{goodItem.marketPrice}}
      </view>
      <!-- 加入购物车图片 -->
      <view class="goods_item_info_btn">
        <image class="goods_image" src="/static/images/buybtn.png" mode=""/>
      </view>
    </view>
  </view>
  </navigator>
</view>

2.分类页面

<!--pages/category/category.wxml-->
<view>
  <view class="category-container">
    <!-- 左侧的滚动视图区域 -->
    <scroll-view class="category-left-view" scroll-y>
      <!-- active:被选中的内容 -->
      <view class="left-view-item {{ activeIndex === index ? 'active' : '' }}" wx:for="{{categoryList}}" wx:key="id" bindtap="updateAcitve" data-index="{{index}}">
        {{ item.name}}
      </view>
    </scroll-view>
    <!-- 右侧的滚动视图区域  -->
    <scroll-view class="category-right-view" scroll-y>
      <!-- 二级分类 -->
      <view class="test">
        <view wx:for="{{ 10 }}" wx:key="index" class="right-view-item">
          <navigator class="navigator" url="">
            <image class="" src="../../assets/images/cate-1.png" mode="" />
            <text class="goods_item_name">真情告白</text>
          </navigator>
        </view>
      </view>
    </scroll-view>
  </view>
</view>

3.购物车代码效果图

<!-- 购物车列表区域 -->

  <view class="carList-container">

    <view class="carList-container-cell">

      <van-swipe-cell right-width="{{ 65 }}" left-width="{{ 65 }}">

        <view slot="left" class="van-swipe-cell__left">选择</view>

        <van-cell-group>

          <view class="goods-info">

            <view class="left">

              <van-checkbox value="{{ false }}" checked-color="#e60017" bind:change="onChange">

              </van-checkbox>

            </view>

            <view class="mid">

              <image src="../../assets/images/floor-img.jpg" mode="" />

            </view>

            <view class="right">

              <view class="title">【11枝红玫瑰】买玫瑰送老婆</view>

              <view class="buy">

                <view class="price">¥99.00</view>

                <view class="buy-btn">

                  <van-stepper value="{{ 1 }}" bind:change="onChange" />

                </view>

              </view>

            </view>

          </view>

        </van-cell-group>

        <view slot="right" class="van-swipe-cell__right">删除</view>

      </van-swipe-cell>

    </view>

  </view>

  <!-- 提交订单栏区域 -->

  <van-submit-bar price="{{ 3050 }}" button-text="提交订单" bind:submit="onClickButton" tip="{{ true }}">

    <van-checkbox value="{{ true }}" checked-color="#e60017" bind:change="onChange">

      全选

    </van-checkbox>

  </van-submit-bar>

</view>

<!--pages/goods/goods.wxml-->
<view class="container">
  <!-- 商品大图 -->
  <view class="banner-img">
    <image src="../../assets/images/floor.jpg" mode="" />
  </view>
  <!-- 商品的基本信息 -->
  <view class="content">
    <!-- 商品标题 -->
    <view class="title">亲爱的/情人节网红款/19枝</view>
    <!-- 详细信息 -->
    <view class=" info">情⼈节新品情⼈节新品情⼈节新品情⼈节新品</view>
    <!-- 商品价格 -->
    <view class="price">
      <view class="price-num">￥299</view>
      <view class="price-origin-num">￥399</view>
    </view>
  </view>
  <!-- 商品的详细信息 -->
  <view class="detail">
    <image src="../../assets/images/floor-img.jpg" mode="" />
    <image src="../../assets/images/floor-img.jpg" mode="" />
    <image src="../../assets/images/floor-img.jpg" mode="" />
  </view>
  <!-- 商品的底部导航栏 -->
  <van-goods-action>
    <!-- 如果navigator标签跳转到tabber栏 则需要加open-type -->
    <navigator url="/pages/index/index" open-type="'switchTab">
      <van-goods-action-icon icon="wap-home-o" text="首页" />
    </navigator>
 
    <van-goods-action-icon icon="chat-o" text="客服" dot />
    <van-goods-action-icon icon="cart-o" text="购物车" info="5" />
    <van-goods-action-button text="加入购物车" type="warning" bind:tap="handelSheet" />
    <!-- handelSheel为点击按钮事件 -->
    <van-goods-action-button text="立即购买" bind:tap="handelSheet" />
  </van-goods-action>
  <!-- 自定义面板 -->
  <!-- bind:close为面板关闭事件 -->
  <van-action-sheet show="{{ show }}" bind:close="onClose"  position="bottom">
    <view class="sheet-container">
      <view class="img">
        <image src="../../assets/images/floor-img.jpg" mode="" />
      </view>
      <!-- 商品基本信息区域 -->
      <view class="baseInfo">
        <!-- 商品名称 -->
        <view class="title">亲爱的/情人节网红款/19支玫瑰</view>
        <!-- 商品价值区域 -->
        <view class="buy">
          <view class="price">
            <view class="symbol">￥</view>
            <view class="num">100</view>
          </view>
          <view class="buyBtn">
            <van-stepper value="{{1}}" bind:change="onChange" />
          </view>
        </view>
      </view>
    </view>
      <!-- 商品祝福语区域 -->
      <view class="textArea">
        <view class="title">祝福语</view>
        <textarea value="" placeholder="请输入你的祝福" class="box" />
      </view>
      <view class="btn">
        <van-button type="primary" round size="large">确定</van-button>
      </view>
  </van-action-sheet>
</view>

4.我的页面

代码

Page({

  /**

   * 页面的初始数据

   */

  data: {

    orderItem: [

      {

        url: '/pages/order/list/list',

        title: '商品订单',

        iconfont: 'icon-dingdan'

      },

      {

        url:'/pages/order/list/list',

        title:'礼品卡订单',

        iconfont:'icon-lipinka'

      },

      {

        url:'/pages/order/list/list',

        title:'退款/售后',

        iconfont:'icon-tuikuan'

      }

    ]

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad(options) {

  },

  /**

   * 生命周期函数--监听页面初次渲染完成

   */

  onReady() {

  },

  /**

   * 生命周期函数--监听页面显示

   */

  onShow() {

  },

  /**

   * 生命周期函数--监听页面隐藏

   */

  onHide() {

  },

  /**

   * 生命周期函数--监听页面卸载

   */

  onUnload() {

  },

  /**

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

   */

  onPullDownRefresh() {

  },

  /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom() {

  },

  /**

   * 用户点击右上角分享

   */

  onShareAppMessage() {

  }

})

.container {

  background-color: rgba(245, 242, 242, 0.692);

  height: 100vh;

  .top-show {

    width: 100%;

    height: 360rpx;

    .top-show-img {

      width: 100%;

      height: 100%;

    }

  }

  .bottom-show {

    position: relative;

    top: -80rpx;

    border-radius: 20rpx;

    margin: 0 auto;

    background-color: white;

    width: 96%;

    .user-container {

      display: flex;

      align-items: center;

      .avatar-container {

        margin: 20rpx;

        .avatar {

          height: 120rpx;

          width: 120rpx;

        }

      }

      .no-login {

        display: flex;

        flex-direction: column;

        font-size: 24rpx;

        color: gray;

        text:first-child {

          font-size: 35rpx;

        }

      }

    }

  }

  .order {

    border-radius: 20rpx;

    margin: 0 auto;

    background-color: white;

    width: 96%;

    margin-top: -70rpx;

    .order-title {

      display: flex;

      // justify-content: 设置主轴上的排列方式

      justify-content: space-between;

      padding: 40rpx;

      .more {

        font-size: 30rpx;

        color: #ccc;

      }

    }

    .order-content {

      display: flex;

      justify-content: space-evenly;

      text-align: center;

      padding-bottom: 24rpx;

      .iconfont {

        font-size: 60rpx

      }

      text {

        font-size: 26rpx;

      }

    }

  }

  .after-scale {

    border-radius: 20rpx;

    margin: 0 auto;

    margin: 20rpx;

    background-color: white;

    height: 30%;

    width: 96%;

    margin-bottom: 25rpx;

    .order-title-wrap {

      padding: 20rpx 0 0 20rpx;

    }

    .after-scale-item {

      display: flex;

      margin: 30rpx 20rpx;

      text {

        font-size: 25rpx;

        color: #999;

        margin-left: 20rpx;

      }

      .iconfont {

        color: #a2b364;

      }

    }

  }

  .info-footer {

    text-align: center;

    font-size: 30rpx;

    color: #999;

  }

}

<view class="container">

  <!-- 顶部展示图 -->

  <view class="top-show">

    <image src="../../assets/images/banner.jpg" mode="widthFix" class="top-show-img" />

  </view>

  <view class="bottom-show">

    <!-- 未登录面板 -->

    <view class="user-container">

      <view class="avatar-container">

        <image src="../../assets/images/avatar.png" mode="" class="avatar" />

      </view>

      <view class="no-login">

        <text>未登录</text>

        <text>点击授权登录</text>

      </view>

    </view>

    <!-- 已登录面板 -->

  </view>

  <!-- 订单面板 -->

  <view class="order">

    <view class="order-title">

      <text class="title">我的订单</text>

      <text class="more">查看更多></text>

    </view>

    <!-- 订单面板内容部分 -->

    <view class="order-content">

      <view class="order-content-item" wx:for="{{orderItem}}" wx:key="index">

        <!-- item指数组内的项 -->

        <navigator url="{{item.url}}">

          <view class="iconfont {{item.iconfont}}"></view>

          <text>{{item.title}}</text>

        </navigator>

      </view>

    </view>

  </view>

  <!-- 关于售前售后服务面板 -->

  <view class="after-scale section">

    <view class="order-title-wrap">

      <text class="title">关于售前售后服务</text>

    </view>

    <view class="after-scale-item">

      <view class="iconfont icon-kefufenxiermaikefu"></view>

      <text>可与小程序客服实时聊天或电话咨询</text>

    </view>

    <view class="after-scale-item">

      <view class="iconfont icon-shijian"></view>

      <text>小程序客服工作时间为: 8:30 ~ 20:30</text>

    </view>

    <view class="after-scale-item">

      <view class="iconfont icon-dizhiguanli"></view>

      <text>鲜花制作完毕情况下暂不支持退款</text>

    </view>

    <view class="after-scale-item">

      <view class="iconfont icon-zhangben"></view>

      <text>鲜花可以提前7-15天预订重大节假日不支持定时配送</text>

    </view>

  </view>

  <!-- 底部面板 -->

  <view class="info-footer">强哥股份有限公司</view>

</view>

5.总结

项目结构

慕尚花坊小程序采用了清晰的项目结构，主要包括以下几个部分：

  1. 页面：包含首页、分类页面、购物车页面、商品详情页面等。每个页面都对应了相应的.页面结构、页面样式和页面逻辑文件。
  2. 组件：为了提高代码的复用性，小程序中使用了大量的自定义组件，如导航栏、轮播图、商品列表等。

二、技术栈与特性

  1. 小程序原生开发：慕尚花坊小程序采用了微信小程序原生开发，充分利用了小程序框架提供的API和组件。
  2. 组件化开发：通过自定义组件，提高了代码的复用性和可维护性。
  3. 网络请求封装：对微信小程序的wx.request进行了封装，简化了网络请求的代码，提高了代码的健壮性。

三、代码实现细节

  1. 页面跳转与导航：
    • 使用了<navigator>组件进行声明式导航，通过url和open-type属性实现页面间的跳转。
  2. 分类页面实现：
    • 使用了<scroll-view>组件实现滚动视图，通过scroll-y属性设置垂直滚动。
  3. 购物车页面实现：
    • 使用了<view>组件结合wx:if、wx:for等指令实现购物车列表的展示。
  4. 商品详情页面实现：
    • 使用了<image>、<text>等组件展示商品的图片、名称、价格等信息。
    • 提供了加入购物车和立即购买的功能。

libai040720
关注
  • 25
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序笔记--数据库
m0_69287579的博客
08-25 2222
学习微信小程序 -- 数据库。
黑马微信小程序学习笔记
MissXu666的博客
11-30 1474
默认情况下，在小程序内安装的第三方的包，是安装在node_module目录内的，且安装完包后也是不能马上使用的，因为小程序比较特殊，它是无法直接读取node_module软件包的，那小程序该如何使用安装的包呢？需要注意的是：每安装一个新包，就需要重新构建npm一次，且在构建之前，为了防止出现一些不必要的未知错误，可以先把之前安装包后构建生成的miniprogram_npm目录删除，然后再点击构建npm重新生成；物理（设备）像素：真实存在的，物理硬件屏幕上的最小显示单元，屏幕的分辨率，像素越高越清晰。
微信小程序学习笔记
winnerFly的博客
08-20 2222
tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。底部 tabBar顶部 tabBartabBar 中只能配置最少 2 个、最多 5 个 tab 页签当渲染顶部 tabBar 时，不显示 icon，只显示文本。
微信小程序笔记-布局
ai5945fei的博客
11-03 803
普通模式->快速模式 在快速模式，大概200ms采集8个数据 快速模式->高精度模式 在高精度模式下，大概2s采集完8个数据
微信小程序笔记、小程序打印
weixin_49608678的博客
06-22 3028
一些关于小程序开发的笔记，还有小程序调用蓝牙打印机
微信小程序开发笔记—记事本
qq_45217381的博客
01-05 6793
本文介绍了如何实现记事本功能，有全部代码、详细设计思路以及踩坑点。
Java 微信小程序笔记 三、 微信小程序邀请码生成
柱子pg的博客
10-20 3825
一、微信邀请码生成： 一张二维码里面包含了一个Key值 就是这么简单 在测试生成二维码之前 请确保你的小程序已经通过微信审核并且上线 否则会报错 41030错误代码。生成的图片打不开 碎了 这个时候不要慌 将文件格式改为TXT可以查看错误信息 进行百度解决 二、上代码 开始前请参考博客微信笔记第一篇参数配置和对应工具类 @ApiOperation(value = "生成微信小程序码Url") @ApiOperationSupport(ignoreParameters = { "limit
微信小程序笔记功能（富文本editor功能）开发
IT_iosers的博客
10-26 783
原理：示例中只区分了ios 和安卓 并且keyboardHeight 时不显示工具栏 这里pc被当成了安卓 所以不显示。解决： 1、区分pc和手机端 2、pc端的工具栏一般放在顶部。
微信小程序笔记-列表循环的基本要点
qq_51766427的博客
03-21 1993
什么是微信小程序的列表循环？基本参数是什么？
credit-card-微信小程序笔记
05-29
在"credit-card-微信小程序笔记"中，我们可以推测这是关于在微信小程序中开发信用卡相关的功能或服务的教程。信用卡功能可能包括但不限于用户信用额度查询、消费记录查看、还款提醒、在线支付等。以下是一些可能涵盖...
微信小程序笔记期末复习
07-05
微信小程序笔记期末复习
微信小程序——云笔记（截图+源码）.zip
05-05
微信小程序——云笔记（截图+源码）.zip 微信小程序——云笔记（截图+源码）.zip 微信小程序——云笔记（截图+源码）.zip 微信小程序——云笔记（截图+源码）.zip 微信小程序——云笔记（截图+源码）.zip 微信小程序...
尚硅谷微信小程序课堂笔记.zip
07-02
尚硅谷微信小程序课堂笔记.zip
微信小程序笔记（黑马程序员）
05-26
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要针对移动端的场景，提供便捷的开发工具和丰富的API接口，让开发者能够快速构建应用于微信生态内的应用。它结合了前端开发技术，如HTML、CSS、JavaScript...
基于STM32设计的智能喂养系统(ESP8266+微信小程序)175
07-05 1235
本设计采用了STM32控制芯片作为核心，结合了多种传感器和模块，以实现自动化的喂养功能。其中包括1.44寸LCD彩色显示屏和按键模块用于显示和操作参数，28BYJ-48步进电机用于实现定量投食，ESP8266-WIFI模块用于远程控制和监测，蜂鸣器模块用于报警提示，H711称重传感器用于检测食物余量，DHT11环境温湿度传感器用于监测环境条件，水位传感器用于检测水位。
Java毕业设计 基于SSM vue图书管理系统小程序 微信小程序
最新发布
yinjl123的博客
07-10 679
管理员 登录 个人中心 修改密码 个人信息 用户管理 图书分类管理 图书信息管理 我的待还管理 图书归还管理 催还提醒管理 轮播图管理 系统公告管理 意见反馈管理 关于我们管理角色：用户 管理员大家可。
微信小程序 - 本地存储 增加有效期
觉醒法师的专栏
07-09 710
小程序的本地存储并没有明确的有效期设置，存储的数据在不超过限制的情况下，会一直保留。小程序提供的本地存储API没有明确设置有效期的功能。为了解决这个问题，我们需要在存储数据时附加一个expiration字段，用于记录数据的过期时间，在获取数据时，检查当前时间是否超过了expiration指定的时间，如果超过则认为数据已失效。由于此方法不是由小程序API直接支持的功能，而是通过检查数据的有效性来模拟有效期行为，小程序本地存储不会自动检查删除过期数据，需要在使用数据时检查数据的有效性。
uniapp vue3微信小程序如何获取dom元素
weixin_40323532的博客
07-10 410
第一种方式在vue2中是可以获取到的，但是在vue3 setup中是没有this的（需要通过getCurrentInstance方法获取当前组件实例），所以这种方式排除。上面这种方式，只适合在非子组件的情况下使用，如果当前组件时作为子组件，需要通过下面的方式。这是为了更好地管理组件实例，确保组件在不同环境中的正确渲染和状态管理。第二种方式在阅览器端是可以获取到的，但是在小程序端是获取不到的，所以这种方式也排除。因为在 Vue 3 中，子组件实例不再直接暴露给全局或者父组件，而是需要通过。
微信小程序开发教程大全-2022-6-18
06-28
下面是我对微信小程序开发的一些笔记，包括微信小程序的概述和新增属性等内容。这些笔记将帮助你更好地理解微信小程序开发的基本概念和技术要点，为你的实际开发工作提供指导和帮助。 微信小程序开发 - 1 微信小...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值