【微信小程序篇-02】深入理解小程序的样式与组件

小程序的组件与样式

• 一，微信小程序的样式与组件
• • 1，样式
  • • 1.1，尺寸单位rpx
    • 1.2，全局样式和局部样式
  • 2，组件
  • • 2.1，view区域设置
    • 2.2，轮播图区域绘制
    • 2.3，轮播图中增加图片
    • 2.4，绘制公司信息区域
    • 2.5，商品导航区
    • 2.6，点击商品导航区跳转到列表
    • 2.7，滚动效果
    • 2.8，商品推荐效果

一，微信小程序的样式与组件

一般在web开发网站的时候，页面结构通常有html进行编写，但是在小程序中，不能使用html标签，有没有dom和bom元素等。微信小程序提供了exml进行页面结构的编写，同时提供了wxss进行页面样式的编写wxml提供了view、text、image、navigator等标签来构建页面结构，只不过在小程序中奖标签称为组件，wxss提供了全局样式和局部样式，但是wxss仅支持部分css选择器。

其官方文档如下：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

目前支持的选择器如下：

选择器 样例 样例描述 .class .intro 选择所有拥有 class=“intro” 的组件 #id #firstname 选择拥有 id=“firstname” 的组件 element view 选择所有 view 组件 element, element view, checkbox 选择所有文档的 view 组件和所有的 checkbox 组件 ::after view::after 在 view 组件后边插入内容 ::before view::before 在 view 组件前边插入内容

1，样式

1.1，尺寸单位rpx

随着智能手机的发展，手机设备的宽度也逐渐多元化，这就需要开发者在开发的时候，需要适配不同屏幕宽度的手机。为了解决屏幕适配的问题，微信小程序推出了rpx单位。 他是微信小程序新增的自适应单位，他可以根据不同设备的屏幕宽度进行自适应缩放。小程序规定任何手机型号手机的屏幕宽度都为750rpx

如设计一个宽度为一半，高度为600的一个容器，其样式如下，需要写在scss文件中

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

• 开发时建议以iPhone6作为视觉设计稿，IPhone的设计稿一般是750rpx
• iPhone6的px和rpx的换算单位如下，1rpx=0.5px

1.2，全局样式和局部样式

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

• 全局样式：在app.wxss中定义的样式规则，作用于每一个页面，如设置字号、背景色、宽高等全局样式
• 局部样式：在page.wxss中定义的样式规则，只作用于当前页面，并且会覆盖app.wxss文件中相同的选择器

如在app.scss文件中，设置一个text的全局样式，那么底下的所有的页面都会跟着改变这两个属性

其代码如下，设置文本的颜色以及字体的大小

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

在cate分类模块中，在cate.scss文件中修改text文本的颜色和字体，那么此时局部样式就发生了改变，覆盖了全局样式

因此局部样式如果和全局样式定义了相同的样式，那么局部样式会覆盖全局样式

2，组件

在微信小程序中，常用的组件有：view组件、swiper和swiper-item组件、image组件、text组件、navigator组件、scroll-view组件、字体图标 等常用组件。下面就通过一个首页案例，来融会贯通这些基本组件的使用。

2.1，view区域设置

在index.wxml文件中，设置4个区域，分别是轮播图区域、公司信息、商品导航和推荐商品四个区域

<!-- view 小程序提供的容器组件，可以直接当成div使用 --><!-- 轮播图区域 --><view class=\"swiper\"></view><!-- 公司信息 --><view class=\"info\"></view><!-- 商品导航 --><view class=\"good-nav\"></view><!-- 推荐商品 --><view class=\"good-hot\"></view>

在index.wxss文件中，设置一个样式，其代码如下

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

2.2，轮播图区域绘制

在小程序中，实现轮播图的的功能会相对简单，在小程序内部就提供了 swiper组件 和swiper-item组件

• swiper：用于滑块视图容器，其中只能放置 swiper-item 组件
• swiper-item：只可放置在swiper组件中，宽高自动设置为100%，代表swiper的每一项

首先在index.wxml文件中中的swiper轮播区域加上swiper和swiper-item的相关信息

<view class=\"swiper\"> <swiper autoplay circular interval=\"2000\" indicator-dots indicator-color=\"#fff\" indicator-active-color=\"#f3514f\"> 1 2 3 

随后再index.scss文件中定义其样式，设置不同swiper-item的背景色不同

.swiper{ swiper{ height: 360rpx; background-color: skyblue; swiper-item{ &:first-child{ background-color: lightsalmon; } &:last-child{ background-color: lightseagreen; } } }}

轮播图的常用属性如下

属性 类型 属性 必填 说明 最低版本 indicator-dots boolean false 否 是否显示面板指示点 1.0.0 indicator-color color rgba(0, 0, 0, .3) 否 指示点颜色 1.1.0 indicator-active-color color #000000 否 当前选中的指示点颜色 1.1.0 autoplay boolean false 否 是否自动切换 1.0.0 current number 0 否 当前所在滑块的 index 1.0.0 interval number 5000 否 自动切换时间间隔 1.0.0 duration number 500 否 滑动动画时长 1.0.0 circular boolean false 否 是否采用衔接滑动 1.0.0 vertical boolean false 否 滑动方向是否为纵向 1.0.0 display-multiple-items number 1 否 同时显示的滑块数量 1.9.0 previous-margin string “0px” 否 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 1.9.0 next-margin string “0px” 否 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值。skyline 于 3.5.1 版本支持 1.9.0

其首页轮播图实现的效果如下

2.3，轮播图中增加图片

在小程序中，如果要渲染图片，需要使用image组件，常用的属性有4个

• src属性：图片资源地址
• mode属性：图片裁剪、缩放模式
• show-menu-by-longpress：长按图片显示菜单，长按可以转发好友、收藏、保存等功能
• lazy-load：图片懒加载，滑动到一定距离的时候展示图片

image具有默认的宽度和高度，宽是320px，高是240px，即使没有设置src地址，也会占有宽和高

再次修改下index.wxml轮播图区域，其代码如下，每个swiper下面添加一个image元素

<!-- 轮播图区域 --><view class=\"swiper\"> <swiper autoplay circular interval=\"2000\" indicator-dots indicator-color=\"#fff\" indicator-active-color=\"#f3514f\"> <swiper-item> <image src=\"../../assets/banner/banner-1.jpg\" mode=\"\"></image> </swiper-item> <swiper-item> <image src=\"../../assets/banner/banner-2.jpg\" mode=\"\"></image> </swiper-item> <swiper-item> <image src=\"../../assets/banner/banner-3.jpg\" mode=\"\"></image> </swiper-item> </swiper></view>

随后再index.scss文件中定义其样式，背景色就不再需要，设置一个image图片的高度和宽度，让他填充满

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

2.4，绘制公司信息区域

在小程序中，如果需要渲染文本，那么需要使用text组件，常用的属性有两个：

• user-select：文本是否可选，用于长按选择文本
• space：显示连续空格

除了文本节点之外，其他的节点都无法长按选中，并且text组件内只支持嵌套text。

依旧是修改下index.wxml下面的info公司信息标签，并且创建4个text文本

<!-- 公司信息 --><view class=\"info\"> <text user-select>同城配送</text> <text user-select>行业龙头</text> <text user-select>半小时送达</text> <text user-select>100% 好评</text></view>

随后修改index.scss 中info的属性，最后覆盖一下全局配置的text属性

.info{ //弹性布局 display: flex; //水平方向布局 首尾项目贴边，中间项目等距分布‌ justify-content: space-between; background-attachment: #fff; padding: 16rpx; border-radius: 10rpx;} text{ color: rgb(24, 12, 12); font-size: 35rpx;}

最终的实现效果如下

2.5，商品导航区

商品导航区只需要使用到text组件，image组件和view组件

在index.wxml文件的商品导航区中，定义五个view组件，里面分别包含一个image和一个text文本

<view class=\"good-nav\">  <image src=\"../../assets/images/cate-1.png\"> <text user-select=\"true\">鲜花玫瑰   <image src=\"../../assets/images/cate-1.png\"> <text user-select=\"true\">鲜花玫瑰   <image src=\"../../assets/images/cate-1.png\"> <text user-select=\"true\">鲜花玫瑰   <image src=\"../../assets/images/cate-1.png\"> <text user-select=\"true\">鲜花玫瑰   <image src=\"../../assets/images/cate-1.png\"> <text user-select=\"true\">鲜花玫瑰 

随后修改index.scss 中good-nav的属性，最后覆盖一下全局配置的text属性

.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: 28rpx; margin-top: 12rpx; color: rgb(24, 12, 12); } }}

最终实现的效果如下

2.6，点击商品导航区跳转到列表

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

url：当前小程序的跳转链接，通过?携带参数，例如list?id=10&name=zhansan

open-type：跳转方式

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

如跳转到购物车页面

<navigator url=\"/pages/cart/cart\" open-type=\"switchTab\">跳转到购物车</navigator>

2.7，滚动效果

在微信小程序中如果想实现内容滚动，那么就需要使用到scroll-view组件，类似于网页中的滚动效果，用户可以通过手指滑动或者点击滚动条来滚动内容。

在滚动条中有两个核心属性

• scroll-x：允许横向滚动
• scroll-y：允许纵向滚动

接下来实现一个横向滑动的案例，在index.wxml文件的最底部定义一个scroll-view组件

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

在index.scss文件中定义以下样式，需要注意的就是你在view中的这个dispaly属性，需要设置成inline-block

.scroll-x{ width: 100%; //阻止文本自动换行 white-space: nowrap; background-color: skyblue; view{ //行内快 display: inline-block; width: 300rpx; height: 100rpx; &:last-child{ background-color: lightcoral; } &:first-child{ background-color: lightgreen; } }}

最终实现效果如下

2.8，商品推荐效果

通过上面这个滚动效果之后，接下来正式实现这个商品的推荐效果，在index.wxml文件的这个good-hot中定义以下属性

<view class=\"good-hot\"> <scroll-view class=\"scroll-x\" scroll-x> <view> <view class=\"good-item\"> <image src=\"../../assets/images/floor.jpg\"></image> <text>鲜花玫瑰</text> <text>55</text> </view> </view> <view> <view class=\"good-item\"> <image src=\"../../assets/images/floor.jpg\"></image> <text>鲜花玫瑰</text> <text>66</text> </view> </view> <view> <view class=\"good-item\"> <image src=\"../../assets/images/floor.jpg\"></image> <text>鲜花玫瑰</text> <text>77</text> </view> </view> <view> <view class=\"good-item\"> <image src=\"../../assets/images/floor.jpg\"></image> <text>鲜花玫瑰</text> <text>88</text> </view> </view> <view> <view class=\"good-item\"> <image src=\"../../assets/images/floor.jpg\"></image> <text>鲜花玫瑰</text> <text>99</text> </view> </view> </scroll-view></view>

在index.scss文件中定义以下样式

.good-hot { background-color: #fff; padding: 16rpx; border-radius: 10rpx; .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; } } } text { font-size: 36rpx; color: rgb(24, 12, 12); }}

最终实现效果如下，这样首页的效果基本实现