微信小程序（3.常用样式和组件）

于 2024-06-04 09:00:00 发布
阅读量835 收藏 28
点赞数 22
分类专栏： 微信小程序 文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43048957/article/details/139416759
版权

系列文章目录

微信小程序（1.基础知识）
微信小程序（2.配置文件）
微信小程序（3.常用样式和组件）

文章目录

1. 组件和样式介绍

在开 Web 网站的时候：

页面的结构由 HTML 进行编写，例如：经常会用到 div、p、 span、img、a 等标签

页面的样式由 CSS 进行编写，例如：经常会采用 .class 、#id 、element 等选择器

但在小程序中不能使用 HTML 标签，也就没有 DOM 和 BOM，同时仅仅支持部分 CSS选择器

不过不用担心，小程序中提供了同样的角色：

其中 WXML 充当的就是类似 HTML 的角色，只不过在 WXML 中没有div、p、 span、img、a 等标签，在 WXML 中需要使用 小程序提供的 view、text 、image、navigator 等标签来构建页面结构，小程序提供的这些标签，我们称为 “组件”，开发者可以通过组合这些基础组件进行快速开发。

WXSS 则充当的就是类似 CSS 的角色，WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改，新增了尺寸单位 rpx、提供了全局的样式和局部样式，另外需要注意的是WXSS 仅支持部分 CSS 选择器。

小程序给提供的组件文档：WXML

小程序样式官方文档：WXSS


2. 样式-尺寸单位


随着智能手机的发展，手机设备的宽度也逐渐多元化，这就需要开发者在开发的时候，需要适配不同屏幕宽度的手机。为了解决屏幕适配的问题，微信小程序推出了 rpx 单位

小程序运行在手机移动端，宿主环境是微信，因为手机尺寸的不一致，在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，会采用一些技巧来算像素单位从而实现页面的适配。而 WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可。

rpx : 小程序新增的拓展单位，可以根据屏幕宽度进行自适应，小程序规定任何型号手机：屏幕宽都为 750 rpx。

📌 注意事项：
​ 小程序规定任何型号手机：屏幕宽都为 750 rpx

🔔 开发建议：
​ 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
​ iPhone6 的设计稿一般是 750px，小程序的宽是 750rpx
​ 在我们开发小程序页面时，量取多少 px ，直接写多少 rpx，开发起来更方便，也能够适配屏幕的适配


​ 原因：
​ 设计稿宽度是 750px，而 iPhone6 的手机设备宽度是 375px， 设计稿想完整展示到手机中，就需要缩小一倍
​ 在 iPhone6 下，px 和 rpx 的换算关系是：1rpx = 0.5px， 750rpx = 375px，刚好能够填充满整个屏幕的宽度

落地代码：

➡️ pages/index/index.wxml

<!-- 需求：绘制一个盒子，让盒子的宽度占据屏幕的一半 -->

<!-- view 是小程序提供的组件，是容器组件，类似于 div，也是一个块级元素，占据一行 -->
<!-- 如果想实现需求，不能使用 px，px 使固定单位，不能实现自适应，需要使用小程序提供的 rpx  -->
<!-- 微信小程序规定，不管是什么型号的手机，屏幕的宽度都是 750rpx -->
<!-- rpx 单位能够实现自适应的 -->
<view class="box">尚硅谷</view>

➡️ pages/index/index.wxss

/* 通过演示使用 css 作为单位，px 是不具有响应式的 */

/* image {
  width: 375px;
  height: 600px;
  background-color: lightgreen;
} */

.box {
  width: 375rpx;
  height: 600rpx;
  background-color: lightgreen;
}

3. 样式-全局样式和局部样式


在进行网页开发时，我们经常创建 global.css、base.css 或者 reset.css 作为全局样式文件进行重置样式或者样式统一，然后在每个页面或组件中写当前页面或组件的局部样式，小程序中也存在全局样式和局部样式，这一节我们来学习一下小程序中的全局样式和局部样式

知识点：

全局样式：指在 app.wxss中定义的样式规则，作用于每一个页面，例如：设置字号、背景色、宽高等全局样式

局部样式：指在page.wxss中定义的样式规则，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

案例：

在 app.wxss 中定义全局样式，设置 text 组件的颜色以及字号大小，这段样式将会作用于任意页面的 text 组件

/* app.wxss */

text {
  color: lightseagreen;
  font-size: 50rpx;
}

然后在 cate.wxss 中定义局部样式，设置 text 组件的颜色以及字号大小，会发现局部样式将全局样式进行了覆盖

/* pages/index/index.wxss */

text {
  color: red;
  font-size: 30rpx;
}

4. 划分页面结构-view 组件

在这里插入图片描述

使用小程序常用的组件实现项目首页的效果，会使用以下组件：

  1. view 组件
  2. text 组件
  3. image 组件
  4. navigator 组件
  5. swiper 和 swiper-item 组件
  6. scroll-view 组件
  7. 字体图标

分析页面结构，使用 view 组件将页面拆分成 4 个区域

view 是小程序提供的组件，是容器组件，类似于 div，也是一个块级元素，占据一行

<!-- 轮播图区域 -->
<view class="swiper">1</view>

<!-- 公司相关信息 -->
<view class="info">2</view>

<!-- 商品导航区域 -->
<view class="goods-nav">3</view>

<!-- 商品推荐区域 -->
<view class="hot">4</view>

5. 首页轮播图区域-swiper 组件


在前面我们已经介绍了小程序的组件应该怎么使用，又学习了小程序中的样式，接下来带着大家使用小程序提供的组件，完成小程序的基本结构，通过这个案例我们能够学习到小程序常用的组件以及一些布局技巧。

知识点：

在进行网页开发的时候，实现轮播图的时候，我们通常先使用 HTML 、CSS 实现轮播图的样式结构，然后使用 JS 控制轮播图的效果，或者直接使用插件实现轮播图的功能，而在小程序中实现小程序功能则相对简单很多。

在小程序中，提供了 swiper 和 swiper-item 组件实现轮播图：

  1. swiper：滑块视图容器，常用来实现轮播图，其中只可放置 swiper-item 组件，否则会导致未定义的行为
  2. swiper-item：仅可放置在swiper组件中，宽高自动设置为100%，代表 swiper 中的每一项

我们可以使用 swiper 组件提供的属性，实现轮播图的订制，常见属性如下：

属性说明类型
indicator-dots是否显示面板指示点boolean (默认 false)
indicator-color指示点颜色color (默认：rgba(0, 0, 0, .3))
indicator-active-color当前选中的指示点颜色color (默认：#000000)
autoplay是否自动切换boolean (默认 false)
interval自动切换时间间隔number (默认 5000)
circular是否采用衔接滑动boolean (默认 false)
其他属性…

落地代码：

➡️ pages/index/index.wxml

<!-- 轮播图区域 -->
<view class="swiper">
  <!-- swiper 组件实现轮播图区域的绘制 -->
  <!-- swiper 组件，滑块视图容器 -->
  <swiper
    circular
    autoplay
    indicator-dots
    interval="2000"
    indicator-color="#efefef"
    indicator-active-color="#ccc"
  >
    <!-- swiper 组件内部不能写其他组件或内容 -->
    <!-- 在 swiper 组件内部只能写 swiper-item 组件 -->
    <!-- swiper-item 组件只能放到 swiper 组件中，宽高自动设置为 100% -->
    <swiper-item>
      第一张轮播图
    </swiper-item>

    <swiper-item>
      第二张轮播图
    </swiper-item>

    <swiper-item>
      第三张轮播图
    </swiper-item>
  </swiper>
</view>

➡️ pages/index/index.scss

page {
  height: 100vh;
  background-color: #efefef !important;
}

swiper {
  swiper-item {

    // 在 Sass 拓展语言中，& 符号表示父选择器的引用。它用于在嵌套的选择器中引用父选择器
    // 下面这段代码在编译以后，生成的代码是 swiper-item:first-child
    &:first-child {
      background-color: skyblue;
    }

    &:nth-child(2) {
      background-color: lightcoral;
    }

    &:last-child {
      background-color: lightseagreen;
    }
  }
}

6. 首页轮播图区域-image 组件


在这一节中，我们开始来学习小程序中的image组件，通过学习该组件掌握组件的学习方法和使用技巧

在小程序中没有 img 标签，添加图片需要使用小程序提供的image组件，image组件的语法如下：

<!-- src：图片资源地址 -->
<!-- mode：图片裁剪、缩放的模式 -->
<!-- lazy-load：图片懒加载，在即将进入一定范围（上下三屏）时才开始加载 -->
<image src="/assets/tom.png" mode="heightFix" lazy-load=”{{ true }}“ />

落地代码

➡️ pages/index/index.wxml

<!-- 轮播图区域 -->
<view class="swiper">
  <swiper
    circular
    autoplay
    indicator-dots
    interval="2000"
    indicator-color="#efefef"
    indicator-active-color="#ccc"
  >
    <swiper-item>
      <!-- 在小程序中图片不能使用 img 标签，使用后不会生效 -->
      <!-- <img src="../../assets/banner/banner-1.png" alt=""/> -->

      <!-- 需要使用 images 组件 -->
      <!-- image 组件不给 src 属性设置默认值，也占据宽和高 -->
      <!-- image 默认具有宽度，宽是 320px 高度是 240px -->

      <!-- mode 属性：用来设置图片的裁切模式、纵横比例、显示的位置 -->
      <!-- show-menu-by-longpress 属性：长按转发给朋友、收藏、保存图片 -->
      <image src="../../assets/banner/banner-1.png" mode="aspectFill" show-menu-by-longpress />
    </swiper-item>

    <swiper-item>
      <image src="../../assets/banner/banner-2.png" />
    </swiper-item>

    <swiper-item>
      <image src="../../assets/banner/banner-3.png" />
    </swiper-item>
  </swiper>
</view>

➡️ pages/index/index.scss

/** index.wxss **/
page {
  height: 100vh;
  background-color: #efefef !important;
}

swiper {
  height: 360rpx;

  swiper-item {
    image {
      width: 100%;
      height: 100%;
    }

    // 在 Sass 拓展语言中，& 符号表示父选择器的引用。它用于在嵌套的选择器中引用父选择器
    // 下面这段代码在编译以后，生成的代码是 swiper-item:first-child
    // &:first-child {
    //   background-color: skyblue;
    // }

    // &:nth-child(2) {
    //   background-color: lightcoral;
    // }

    // &:last-child {
    //   background-color: lightseagreen;
    // }
  }
}

7. 公司宣传语区域-text 组件

在这里插入图片描述

落地代码：

➡️ pages/index/index.wxml

<!-- 公司相关信息 -->
<view class="info">
  <!-- text 是文本组件，类似于 span，是行内元素 -->

  <!-- user-select：文本是否可选 -->
  <!-- space：是否连续展示空格 -->
  <!-- <text user-select space="ensp">同城        配送</text> -->

  <text>同城配送</text>
  <text>行业龙头</text>
  <text>半小时送达</text>
  <text>100% 好评</text>
</view>

➡️ pages/index/index.scss

.info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16rpx 0rpx;
  padding: 20rpx;
  font-size: 24rpx;
  background-color: #fff;
  border-radius: 10rpx;
}

8. 商品导航的区域-组件结合使用


到目前为止我们已经学习了 view 、text、image 以及 swiper 和 swiper-item组件的使用

接下来我们继续来使用小程序提供的组件实现首页的功能，这节我们需要实现的是商品导航区域的结构

知识点：
在这里插入图片描述

在网页开发中，实现该布局非常简单，使用 div 嵌套 或者 ul 包裹住 li，li 在包裹住 img 就能够实现该效果

但在小程序中没有 HTML 中的 div、ul、li 标签，所以绘制导航区域需要使用小程序提供的的组件，我们先来学习小程序的两个组件：

  1. view：视图容器组件，相当于 HTML 中的 div，是一个块级元素，独占一行
  2. text：文本组件，相当于 span，是一个行内元素

落地代码：

➡️ pages/index/index.wxml

<!-- view：视图容器，作用类似于 div，是一个块级元素，独占一行 -->
<view class="navs">
  <view>
    <!-- text：文本组件，类似于 span，是一个行内元素 -->
    <image src="/assets/cate-1.png" alt=""/>
    <text>爱礼精选</text>
  </view>
  <view>
    <image src="/assets/cate-2.png" alt=""/>
    <text>鲜花玫瑰</text>
  </view>
  <view>
    <image src="/assets/cate-3.png" alt=""/>
    <text>永生玫瑰</text>
  </view>
  <view>
    <image src="/assets/cate-4.png" alt=""/>
    <text>玫瑰珠宝</text>
  </view>
  <view>
    <image src="/assets/cate-5.png" alt=""/>
    <text>香水护体</text>
  </view>
</view>

➡️ pages/index/index.wxss

// 商品导航区域
.good-nav {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 20rpx 16rpx;
  border-radius: 10rpx;

  view {
    display: flex;
    flex-direction: column;
    align-items: center;

    image {
      width: 80rpx;
      height: 80rpx;
    }

    text {
      font-size: 24rpx;
      margin-top: 12rpx;
    }
  }
}

9. 跳转到商品列表页面-navigator


知识点：

点击商品导航区域，需要跳转到商品列表界面，在网页开发中，如果想实现页面的跳转需要使用 a 标签，在小程序中如果想实现页面的跳转则需要使用 navigator 组件，语法如下：

<!-- url：当前小程序内的跳转链接 --> 
<navigator url="/pages/list/list">

在小程序中，如果需要进行跳转，需要使用 navigation 组件，常用的属性有 2 个：

  1. url ：当前小程序内的跳转链接

  2. open-type ：跳转方式

    • navigate：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
    • redirect： 关闭当前页面，跳转到应用内的某个页面。但不能跳转到 tabbar 页面
    • switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
    • reLaunch：关闭所有页面，打开到应用内的某个页面
    • navigateBack：关闭当前页面，返回上一页面或多级页面

📌 注意事项：

  1. 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔
    例如：/list?id=10&name=hua，在 onLoad(options) 生命周期函数 中获取传递的参数

  2. 属性 open-type="switchTab" 时不支持传参

落地代码：

➡️ pages/index/index.wxml ： 调整 view 为 navigator

<!-- view：视图容器，作用类似于 div，是一个块级元素，独占一行 -->
<view class="navs">
  <navigator url="/pages/list/list">
    <!-- text：文本组件，类似于 span，是一个行内元素 -->
    <image src="/assets/cate-1.png" alt=""/>
    <text>爱礼精选</text>
  </navigator>
  <navigator url="/pages/list/list">
    <image src="/assets/cate-2.png" alt=""/>
    <text>鲜花玫瑰</text>
  </navigator>
  <navigator url="/pages/list/list">
    <image src="/assets/cate-3.png" alt=""/>
    <text>永生玫瑰</text>
  </navigator>
  <navigator url="/pages/list/list">
    <image src="/assets/cate-4.png" alt=""/>
    <text>玫瑰珠宝</text>
  </navigator>
  <navigator url="/pages/list/list">
    <image src="/assets/cate-5.png" alt=""/>
    <text>香水护体</text>
  </navigator>
</view>

➡️ pages/index/index.wxss：

// 商品导航区域
.good-nav {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 20rpx 16rpx;
  border-radius: 10rpx;

  view {
+    navigator {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }

    image {
      width: 80rpx;
      height: 80rpx;
    }

    text {
      font-size: 24rpx;
      margin-top: 12rpx;
    }
  }
}

10. 商品推荐区域-scroll-view


可滚动视图区域，适用于需要滚动展示内的场景，它可以在小程序中实现类似于网页中的滚动条效果，用户可以通过手指滑动或者点击滚动条来滚动内容，scroll-view 组件可以设置滚动方向、滚动条样式、滚动到顶部或底部时的回调函数等属性，可以根据实际需求进行灵活配置。
在这里插入图片描述

10.1 scroll-view 横向滚动

知识点：

使用横向滚动时，需要添加 scroll-x 属性，然后通过 css 进行结构绘制，实现页面横向滚动

落地代码：

➡️ pages/index/index.wxml：

<!-- 商品推荐区域 -->
<view class="hot">
  <scroll-view class="scroll-x" scroll-x>
    <view>1</view>
    <view>2</view>
    <view>3</view>
  </scroll-view>
</view>

➡️ pages/index/index.wxss：

.hot {
  margin-top: 16rpx;

  .scroll-x {
    width: 100%;
    white-space: nowrap;
    background-color: lightblue;

    view{
      display: inline-block;
      width: 50%;
      height: 80rpx;

      &:last-child{
        background-color: lightseagreen;
      }

      &:first-child{
        background-color: lightpink;
      }
    } 
  }
}

10.2 scroll-view 纵向滚动

知识点：

使用竖向滚动时，需要给scroll-view一个固定高度，同时添加 scroll-y 属性，实现页面纵向滚动
在这里插入图片描述

落地代码：

➡️ pages/index/index.wxml：

<!-- 商品推荐区域 -->
<view class="hot">
  <scroll-view class="scroll-x" scroll-x>
    <view>1</view>
    <view>2</view>
    <view>3</view>
  </scroll-view>

  <scroll-view class="scroll-y" scroll-y>
    <view>1</view>
    <view>2</view>
    <view>3</view>
  </scroll-view>
</view>

➡️ pages/index/index.wxss：

.hot {
  margin-top: 16rpx;

  .scroll-x {
    width: 100%;
    white-space: nowrap;
    background-color: lightblue;

    view{
      display: inline-block;
      width: 50%;
      height: 80rpx;

      &:last-child{
        background-color: lightseagreen;
      }

      &:first-child{
        background-color: lightcoral;
      }
    } 
  }

+  .scroll-y {
+    height: 400rpx;
+    background-color: lightsalmon;
+    margin-top: 60rpx;
+
+    view {
+      height: 400rpx;
+
+      &:nth-child(odd) {
+        background-color: lightseagreen;
+      }
+
+      &:nth-child(even) {
+        background-color: lightcoral;
+      }
+    }  
+  }
}

10.3 实现商品推荐区域横向滚动

落地代码

➡️ pages/index/index.wxml：

<!-- 推荐商品 -->
<view class="good-hot">
  <scroll-view scroll-x class="scroll-x">
    
    <view>
      <view class="good-item">
        <image src="../../assets/floor/1.png" mode=""/>
        <text>鲜花玫瑰</text>
        <text>66</text>
      </view>
    </view>

    <view>
      <view class="good-item">
        <image src="../../assets/floor/2.png" mode=""/>
        <text>鲜花玫瑰</text>
        <text>77</text>
      </view>
    </view>

    <view>
      <view class="good-item">
        <image src="../../assets/floor/3.png" mode=""/>
        <text>鲜花玫瑰</text>
        <text>88</text>
      </view>
    </view>

    <view>
      <view class="good-item">
        <image src="../../assets/floor/4.png" mode=""/>
        <text>鲜花玫瑰</text>
        <text>99</text>
      </view>
    </view>

    <view>
      <view class="good-item">
        <image src="../../assets/floor/5.png" mode=""/>
        <text>鲜花玫瑰</text>
        <text>100</text>
      </view>
    </view>

  </scroll-view>
</view>

➡️ pages/index/index.wxss：

// 推荐商品区域
.good-hot {
  background-color: #fff;
  padding: 16rpx;
  border-radius: 10rpx;
  font-size: 24rpx;

  .scroll-x {
    width: 100%;
    white-space: nowrap;

    view {
      display: inline-block;
      width: 320rpx;
      height: 440rpx;
      margin-right: 16rpx;

      .good-item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        text {
          &:nth-of-type(1) {
            font-weight: bold;
          }
        }
      }

      image {
        width: 100%;
        height: 320rpx;
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }
}

11. 字体图标的使用


在项目中使用到的小图标，一般由公司设计师进行设计，如果如果自行设计这些图标会比较麻烦且耗费时间，这时候我们就可以使用到阿里巴巴矢量图库，设计好以后上传到阿里巴巴矢量图标库，然后方便程序员来进行使用。
在这里插入图片描述

阿里巴巴矢量图库是阿里巴巴集团推出的一个免费的矢量图标库和图标管理工具。它汇集了大量的精美图标资源，包括品牌图标和各种主题和分类的图标。用户可以在阿里巴巴矢量图库中搜索和浏览所需的图标，也可以上传和管理自己的图标资源。

小程序中的字体图标使用方式与 Web 开发中的使用方式是一样的。

首先我们先找到所需的图标，加入到项目库，进入项目库中生成链接。也快将字体图标库下载到本地

在这里插入图片描述

点击链接，会将生成的 CSS 在新的链接页面进行打开，ctrl + s，将该文件重命名为.wxss 后缀名，然后保存到项目根目录下的static 文件夹下。

在这里插入图片描述

在全局样式文件app.wxss中导入fonts.wxss字体图标文件，然后获取到图标类名，在项目中使用即可，应用于页面

@import "./static/fonts.wxss";

<view class="myTest">
  <view class="iconfont icon-tuikuan"></view>
</view>

注意：使用字体图标可能会报错：

[渲染层网络层错误] Failed to load font http://at.alicdn.com/t/c/font_3946178_q5oidsl5xo.woff2?t=1680795910637 net::ERR_CACHE_MISS (env: Windows,mp,1.06.2303220; lib: 2.30.4)

该错误可忽略，详见下面这个链接：

https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html

但在控制台出现错误，会影响开发调试，解决方案是：将字体图标转换成 base64 的格式

落地代码：

➡️ app.wxss：

// 在导入样式文件以后，必须以分号结尾，否则会出现异常

@import "./iconfont/iconfont.scss";

➡️ pages/index/index.wxml：

<!-- 公司信息 -->
<view class="info">
  <text><text class="iconfont icon-ps"></text> 同城配送</text>
  <text><text class="iconfont icon-lx"></text> 行业龙头</text>
  <text><text class="iconfont icon-time"></text> 半小时送达</text>
  <text><text class="iconfont icon-hp"></text> 100% 好评</text>
</view>

➡️ pages/index/index.wxss：

// 公司信息区域
.info {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 20rpx 16rpx;
  border-radius: 10rpx;
  font-size: 24rpx;

+   .iconfont {
+     font-size: 24rpx;
+   }
}

12. 背景图片的使用


注：提供的网络地址连接：

  1. http://8.131.91.46:6677/bgimage.png
  2. http://8.131.91.46:6677/TomAndJerry.jpg

当编写小程序的样式文件时，我们可以使用 background-image 属性来设置一个元素的背景图像，但是小程序的 background-image 不支持本地路径。

<view class="image"></view>

.image {
  background-image: url('../../static/微信.jpg');
}

在这里插入图片描述

如图，在使用了本地资源图片以后，微信开发者工具提供的提示：

本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用<image/>标签

.image {
  width: 100%;
  height: 400rpx;
  /* 本地资源图片无法通过 WXSS 获取 */
  /* background-image: url('../../static/微信.jpg'); */

  /* 使用网络图片 */
  /* background-image: url('http://8.131.91.46:6677/TomAndJerry.jpg'); */
    
  /* 使用 base64 格式展示图片 */
  /* base64 编码的文件很长，这个地址老师在这边进行了简写，在测试的时候，需要自己将这里转成完成的 64 编码 */
  background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAeAB4AAD/.....")
  background-position: center;
  background-size: cover;

}

在这里插入图片描述

阿moments
关注
  • 22
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
猫眼微信小程序源码.zip
07-13
3. WXSS（WeiXin Style Sheet）：这是微信小程序的样式表语言，基于CSS，但有一些扩展特性。猫眼小程序的WXSS文件中，可能会运用到各种布局方式（如Flex布局）以及样式动画，以实现精致的UI设计和流畅的用户体验。 ...
微信聊天微信小程序源码.zip
07-13
微信小程序采用组件化和模块化的开发方式，类似于React或Vue.js。它的核心包括WXML（WeiXin Markup Language）用于描述页面结构，WXSS（WeiXin Style Sheets）负责样式设计，而JS（JavaScript）则处理逻辑和数据绑定...
微信小程序界面设计-样式入门到精通
01-10
讲解微信小程序中样式的入门使用，如何使用传统的css知识点来开发wxss的样式
微信小程序 --- 常用样式和组件
最新发布
每天都要努力学习哦~~
02-26 1613
在开 Web 网站的时候：页面的结构由HTML进行编写，例如：经常会用到divpspanimga等标签页面的样式由CSS进行编写，例如：经常会采用.class#idelement等选择器但在小程序中不能使用HTML标签，也就没有DOM和BOM，同时仅仅支持部分CSS选择器不过不用担心，小程序中提供了同样的角色：其中WXML充当的就是类似HTML的角色，只不过在WXML中没有divpspanimga等标签，在WXML中需要使用 小程序提供的viewtextimagenavigator。
【微信小程序】基础篇 -- WXSS 模板样式- 全局样式和局部样式（十四）
JMFive的博客
03-01 2926
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第14篇文章;今天开始学习微信小程序的第八天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。
【微信小程序创作之路】- 小程序常用页面样式
ProGram_Java521的博客
07-11 2074
本章节主要讲解，小程序中常用样式，涉及到WXML和WXSS文件。例如：页面布局、整体样式、按钮、图片轮播、条件渲染（wx:if wx:for）等。阮一峰老师和小白白大佬的博客，下一章我们讲解JSON文件配置小程序导航栏信息等。🍉🍉🍉rpx单位。
微信小程序的几种常见的样式写法
m0_72168336的博客
11-29 932
<text class="test1">这是一段文字</text>
校内网微信小程序源码.rar
07-13
3. **pages**: 这个目录包含了小程序的所有页面，每个页面都有自己的js、json、wxml（微信小程序的XML类似语法）和wxss（微信小程序的CSS样式）文件，分别对应逻辑处理、页面配置、结构文件和样式文件。 4. **utils...
班夫旅游小程序微信小程序源码.rar
07-13
【标题】"班夫旅游小程序微信小程序源码.rar" 提供的是一个用于开发微信小程序的源代码包，其中包含了构建一个以班夫旅游为主题的微信小程序所需的所有关键组件和资源。这个源码包可以帮助开发者快速搭建一个展示班...
饿了吗微信小程序源码.zip
07-13
"饿了吗微信小程序源码.zip" ...以上是对"饿了吗微信小程序源码.zip"可能包含的知识点的详细介绍，开发者通过学习和研究这个源码，可以深入了解微信小程序的开发流程和技术要点，同时也可以借鉴其设计思路和最佳实践。
【微信小程序】全局样式、局部样式、全局配置
苏凉.py的博客
07-24 5013
🐚作者简介苏凉（专注于网络爬虫，数据分析，正在学习前端的路上）👑名言警句海阔凭鱼跃，天高任鸟飞。📰要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！
微信小程序新手入门教程四：样式设计
Liu_y_xin的博客
02-07 3027
WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式，决定了 WXML 的组件会怎么显示。WXSS 具有 CSS 大部分特性，同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。与 CSS 相比，WXSS 扩展的特性主要包括和。
微信小程序–样式
无知者无畏
06-20 361
微信小程序–样式 1.布局小技巧 1.1 通过添加空标签，实现内容之间的间隔 <view class='height_20'></view> .height_20{ height: 20px; } 1.2 实现下划线 <view class='height_1 gray'></view> .gray{ background-color: #F0F0F0; } .height_1{ height: 1px; } 1.3 用一个空盒子，
小程序----页面样式（WXSS）
emmmm.....
04-26 2041
1 WXSS 2 WXSS 和 CSS 的关系 3 rpx 3.1 rpx 尺寸单位 3.2 rpx 的实现原理 3.3 rpx 与 px 之间的单位换算 更换模拟器的机型 4 样式导入 4.1 样式导入 4.2 @import 的语法格式 页面结构和数据 外联样式表 导入外部样式表 5 全局样式 list页面 index.wxml 全局样式表 设置全局样式表之后页面的样式 6 局部样式 权重相同，按照就近原则 权重不同，样式为权重大的样式
微信小程序——WXSS模板样式，rpx，样式导入，全局样式和局部样式,全局配置-window
WZY22502701的博客
01-13 3777
微信小程序——WXSS模板样式，rpx，样式导入，全局样式和局部样式,全局配置-window
【微信小程序】WXSS样式
MrsBaek的博客
07-12 1052
这些基本的选择器在WXSS中提供了基本的样式选择能力，可以根据元素的类型、类名、ID和状态来选择元素并应用样式。需要注意的是，相比CSS，WXSS的选择器支持范围较小，不支持复杂的选择器如后代选择器、子选择器、属性选择器等。而WXSS仅支持基本的选择器，如元素选择器和类选择器，不支持ID选择器和属性选择器。只在微信小程序中有效，在Web开发中并不支持该单位，因此在使用其他前端框架或开发Web页面时，需要使用其他适合的尺寸单位，如像素（px）、百分比（%）等。，它会被等比例换算成屏幕上的物理像素。
微信小程序之WXSS模板样式、页面配置（.json）和网络数据请求
哥的时代，为你保驾护航
01-23 2281
一、WXSS 模板样式1、什么是 WXSS2、WXSS 和 CSS 的关系二、WXSS 模板样式 - rpx1、什么是 rpx 尺寸单位2、rpx 的实现原理3、rpx 与 px 之间的单位换算*三 、WXSS 模板样式 - 样式导入1、什么是样式导入2、@import 的语法格式四、WXSS 模板样式 - 全局样式和局部样式1、全局样式2、局部样式五、页面配置1、页面配置文件的作用2、页面配置和全局配置的关系3、页面配置中常用的配置项。
微信小程序样式大全（一）
lyp_story的博客
03-05 4764
1.尺寸 pt:逻辑分辨率； pt的大小与屏幕的尺寸有关系，简单可以理解为长度和视觉单位 px:指物理分辨率,和屏幕尺寸没关系 1个pt可以有1个px构成，也可以有2个px,还可以有3个甚至更多 iphone6是由2个px构成的 以iphone6的物理像素750*1334为视觉稿进行设计，而在小程序中使用rpx为单位 iphone6下 1px = 1rpx = 0.5pt 使用rpx...
微信小程序商城.zip
06-30
### 回答1： 微信小程序商城.zip 是一个压缩文件，其中包含了微信小程序商城的相关文件和代码。 微信小程序商城是一种基于微信平台的电商应用，可以在微信中直接使用的商城功能。用户可以通过微信小程序商城浏览商品、下单购买、付款等操作。开发者可以利用微信小程序开发工具创建一个小程序商城，并根据自己的需求添加商品、设置支付方式、优化用户体验等。 微信小程序商城.zip文件中可能包含以下内容： 1. 图片文件：用于展示商品的图片，包括商品的封面图、详情图等。 2. 页面文件：包含小程序商城的各个页面，如首页、商品列表页、商品详情页等。页面文件通常包含HTML、CSS和JavaScript代码。 3. 配置文件：用于配置小程序商城的一些基本信息，如AppID、接口地址等。 4. 数据文件：包含小程序商城的商品数据、用户数据等。 5. 脚本文件：用于实现小程序商城的一些功能，如商品搜索、购物车管理等。 通过将微信小程序商城打包成zip文件，可以方便地分享给其他人或备份，并且可以在其他电脑上导入到微信小程序开发工具继续开发或发布到微信平台。 ### 回答2： 微信小程序商城.zip是一个打包好的文件，其中包含了微信小程序商城的所有相关文件和代码。主要用于方便开发者在本地进行开发和调试。 在这个.zip文件中，可以包含微信小程序的页面文件、样式文件、组件文件、配置文件等。开发者可以通过解压这个文件，在开发工具中打开该项目，然后进行代码的编写、页面的设计等工作。 .zip文件的格式对于文件的压缩和打包非常便捷，在备份和传输文件时也非常常用。 对于使用者来说，下载并解压这个.zip文件后，可以查看项目的结构，了解商城的各个页面和组件，同时可以浏览代码，方便学习和理解项目的工作原理。 同时，在解压后的文件中，也可能包含一些必要的文档、图片等，用于提供给使用者更详细的说明和使用指南。 总之，微信小程序商城.zip是一个方便开发者进行本地开发和调试的打包文件，可以提高开发效率和代码的可维护性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值