1. Toy模板网首页
  2. > Toy博客

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

9月前 作者：java小白冲刺者 分类：Toy博客 阅读(60) 违法举报

这篇具有很好参考价值的文章主要介绍了【微信小程序创作之路】- 小程序常用页面样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

前言

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

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

1.全局样式

微信小程序顶层的app.wxss文件，代表小程序全局样式，作用于所有页面。采用CSS语法设置页面样式。
【微信小程序创作之路】- 小程序常用页面样式,前端,vue,微信小程序,notepad++,小程序
🧀我们通过代码来演示
🏀🏀🏀在最顶层的app.wxss文件中设置整个页面背景为紫色，<text>标签的字体为30磅，颜色字体为粉红色。

page {
  background-color: blueviolet;
}

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

小程序第一页
【微信小程序创作之路】- 小程序常用页面样式,前端,vue,微信小程序,notepad++,小程序
🏀🏀🏀页面跳转

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

小程序第二页
【微信小程序创作之路】- 小程序常用页面样式,前端,vue,微信小程序,notepad++,小程序

2.局部样式

在页面文件内创建的.wxss文件为局部样式，只作用于当前页面。
🍉🍉🍉注：当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式。
【微信小程序创作之路】- 小程序常用页面样式,前端,vue,微信小程序,notepad++,小程序
🧀我们通过代码来演示
🏀🏀🏀把home文件中的home.wxss文件中设置整个页面背景为黑色，<text>标签的字体为30磅，颜色字体为白色。

home.wxss代码

/* pages/home/home.wxss */

page {
  background-color: black;
}

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

首页
【微信小程序创作之路】- 小程序常用页面样式,前端,vue,微信小程序,notepad++,小程序
第二页
【微信小程序创作之路】- 小程序常用页面样式,前端,vue,微信小程序,notepad++,小程序

二、Flex布局

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

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

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

【微信小程序创作之路】- 小程序常用页面样式,前端,vue,微信小程序,notepad++,小程序
下面解释一下上面这段 WXSS 代码，还是很简单的。

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

🍉🍉🍉rpx单位

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

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

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

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

设备 rpx换算px px换算rpx
IPhone6 1rpx=0.5px 1px=2rpx

三、样式导入

使用WXSS提供的@import语法，可以导入样式表。
🧀我们通过代码来演示
项目结构
【微信小程序创作之路】- 小程序常用页面样式,前端,vue,微信小程序,notepad++,小程序

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

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

home.wxml引入样式

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

【微信小程序创作之路】- 小程序常用页面样式,前端,vue,微信小程序,notepad++,小程序
我们发现并没有改变
在home.wxss中引入index.wxss

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

字体颜色发生了变化
【微信小程序创作之路】- 小程序常用页面样式,前端,vue,微信小程序,notepad++,小程序

四、常用按钮样式

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

属性 类型 默认值 必填 说明
size string default 否 按钮的大小
type string default 否 按钮的样式类型
plain boolean false 否 按钮是否镂空，背景色透明
disabled boolean false 否 是否禁用
loading boolean false 否 名称前是否带 loading 图标
form-type string 否 用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件
open-type string 否 微信开放能力

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

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

【微信小程序创作之路】- 小程序常用页面样式,前端,vue,微信小程序,notepad++,小程序

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

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

【微信小程序创作之路】- 小程序常用页面样式,前端,vue,微信小程序,notepad++,小程序

🏀🏀🏀各种样式按钮
点击进入
在博主“热爱编程的小白白”文章中看到此网站，很优秀。感谢大佬的文章
选择自己喜欢的按钮
【微信小程序创作之路】- 小程序常用页面样式,前端,vue,微信小程序,notepad++,小程序

把CSS和HTML直接复制到wxss和wxml中
【微信小程序创作之路】- 小程序常用页面样式,前端,vue,微信小程序,notepad++,小程序
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>

【微信小程序创作之路】- 小程序常用页面样式,前端,vue,微信小程序,notepad++,小程序

五、图片插入

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

属性 类型 默认值 必填 说明
src string 否 图片资源地址
mode string scaleToFill 否 图片裁剪、缩放的模式
style string 否 图片样式

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

<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>

【微信小程序创作之路】- 小程序常用页面样式,前端,vue,微信小程序,notepad++,小程序

六、图片轮播

图片轮播使用<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 否 是否采用衔接滑动

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

<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>**组件。
【微信小程序创作之路】- 小程序常用页面样式,前端,vue,微信小程序,notepad++,小程序

七、图片滚动

图片滚动使用<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>

【微信小程序创作之路】- 小程序常用页面样式,前端,vue,微信小程序,notepad++,小程序

八、条件渲染

条件渲染使用<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
  }
})

【微信小程序创作之路】- 小程序常用页面样式,前端,vue,微信小程序,notepad++,小程序
当我们把flag改为10

index.js

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

【微信小程序创作之路】- 小程序常用页面样式,前端,vue,微信小程序,notepad++,小程序

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

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

【微信小程序创作之路】- 小程序常用页面样式,前端,vue,微信小程序,notepad++,小程序

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

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

2.< wx:for>

该标签有很多属性

属性 类型 默认值 必填 说明
wx:for-index string 否 指定当前循环项的索引变量名
wx:for-item string 否 指定当前项变量名
wx:key string 否 指定当前数组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>

【微信小程序创作之路】- 小程序常用页面样式,前端,vue,微信小程序,notepad++,小程序

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

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

【微信小程序创作之路】- 小程序常用页面样式,前端,vue,微信小程序,notepad++,小程序

总结

本文通过很多代码示例来展示了小程序常用页面样式，这里非常感谢阮一峰老师和小白白大佬的博客，下一章我们讲解JSON文件配置小程序导航栏信息等。文章来源地址https://www.toymoban.com/news/detail-568906.html

到了这里，关于【微信小程序创作之路】- 小程序常用页面样式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • uni-app框架 微信小程序页面显示正常，但安卓页面样式显示异常

    uni-app框架 微信小程序页面显示正常，但安卓页面样式显示异常

    今天在继续复习uni-app项目时，使用模拟器运行时，突然发现封装的search组件样式无法正常显示，但是小程序页面又是正常的，打包后真机也是一样的结果。在uni-app的控制台报如下错误: [Vue warn]: Error in render: “TypeError: Cannot read property ‘children’ of undefined” TypeError: Cannot rea

    2024年04月11日
    浏览(69)
  • 微信小程序之WXSS模板样式、页面配置（.json）和网络数据请求

    微信小程序之WXSS模板样式、页面配置（.json）和网络数据请求

    学习的最大理由是想摆脱平庸，早一天就多一份人生的精彩；迟一天就多一天平庸的困扰。各位小伙伴，如果您： 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持，想组团高效学习… 想写博客但无从下手，急需写作干货注入能量… 热爱写作，愿意让自己成为更好

    2024年01月24日
    浏览(62)

  • 微信小程序常用页面监听跳转方法

    使用wx.navigateTo(Object object)方法跳转，此跳转方法会保留当前页面，将跳转到应用内的某个页面，特别注意，此方法不能跳到 tabbar 页面，也就是咱们常用的底部菜单栏对应的tabbar 页面。具体示例代码： 这只是常见的用法，如果需要数据回调，可参考微信官方文档。 2. 使用

    2024年02月13日
    浏览(50)
  • 微信小程序的页面制作---常用组件及其属性2

    微信小程序的页面制作---常用组件及其属性2

    在全局配置文件app.json中添加taBar配置，可实现标签栏配置。标签栏最少2个，最多5个 （1）如何配置标签栏？ 1》先建多个文件，（以我的index，list，myform文件夹为例） 2》在app.json这个全局配置文件里面配置taBar，（必填taBar配置项——color、selectedColor、backgroundColor、list） 3》

    2024年04月13日
    浏览(43)
  • 微信小程序 - 页面插入添加 Banner 广告超详细教程（支持自定义样式、位置、大小等）及注意事项

    微信小程序 - 页面插入添加 Banner 广告超详细教程（支持自定义样式、位置、大小等）及注意事项

    如果您需要点击弹出的广告，请访问： 微信小程序 - 页面插入广告（激励式广告）。 本文将从 0-1 完成整个过程，您只需要按照步骤操作即可， 代码干净整洁注释详细，快速将代码移植到您的微信小程序项目中， 如下图所示，底部 Banner 式卡片广告， 您可以将其嵌入到任何

    2024年02月08日
    浏览(158)

  • uni-app写微信小程序input获取焦点部分安卓机页面不弹起问题(弹起一点焦点样式问题)

    以上代码是一个自己封装的一个输入框组建 以上是问题出现的关键,没有设置行高 设置行高后就解决了问题,具体原因不详

    2024年02月11日
    浏览(49)
  • 微信小程序详细讲解页面传值，globalData，wx，web前端开发基础

    微信小程序详细讲解页面传值，globalData，wx，web前端开发基础

    在其他非app.js文件中修改： var app = getApp() ​ app.globalData.hasLogin = true 二、 使用 wx.navigateTo 与 wx.redirectTo 的时候，可以将部分数据放在 url 里面，并在新页面 onLoad 的时候初始化 // Navigate wx.navigateTo({ url: ‘…/pageD/pageD?name=raymondgender=male’, }) ​ // Redirect wx.redirectTo({ url: ‘…/p

    2024年04月25日
    浏览(60)
  • Gpt微信小程序搭建的前后端流程 - 前端小程序部分-1.基础页面框架的静态设计(二)

    Gpt微信小程序搭建的前后端流程 - 前端小程序部分-1.基础页面框架的静态设计(二)

    Gpt微信小程序搭建的前后端流程 - 前端小程序部分-1.基础页面框架的静态设计(二) 在开始这个专栏，我们需要找一个小程序为参考，参考和仿照其界面，聊天交互模式。 这里参考小程序- 小柠AI智能聊天 ，可自行先体验。 该小程序主要提供了以下几点 功能向需求 : 每天免费

    2024年02月14日
    浏览(43)

  • CSS样式前端HTML页面常用CSS效果实现及其相关配置信息------前端入门基础教程

    !DOCTYPE html !-- 这是HTML的注释 -- html lang=\\\"en\\\" id=\\\"myHtml\\\"     head         !-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 --         meta charset=\\\"UTF-8\\\"         meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"         titleHtmlAll/title         

    2024年02月05日
    浏览(59)
  • 微信小程序：布局样式

    微信小程序：布局样式

    2024年02月04日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包