小程序代码笔记-CSDN博客

本文链接：https://blog.csdn.net/makabakaqqr/article/details/139348889

实例图

代码部分展示

1.1主页面(部分代码展示)

<view class="index-container">
  <!--首页背景图-->
  <view class="window-bgc"></view>

  <!-- 页面主体区域 -->
  <view class="container">

  <!-- bannerLit、categotyList是原本的data数据，{{ bannerList }}、{{ categotyList }}是从服务器获得的数据 -->
    <!-- 轮播图区域 -->
    <banner bannerList = "{{ bannerList }}" />

    <!-- 导航分类 -->
    <entrance  cateList = "{{ categotyList }}"/>

    <!-- 广告区域 -->
    <view class="adver">
      <view class="adver-left"> 
        <navigator url="/pages/goods/list/list?category2Id={{activeList[0].category2Id}}">
          <image src="{{ activeList[0].imageUrl}}" mode="widthFix" />
        </navigator>
      </view>

      <view class="adver-right">
        <view>
          <navigator url="/pages/goods/list/list?category2Id={{activeList[1].category2Id}}">
            <image src="{{ activeList[1].imageUrl}}" mode="widthFix" />
          </navigator>
        </view>
        <view>
          <navigator url="/pages/goods/list/list?category2Id={{activeList[2].category2Id}}">
            <image src="{{ activeList[2].imageUrl}}" mode="widthFix" />
          </navigator>
        </view>
      </view>
    </view>

    <!-- 商品列表 -->
    <goods-list title="猜你喜欢" list="{{guessList}}"></goods-list>
    <goods-list title="人气推荐" list="{{botList}}"></goods-list>
  </view>
</view>

1.2轮播图

<view class="swiper-box">
    <swiper autoplay class="swiper" indicator-active-color="#FF734C" interval="2000" duration="1000" indicator-color="rgba(0, 0, 0, .3)" bindchange="getSwiperIndex">
        <block wx:for="{{ bannerList }}" wx:key="index">
            <swiper-item class="swiper-item">
                <navigator class="navigator" url="/pages/goods/detail/detail?goodsId=id={{item.id}}">
                    <image class="img" src="{{ item.imageUrl }}"></image>
                </navigator>
            </swiper-item>
        </block>
    </swiper>

    <!-- 轮播图的面板指示点，因为面板指示点不支持，所以我们只能通过自定义结构的方式 -->
    <view class="indicator">
        <!-- active 类名：当前被激活的面板指示点颜色 -->
        <!-- rectangle 类名：默认的面板指示点颜色 -->
        <text wx:for="{{bannerList.length}}" wx:key="id" 
        class="{{ index  === activeIndex ? 'activerectangle': 'rectangle' }}"
        ></text>
    </view>
</view>

1.3商品列表(部分代码展示)

<view class="index-container">
  <!--首页背景图-->
  <view class="window-bgc"></view>

  <!-- 页面主体区域 -->
  <view class="container">

  <!-- bannerLit、categotyList是原本的data数据，{{ bannerList }}、{{ categotyList }}是从服务器获得的数据 -->
    <!-- 轮播图区域 -->
    <banner bannerList = "{{ bannerList }}" />

    <!-- 导航分类 -->
    <entrance  cateList = "{{ categotyList }}"/>

    <!-- 广告区域 -->
    <view class="adver">
      <view class="adver-left"> 
        <navigator url="/pages/goods/list/list?category2Id={{activeList[0].category2Id}}">
          <image src="{{ activeList[0].imageUrl}}" mode="widthFix" />
        </navigator>
      </view>

      <view class="adver-right">
        <view>
          <navigator url="/pages/goods/list/list?category2Id={{activeList[1].category2Id}}">
            <image src="{{ activeList[1].imageUrl}}" mode="widthFix" />
          </navigator>
        </view>
        <view>
          <navigator url="/pages/goods/list/list?category2Id={{activeList[2].category2Id}}">
            <image src="{{ activeList[2].imageUrl}}" mode="widthFix" />
          </navigator>
        </view>
      </view>
    </view>

    <!-- 商品列表 -->
    <goods-list title="猜你喜欢" list="{{guessList}}"></goods-list>
    <goods-list title="人气推荐" list="{{botList}}"></goods-list>
  </view>
</view>

1.4运用官方的goods-card插件完成分类页面

分类页面示例:

1.5购物车(部分代码展示)

<view class="container goods-detail">
  <!-- 商品大图 -->
  <view class="banner-img">
    <image class="img" src="/assets/images/floor-img.jpg" />
  </view>

  <!-- 商品的基本信息 -->
  <view class="content">
    <view class="price">
      <view class="price-num">¥299</view>
      <view class="price-origin-num">¥399</view>
    </view>
    <view class="title">亲爱的/情人节网红款/19枝亲爱的/情人节网红款</view>
    <view class="desc">用最温暖的最有情的心意，用最温暖的最有情的心意</view>
  </view>

  <!-- 商品的详细信息 -->
  <view class="detail">
    <image class="img" mode="widthFix" src="/assets/images/floor-img.jpg" />
    <image class="img" mode="widthFix" src="/assets/images/floor-img.jpg" />
    <image class="img" mode="widthFix" src="/assets/images/floor-img.jpg" />
  </view>

  <!-- 商品的底部商品导航 -->
  <van-goods-action>
    <navigator url="/pages/index/index" open-type="switchTab">
      <van-goods-action-icon icon="wap-home-o" text="首页" />
    </navigator>
    <navigator url="/pages/cart/cart" open-type="switchTab">
      <van-goods-action-icon icon="cart-o" text="购物车" info="{{ allCount }}" />
    </navigator>
    <van-goods-action-icon
      open-type="contact"
      icon="chat-o"
      text="客服"
      bind:click="onClickIcon"
    />
    <van-goods-action-button text="加入购物车" type="warning" bindtap="handleAddcart" />
    <van-goods-action-button text="立即购买" bindtap="handeGotoBuy" />
  </van-goods-action>

  <!-- 加入购物车、立即购买弹框 -->
  <!-- show 控制弹框的隐藏和展示 -->
  <!-- bind:close 点击关闭弹框时触发的回调 -->
  <van-action-sheet show="{{ show }}" sh>
    <view class="sheet-wrapper">
      <view class="goods-item">
        <!-- 需要购买的商品图片 -->
        <view class="mid">
          <image class="img" src="/assets/images/floor-img.jpg" />
        </view>

        <!-- 商品基本信息 -->
        <view class="right">
          <!-- 商品名字 -->
          <view class="title"> 亲爱的/情人节网红款/19枝 </view>
          <!-- 商品价格 -->
          <view class="buy">
            <view class="price">
              <view class="symbol">¥</view>
              <view class="num">100</view>
            </view>

            <!-- 步进器组件控制购买数量 -->
            <view class="buy-btn">
              <!-- Stepper 步进器，由增加按钮、减少按钮和输入框组成，控制购买数量 -->
              <van-stepper value="{{ count }}" bind:change="onChangeGoodsCount" />
            </view>
          </view>
        </view>
      </view>

      <!-- 祝福语输入框 -->
      <view class="time-wraper">
        <view class="title">祝福语</view>
        <textarea
          model:value="{{ blessing }}"
          bindinput="onTextAreaChange"
          class="form-textarea"
          placeholder="必填，写上您的祝福语，给心爱的他（她）送上你的祝福（请勿填写特殊符号或表情符号）"
          name="textarea"
        />
      </view>

      <!-- 确定按钮 -->
      <view class="sheet-footer-btn">
        <van-button block type="primary" round> 确定 </van-button>
      </view>
    </view>
  </van-action-sheet>
</view>

购物车展示图 :

1.6我的页面(部分代码展示)

<view class="container">
  <!-- 顶部展示图 -->
  <view class="top-show">
    <image
      mode="widthFix"
      class="top-show-img"
      src="/assets/images/banner.jpg"
    ></image>
  </view>

  <view class="bottom-show">
    <!-- 未登录面板 -->
    <view class="user-container section" bindtap="toLoginPage">
      <view class="avatar-container">
        <image src="/assets/images/avatar.png"></image>
        <view class="no-login">
          <text class="ellipsis">未登录</text>
          <text>点击授权登录</text>
        </view>
      </view>
    </view>

    <!-- 登录以后得面板 -->
    <!-- <view class="user-container section">
      <view class="avatar-container">
        <image src="/assets/images/avatar.png"></image>
        <view class="no-login">
          <text class="ellipsis">用户昵称</text>
        </view>
      </view>
      <view class="setting">
        <navigator url="/pages/settings/settings"> 设置 </navigator>
      </view>
    </view> -->

    <!-- 订单面板 -->
    <view class="order section">
      <view class="order-title-wrap">
        <text class="title">我的订单</text>
        <text class="more">查看更多></text>
      </view>

      <view class="order-content-wrap">
        <view class="order-content-item" wx:for="{{ initpanel }}">
          <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>
</view>

页面示例图:

补充:

解构赋值：解构赋值是ECMAScript 6（ES6）引入的一种表达式，它允许我们将数组或对象的属性值直接提取到不同的变量中。这是一种将数据结构分解为更小、更易于管理的部分，并将这些部分赋值给变量的方法。
解构赋值不仅提高了代码的可读性和可维护性，还使得数据操作变得更加直观和高效。它避免了使用诸如索引或属性名来逐个访问数组或对象元素的繁琐过程，从而简化了代码。
三元表达式：三元表达式是一种条件表达式，其基本语法如下：条件 ? 表达式1 : 表达式2。它的含义是：如果条件为真，则返回表达式1的值；如果条件为假，则返回表达式2的值。
在编程中，三元表达式允许将if-else块写到一行或一个表达式中，可以简洁地表示一个简单的条件判断，并且可以直接在赋值语句中使用，从而提高代码的可读性和简洁性。
此外，三元表达式还可以嵌套使用，以便进行更复杂的条件选择。不过，在使用三元表达式时，需要注意对产生一个值的正确理解，以及逗号表达式的写法。
样式优先级：样式的优先级在CSS中是一个重要的概念，它决定了当多个样式规则应用到同一个元素时，哪个规则会最终生效。CSS样式的优先规则可以分为以下几个层次：
!important规则：无论引入方式是什么，选择器是什么，使用!important声明的样式具有最高的优先级，会覆盖其他所有的样式。
内联样式：直接在HTML元素的style属性中指定的样式具有次高优先级，会覆盖其他非!important的样式。
ID选择器：通过在CSS中使用'#'来定义的ID选择器，具有比类选择器和标签选择器更高的优先级。
类选择器和属性选择器：通过在CSS中使用'.'来定义的类选择器和使用'[]'来定义的属性选择器，具有比标签选择器更高的优先级。
标签选择器：通过在CSS中直接使用标签名定义的样式，具有较低的优先级。
通配符选择器和子选择器：通过使用'*'定义的通配符选择器和使用'>'定义的子选择器，具有较低的优先级。
继承：一些属性可以从父元素继承，如字体、颜色等，但是继承的样式优先级较低，通常会被其他更具体的样式规则所覆盖。
当多个规则具有相同的优先级时，CSS会按照它们在样式表中的顺序来决定哪个规则生效。后出现的规则会覆盖先出现的规则。
需要注意的是，样式规则的优先级不仅取决于选择器的类型，还取决于选择器的特殊性（specificity）。特殊性值越大的声明优先级越高。特殊性值的计算考虑了选择器中包含的ID选择器、类选择器、标签选择器和伪类的数量。
在解决CSS优先级问题时，可以通过以下方法：
适当使用!important属性，但要避免滥用。
给样式指定权重，使用font-weight等属性。
在结构上解决问题，避免样式的混乱和权重的冲突。
利用层级和嵌套，让内部的样式覆盖外部的样式。
避免使用复合选择器，以减少样式权重的重复。
监听属性 watch
例：
watch: {
//正常写法
isHot: {
handler(newValue, oldValue) {
console.log('isHot被修改了', newValue, oldValue)
}
},
//简写
isHot(newValue, oldValue) {
console.log('isHot被修改了', newValue, oldValue, this)
}
}
深度监听
watch默认只监听对象一层
在watch中配置deep:true可以监测对象内部值的改变（多层）
bindchange是一个小程序中的事件绑定属性，用于监听某个组件的变化事件。当该组件的状态发生变化时，绑定在bindchange上的事件函数将被触发执行。
例如，可以在一个input组件上使用bindchange属性绑定一个函数，当用户在输入框中输入内容并且内容发生变化时，该函数就会被调用。
通常情况下，bindchange的使用场景包括但不限于表单输入、选择器的选中状态等需要监听变化的组件。