前言本人之前自学并发版了一个微信小程序（TXT音乐播放器），趁着还没忘，把常用的一些CSS样式总结在下方。微信小程序使用的css文件后缀为wcss，总的来说，与html中的css语法大致相同，但还是有一些特别的地方（有一些特有的语法与一些不太支持的语法）。 正文1.新建一个微信小程序页面时，可以在最外层写一个view标签（类似div标签），然后设置它的css(wcss)样式为：.main
转载
2023-11-26 19:49:18
110阅读
小程序里面用的样式叫 wxss， wx 表示微信，ss 是 style sheets .. 它跟我们平时用的 css 差不多 .. 你可以把它理解成微信小程序定制版的 css ...在小程序的有个主要的样式文件，每个页面也可以有属于自己的样式文件 .. 打开 index 页面的 wxml 文件 .. 在这个 view 组件上面，可以用一个 class ，在组件上面添加一个类 .. 名字是 cont
转载
2024-05-02 17:09:22
195阅读
CSS 背景CSS 属性定义背景效果常用的方式:background-color（最常用）
background-color 属性定义了元素的背景颜色.如：
.title {background-color:red;} 就是设置类选择器title的背景颜色为红色我们上面的 background-color也可以简写为 background，如： .title {background-color:r
转载
2024-03-27 06:14:32
61阅读
小程序开发公司哪家好？这个问题的答案想必也没有一定的，这个要看大家对于小程序的功能和设计要求，大家心里都有自己的衡量。 现在市场上做小程序开发的公司也比较多，怎么样才能选择一家满意的正规的小程序开发公司喃，这个也是大家比较关心的一个问题，下面我就大致的说一下小程序开发公司怎么去做选择的参考。现在市场上小程序开发公司也分以下几类定制开发类型的，这类公司主要是根据客户阐述的需求，定制开发。配备人员：产
转载
2024-04-12 11:43:34
21阅读
# 小程序 CSS 适配 iOS 的实现指南
随着小程序的普及，越来越多的开发者开始注重在不同平台上的适配问题，特别是在 iOS 环境下。本文将为刚入行的小白介绍如何实现小程序的 CSS 适配 iOS，包括步骤、代码示例和适配的注意事项。
## 适配流程
以下是实现 CSS 适配 iOS 的基本步骤：
| 步骤 | 描述 |
|------|------|
| 1 | 确定 iOS
# 小程序 CSS 判断 iOS环境的技巧
随着小程序的广泛应用，开发者们面临着越来越多的挑战，其中之一便是如何精准判断用户的操作系统。这篇文章将介绍如何在小程序中使用 CSS 判断 iOS 环境，并分享相应的代码示例。通过掌握这些技巧，开发者们能够提升用户体验，确保在不同平台上的一致性。
## 为何需要判断 iOS环境
在小程序中，iOS系统与Android系统的表现可能存在着明显差异。例
原创
2024-10-26 05:36:35
49阅读
WXSSWXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。与 CSS 相比，WXSS 扩展的特性有：尺寸单位样式导入尺寸单位rpx（responsive pixel）
转载
2023-12-25 08:36:27
460阅读
项目结构： 步骤一：创建组件 声明这一组文件为自定义组件 modal.json 步骤二：编写组件代码 1.逻辑层 modal.js 2.页面布局 modal.wxml 3.样式 modal.wxss 步骤三：使用组件 这里我是在 pages/index/index 页面调用 pages/modal/
转载
2018-01-23 19:11:00
292阅读
2评论
随着小程序的快速发展，越来越多的开发者开始关注小程序的前端开发。在小程序的前端开发中，CSS框架是一个非常重要的工具，它可以帮助开发者快速构建出漂亮、响应式的界面。那么，小程序应该使用哪种CSS框架呢？在本文中，我们将介绍几种常用的CSS框架，并分析它们的优缺点，帮助开发者选择适合自己项目的CSS框架。1. WeUIWeUI是微信团队推出的一款基于Vue.js的CSS框架，它专门为微信小程序设计。
原创
2024-05-23 09:27:31
87阅读
在小程序中实现瀑布流布局，通常可以通过 CSS 来完成相对简单的效果，也可以利用 JavaScript 来进行动态计算和渲染。瀑布流布局的基本思路是让不同高度的内容块自适应排列，不会出现空白区域，并且通常需要处理容器的动态高度以及元素的排列顺序。以下是实现瀑布流布局的一种思路：1. 使用 CSS 实现简单的瀑布流布局可以使用 CSS Grid 或者 CSS Flexbox 来布局，但最常见的是使用
一、WXSS和CSS的区别 WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。1、新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏
转载
2023-12-13 16:58:15
13阅读
wxml wxss @-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible ...
转载
2021-11-03 19:38:00
732阅读
2评论
小程序CSS常用动画示例一、前言正如android的四大动画一样：translate:移动alpha:透明度变化rotate:旋转scale:尺寸变化css也可以实现二、CSS3的2D转换2
原创
2022-10-20 10:31:33
333阅读
小程序禁止iOS回弹的实现方法
作为一名经验丰富的开发者，我将教会你如何实现小程序禁止iOS回弹的功能。下面是整个实现过程的流程图：
```mermaid
gantt
dateFormat YYYY-MM-DD
title 小程序禁止iOS回弹的实现流程
section 实现流程
创建并配置项目 :done,2019-09-01,2019-09-05
原创
2024-02-05 09:17:04
145阅读
# 实现小程序css animation 兼容iOS
### 1. 流程
| 步骤 | 内容 |
| ---- | ---- |
| 1 | 确定动画效果 |
| 2 | 编写CSS动画代码 |
| 3 | 添加适配iOS的代码 |
### 2. 具体步骤
#### 步骤1：确定动画效果
在开始编写CSS动画代码之前，首先需要确定你想要实现的动画效果，比如淡入淡出、旋转、缩放等。
###
原创
2024-04-13 05:58:11
249阅读
1.背景：背景一：在某些场景下需要用到弹幕，例如视屏直播网站等等需要用到弹幕，视屏直播等平台会用到输入发送弹幕，这个可以参考小程序的视屏播放部分video传送门，在video组件中直接有弹幕配置方式，详细参考官方文档，这里不做赘述。场景二：有些场景只需要播放弹幕（例如在重大节日里，需要烘托节日气氛，后台填写几条，然后接口返给前端，前端在屏幕固定范围内播放即可，这里无需用户手动输入）。后文只围绕这种
转载
2024-10-17 21:37:14
63阅读
相信刚开始学习开发小程序的初学者一定对界面的布局很困扰，不知道怎么布局，怎么摆放位置，其原因是不了解CSS样式的属性，所以，今天这篇文章，给大家普及一下相关的知识。说起CSS布局，首先要讲解的就是FLex布局，这个可以说是一个万能钥匙，遇到什么复杂的布局，都可以通过Flex布局搞定，为了方便大家理解Flex属性，我将会一步步解析FLex的属性，并附上效果图。1、基本概念采用 Flex 布局的元素，
转载
2024-04-16 21:22:00
141阅读
面向对象开发现阶段互联网流行的开发模式，许多主流开发语言也是属于面向对象开发，是建立在“对象”概念基础上的方法学。由于小程序不是基于web因此不支持dom操作，也就没有了获取文档对象的方法，所以不能再像以前写网页$(#xxx).css({})的方法来修改样式。小程序无法获取dom对象,如何修改样式？但是小程序有setData的存在，js就依然可以动态修改样，1.通过修改类名2.添加一个类名，覆盖前
转载
2024-01-22 10:55:02
53阅读
上一篇讲了WXML:小程序版HTML，这一篇介绍WXSS:小程序版CSS。1. WXSS:小程序版CSS。WXSS是一套样式语言，为了便于前端开发的上手，WXSS同HTML的CSS样式文件大部分特性一样。它用来决定WXML的样式，同时在CSS基础上进行了修改扩充。
其中扩展属性有尺寸单位、样式导入。1.1.尺寸单位1.1.1 介绍rpx 可以根据屏幕宽度进行自适应。
与px的换算关系，下图可以看出
原创
2022-10-21 08:51:35
418阅读
本篇实践一个多层模态窗口，而且是自适应的。点击页面上的一个按钮，弹出第一层自适应模态窗口。在第一层模态窗口内包含一个按钮，点击该按钮弹出第二层模态窗口，弹出的第二层模态窗口会挡住第一层模态窗口，即第二层模态窗口打开的时候，无法关闭第一层模态窗口。具体页面实现部分如下： <head>
<meta http-equiv="Content-Type" content="tex
转载
2023-10-15 14:22:11
847阅读
