请选择 进入手机版 | 继续访问电脑版
MSIPO技术圈 首页 IT技术 查看内容

【微信小程序创作之路】- 小程序常用页面样式

2023-07-13

【微信小程序创作之路】- 小程序常用页面样式

第四章 微信小程序用页面样式



前言

本章节主要讲解,小程序中常用样式,涉及到WXML和WXSS文件。例如:页面布局、整体样式、按钮、图片轮播、条件渲染(wx:if wx:for)等。


一、总体样式–全局样式and局部样式

1.全局样式

微信小程序顶层的app.wxss文件,代表小程序全局样式,作用于所有页面。采用CSS语法设置页面样式。
在这里插入图片描述
🧀我们通过代码来演示
🏀🏀🏀在最顶层的app.wxss文件中设置整个页面背景为紫色,<text>标签的字体为30磅,颜色字体为粉红色。

page {
  background-color: blueviolet;
}

text{
  font-size: 30pt;
  color: pink;
}

小程序第一页
在这里插入图片描述
🏀🏀🏀页面跳转

<view>
<navigator url="../home/home">跳转到第二页</navigator>
</view>

小程序第二页
在这里插入图片描述

2.局部样式

在页面文件内创建的.wxss文件为局部样式,只作用于当前页面。
🍉🍉🍉注:当局部样式和全局样式冲突时,根据就近原则,局部样式会覆盖全局样式。
在这里插入图片描述
🧀我们通过代码来演示
🏀🏀🏀把home文件中的home.wxss文件中设置整个页面背景为黑色,<text>标签的字体为30磅,颜色字体为白色。

home.wxss代码

/* pages/home/home.wxss */

page {
  background-color: black;
}

text{
  font-size: 30pt;
  color: white;
}

首页
在这里插入图片描述
第二页
在这里插入图片描述

二、Flex布局

各种页面元素的位置关系,称为布局(layout),小程序官方推荐使用 Flex 布局。如果有想了解Flex布局的同学,可以看阮一峰老师的《Flex 布局教程》

🧀我们通过代码来演示
在home.wxss文件中加入以下代码

page {
  height: 100%;
  width: 750rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

在这里插入图片描述
下面解释一下上面这段 WXSS 代码,还是很简单的。

(1)height: 100%;:页面高度为整个屏幕高度。
(2)width: 750rpx;:页面宽度为整个屏幕宽度。
(3)display: flex;:页面(home)采用 Flex 布局。
(4)justify-content: center;:页面的一级子元素(这个示例是< view>)水平居中。
(5)align-items: center;:页面的一级子元素(这个示例是< view>)垂直居中。一个元素同时水平居中和垂直中央,就相当于处在页面的中央了。

🍉🍉🍉rpx单位

通过上面的代码示例我们发现设置高度和宽度的单位是rpx,那rpxpx之间的有什么关系呢?
①rpx简介
rpx(responsive pixel)是微信小程序用来解决屏幕适配的尺寸单位。

②rpx原理
rpx实现原理:因为不同的手机屏幕大小不同,为了使小程序适应所有设备,rpx把所有的设备屏幕宽度分为750份(任何设备的屏幕总宽度为750rpx)。在较小的设备上,1rpx所代表的宽度较小;较大的设备上,1rpx所代表的宽度较大。

小程序在不同设备上运行时,就会把 rpx 的样式单位换算成对应的像素单位(px)来渲染,从而实现屏幕适配。

③rpx和px之间的单位换算
小程序官方建议:开发小程序时,可以用IPhone6作为视觉稿的标准。
因为IPhone6,屏幕宽度为375px,换算成rpx:

设备rpx换算pxpx换算rpx
IPhone61rpx=0.5px1px=2rpx

三、样式导入

使用WXSS提供的@import语法,可以导入样式表。
🧀我们通过代码来演示
项目结构
在这里插入图片描述

index.wxss中加入使字体变绿的样式

/**index.wxss**/
.indexss{
  font-size: 30pt;
  color: green;
}

home.wxml引入样式

<view>
  <text class="indexss">第二页</text>
</view>

在这里插入图片描述
我们发现并没有改变
在home.wxss中引入index.wxss

@import"../index/index.wxss"

字体颜色发生了变化
在这里插入图片描述

四、常用按钮样式

小程序按钮使用<button> </button>闭合标签。
按钮基本属性,更多属性可以查看小程序官网 button

属性类型默认值必填说明
sizestringdefault按钮的大小
typestringdefault按钮的样式类型
plainbooleanfalse按钮是否镂空,背景色透明
disabledbooleanfalse是否禁用
loadingbooleanfalse名称前是否带 loading 图标
form-typestring用于 form 组件,点击分别会触发 form 组件的 submit/reset 事件
open-typestring微信开放能力

🧀我们通过代码来演示
🏀🏀🏀type属性指定按钮的颜色类型

<!-- 通过type属性指定按钮颜色类型 -->
<button >普通按钮</button>
<button type="default" >默认按钮</button>
<button type="primary">主色调</button>
<button type=warn">警告</button>

在这里插入图片描述

🏀🏀🏀size属性指定按钮的大小 默认值只有两个

  • default 默认大小
  • mini 小尺寸
<!-- 通过size属性指定按钮的大小 -->
<button size="mini" >普通按钮</button>
<button type="default" size="default" >默认按钮</button>

在这里插入图片描述

🏀🏀🏀各种样式按钮
点击进入
在博主“热爱编程的小白白”文章中看到此网站,很优秀。感谢大佬的文章
选择自己喜欢的按钮
在这里插入图片描述

把CSS和HTML直接复制到wxss和wxml中
在这里插入图片描述
index.wxss

.btn {
  display: block;
  padding: 0.7em 1em;
  background: transparent;
  outline: none;
  border: 0;
  color: #d4af37;
  letter-spacing: 0.1em;
  font-family: monospace;
  font-size: 17px;
  font-weight: bold;
  z-index: 1;
 }
 
 .cube {
  position: relative;
  transition: all 0.5s;
 }
 
 .cube .bg-top {
  position: absolute;
  height: 10px;
  background: #d4af37;
  bottom: 100%;
  left: 5px;
  right: -5px;
  transform: skew(-45deg, 0);
  margin: 0;
  transition: all 0.4s;
 }
 
 .cube .bg-top .bg-inner {
  bottom: 0;
 }
 
 .cube .bg {
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  background: #d4af37;
  transition: all 0.4s;
 }
 
 .cube .bg-right {
  position: absolute;
  background: #d4af37;
  top: -5px;
  z-index: 0;
  bottom: 5px;
  width: 10px;
  left: 100%;
  transform: skew(0, -45deg);
  transition: all 0.4s;
 }
 
 .cube .bg-right .bg-inner {
  left: 0;
 }
 
 .cube .bg-inner {
  background: #28282d;
  position: absolute;
  left: 2px;
  right: 2px;
  top: 2px;
  bottom: 2px;
 }
 
 .cube .text {
  position: relative;
  transition: all 0.4s;
 }
 
 .cube:hover .bg-inner {
  background: #d4af37;
  transition: all 0.4s;
 }
 
 .cube:hover .text {
  color: #28282d;
  transition: all 0.4s;
 }
 
 .cube:hover .bg-right,
 .cube:hover .bg,
 .cube:hover .bg-top {
  background: #28282d;
 }
 
 .cube:active {
  z-index: 9999;
  animation: bounce .1s linear;
 }
 
 @keyframes bounce {
  50% {
   transform: scale(0.9);
  }
 }

index.wxml

<button type="button" class="btn cube cube-hover">
  <div class="bg-top">
  <div class="bg-inner"></div>
  </div>
  <div class="bg-right">
  <div class="bg-inner"></div>
  </div>
  <div class="bg">
  <div class="bg-inner"></div>
  </div>
  <div class="text">Hover Me</div>
</button>

在这里插入图片描述

五、图片插入

图片插入使用<image> </image>标签实现。
<image> </image>标签有很多属性,点击查看

属性类型默认值必填说明
srcstring图片资源地址
modestringscaleToFill图片裁剪、缩放的模式
stylestring图片样式

🧀我们通过代码来演示
🏀🏀🏀通过代码指定图片的高度和宽度占屏幕一半

<view>
   <image src='https://img1.baidu.com/it/u=1919509102,1927615551&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500' 
   style="height: 375rpx; width: 375rpx;"></image>
 </view>

在这里插入图片描述

六、图片轮播

图片轮播使用<swiper> </swiper>标签实现
此标签有很多属性

属性类型默认值必填说明
indicator-dotsbooleanfalse是否显示面板指示点
indicator-colorcolorrgba(0, 0, 0, .3)指示点颜色
indicator-active-colorcolor#000000当前选中的指示点颜色
autoplaybooleanfalse是否自动切换
intervalnumber5000自动切换时间间隔
circularbooleanfalse是否采用衔接滑动

🧀我们通过代码来演示
🏀🏀🏀通过代码实现图片轮播
这里我们直接引用《阮一峰老师的例子

<view>
  <swiper
    indicator-dots="{{true}}"  
    autoplay="{{true}}"
    style="width: 750rpx;"
    indicator-active-color="#000000">
    <swiper-item>
      <image src="https://picsum.photos/200"></image>
    </swiper-item>
    <swiper-item>
      <image src="https://picsum.photos/250"></image>
    </swiper-item>
    <swiper-item>
      <image src="https://picsum.photos/300"></image>
    </swiper-item>
  </swiper>
</view>

上述代码中,**< swiper>组件就是轮播组件,里面放置了三个< swiper-item>组件,表示有三个轮播项目,每个项目就是一个< image>**组件。
在这里插入图片描述

七、图片滚动

图片滚动使用<scroll-view> </scroll-view>标签实现
🧀我们通过代码来演示
🏀🏀🏀通过代码实现纵向滚动
home.wxss

.container_2 view{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.container_2 view:nth-child(1){
background-color: red;
}
.container_2 view:nth-child(2){
  background-color: yellowgreen;
}
.container_2 view:nth-child(3){
  background-color: blue;
}
.container_2{
  display: flex;
  justify-content: space-around
}
 
.container_2{
  border: 1px solid yellowgreen;
  height: 130px;
  width: 100px;
}

home.wxml

<scroll-view class="container_2" scroll-y>
 <view>G</view>
<view>C</view>
<view>L</view>
</scroll-view>

在这里插入图片描述

八、条件渲染

条件渲染使用<wx:if> </wx:if> <wx:for> </wx:for>标签实现

1.< wx:if>

🧀我们通过代码来演示
🏀🏀🏀通过代码实现wx:if
index.wxml

<button wx:if="{{flag==0}}">普通按钮</button>
<button type="default" wx:elif="{{flag==1}}">默认按钮</button>
<button type="primary" wx:elif="{{flag==2}}">主色调</button>
<button type=warn" wx:else>警告</button>

index.js

Page({
  data: {
    now: (new Date()).toLocaleString(),
    flag: 1
  }
})

在这里插入图片描述
当我们把flag改为10

index.js

Page({
  data: {
    now: (new Date()).toLocaleString(),
    flag: 10
  }
})

在这里插入图片描述

🏀🏀🏀一次性通过<wx:if>控制多个组件,使用<block>

<block wx:if="{{flag==10}}">
  <button type="default">默认按钮</button>
  <button type="primary">主色调</button>
</block>

在这里插入图片描述

🍉🍉🍉注:wx:if 与 hidden不同

wx:if 使用动态创建和移除元素的方式控制
hidden使用切换样式方式控制

2.< wx:for>

该标签有很多属性

属性类型默认值必填说明
wx:for-indexstring指定当前循环项的索引变量名
wx:for-itemstring指定当前项变量名
wx:keystring指定当前数组key

🏀🏀🏀通过代码实现< wx:for>
当我们引入js中数组时,可以通过index得到索引,通过item得到内容
index.js

Page({
  data: {
    now: (new Date()).toLocaleString(),
    flag: 10,
    arry:['java','pyhton','C++']
  }
})

index.wxml

<view wx:for="{{arry}}">
 数组索引为:{{index}},内容为:{{item}}
</view>

在这里插入图片描述

🏀🏀🏀wx:for-indexwx:for-item使用
index.wxml

<view wx:for="{{arry}}" wx:for-index="id" wx:for-item="name"> 
 数组索引为:{{id}},内容为:{{name}}
</view>

在这里插入图片描述


总结

本文通过很多代码示例来展示了小程序常用页面样式,这里非常感谢阮一峰老师和小白白大佬的博客,下一章我们讲解JSON文件配置小程序导航栏信息等。

相关阅读

热门文章

    手机版|MSIPO技术圈 皖ICP备19022944号-2

    Copyright © 2024, msipo.com

    返回顶部