微信小程序版式 第1篇
同时，为了更好地适应微信小程序的开发需求，WXSS 对 CSS 进行了扩充以及修改。其中，与 CSS 相比，WXSS 扩展的特性主要有尺寸单位和样式导入。
在尺寸单位方面，WXSS 引入了 rpx（responsive pixel）。例如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，此时 750rpx = 375px = 750 物理像素，1rpx = = 1 物理像素。规定屏幕宽为 750rpx，可以根据屏幕宽度进行自适应，这为开发者在不同屏幕尺寸的设备上进行开发提供了便利。开发微信小程序时，设计师可以用 iPhone6 作为视觉稿的标准，但在较小的屏幕上可能会不可避免地出现一些毛刺，所以在开发时需要尽量避免这种情况。
在样式导入方面，WXSS 使用 @import 语句可以导入外联样式表，@import 后跟需要导入的外联样式表的相对路径，用 “;” 表示语句结束。这种方式使得代码更加模块化，便于管理和维护。
总的来说，WXSS 作为微信小程序的样式语言，在继承 CSS 特性的基础上进行了创新和扩展，为微信小程序的界面设计提供了强大的支持。
（一）响应式像素特性
WXSS 新增的 rpx（responsive pixel）尺寸单位是其一大特色。它可以根据屏幕宽度进行自适应，为开发者在不同设备上呈现一致的界面效果提供了便利。以 iPhone6 为例，其屏幕宽度为 375px，共有 750 个物理像素，此时 750rpx = 375px = 750 物理像素，即 1rpx = = 1 物理像素。规定屏幕宽为 750rpx，使得开发者在设计小程序界面时，可以以一个相对统一的标准进行布局，而无需过多考虑不同设备的屏幕尺寸差异。这种响应式的特性使得小程序在各种设备上都能保持良好的显示效果。
（二）样式外联
在 WXSS 中，可以通过 @import 语句导入外联样式表。用法非常简单，@import 后跟需要导入的外联样式表的相对路径，用 “;” 表示语句结束。例如，首先在 page 文件下新建一个文件为 style，并写一个样式文件 ，然后在需要导入的文件的 wxss 文件中使用 @import_../style/_ 即可。但这种方式也有一定的限制，需要注意目录层次问题，确保相对路径的准确性。这种样式外联的方式使得代码更加模块化，便于管理和维护不同页面的样式。
（三）内联样式
WXSS 在框架组件上支持使用 style、class 属性来控制组件的样式。style 属性接收动态的样式，在运行时会进行解析，所以通常用于动态样式的设置。但不要将静态的样式写进 style 中，以免影响渲染速度。而 class 属性用于指定样式规则，其属性值是样式规则中类选择器名（样式名）的集合，样式类名不需要带上 “.”，样式类名之间用空格分隔，通常用于静态样式的统一管理。
（四）选择器丰富
WXSS 目前支持多种选择器，为开发者提供了丰富的样式控制手段。比如元素选择器，使用元素名称作为选择器，选取匹配的元素，如使用 “view” 选择器可以选取所有的 “view” 组件；类选择器，使用类名作为选择器，选取具有特定类名的元素，如 “.classname” 选择器可以选取具有 “.classname” 类名的元素；ID 选择器，使用元素的 ID 作为选择器，选取具有特定 ID 的元素，如 “#idname” 选择器可以选取具有 “idname” ID 的元素；伪类选择器，用于选择元素的特定状态或位置，如使用 “:hover” 选择器可以选取鼠标悬停在元素上的状态；子元素选择器，使用 “>” 分隔两个选择器，表示选取第一个选择器的直接子元素；属性选择器，使用元素的属性值作为选择器，选取具有特定属性值的元素；后代选择器，使用空格分隔两个选择器，表示选取第一个选择器的后代元素；通配选择器，使用 “*” 作为选择器，表示选取所有元素。在优先级方面，通常 ID 选择器优先级较高，类选择器次之，元素选择器优先级相对较低。但具体的优先级还会受到样式的层叠和继承关系的影响。
（一）尺寸单位不同
WXSS 引入了 rpx（responsive pixel）单位，这是一种可以根据屏幕宽度进行自适应的单位。例如在 iPhone 6 上，屏幕宽度为 375px，共有 750 个物理像素，此时 1rpx 等于 或 1 物理像素。而 CSS 则支持多种长度单位，如 rem、em、vh、vw 等，这些单位需要手动进行换算。相比之下，WXSS 的 rpx 单位在微信小程序开发中更加便捷，能够自动适应不同屏幕尺寸的设备，减少了开发者手动换算单位的工作量。
（二）样式定义和应用差异
WXSS 提供了全局样式和局部样式之分。全局样式定义在 中，会作用于所有小程序页面；局部样式定义在页面的 wxss 文件中，仅会作用于当前页面，并可能覆盖全局页面的样式（遵循就近原则）。而 CSS 没有直接的全局和局部样式之分，但可以通过将样式定义在 HTML 文档的 header 部分或专门的 CSS 文件中，并在 HTML 页面中引用，来实现样式的统一管理和应用。这种差异使得 WXSS 在小程序开发中能够更加灵活地控制不同页面的样式，同时也便于实现样式的复用。
（三）选择器支持不同
WXSS 仅支持部分 CSS 选择器，包括.class、#id、element、并集选择器、后代选择器、::after 和::before 等伪类选择器。相比之下，CSS 则支持更广泛的选择器，如属性选择器、子元素选择器、相邻兄弟选择器等。这些选择器为 CSS 提供了更强大的样式定制能力，而 WXSS 在选择器的支持上相对较为有限。这也意味着在微信小程序开发中，开发者需要更加谨慎地选择合适的选择器来实现所需的样式效果。
（四）组件和属性支持有别
WXSS 针对微信小程序的组件进行了样式支持的优化，一些样式属性在小程序中有特殊的表现，如 flex 布局在微信小程序中得到了更好的支持。而 CSS 主要针对标准的网页元素和布局进行支持，虽然也支持 flex 布局等现代 CSS 特性，但在小程序中的表现可能与 WXSS 有所不同。这种差异使得开发者在开发微信小程序时，需要更加熟悉 WXSS 对小程序组件的样式支持特点，以便更好地实现页面的布局和设计。
（五）样式继承区别
WXSS 不支持样式的继承，每个元素的样式需要单独定义。而 CSS 支持样式的继承，子元素可以继承父元素的样式，这有助于减少重复的代码并提高样式的可维护性。在微信小程序开发中，由于 WXSS 不支持样式继承，开发者需要更加注意每个元素的样式定义，避免重复定义相同的样式。而在网页开发中，CSS 的样式继承特性可以提高开发效率，减少代码量。
（一）微信小程序开发必备
WXSS 是微信小程序开发的最佳伴侣，适用于各种小程序开发场景。在微信小程序的开发过程中，WXSS 为开发者提供了强大的样式控制能力，使得小程序的界面更加美观、专业。无论是简单的信息展示类小程序，还是复杂的电商、社交等类型的小程序，WXSS 都能发挥重要作用。例如，在电商小程序中，通过 WXSS 可以精确地控制商品展示页面的布局和样式，使商品信息更加清晰地呈现给用户。同时，WXSS 的响应式设计特性能够确保小程序在不同尺寸的设备上都能有良好的显示效果，提升用户体验。
（二）企业级应用
对于公司或组织内部小程序，WXSS 可快速建立专业一致的界面风格。企业级应用通常对界面的专业性和一致性有较高要求，WXSS 正好满足这一需求。通过使用 WXSS，可以为企业内部小程序定制统一的主题和样式，使其与企业的品牌形象保持一致。例如，一个大型企业的内部办公小程序，可以利用 WXSS 打造简洁、高效的界面风格，提高员工的工作效率。同时，WXSS 的易于定制特性使得企业可以根据自身需求随时调整小程序的界面风格，满足不同阶段的业务需求。
（三）个人开发者利器
表明无论是新手还是经验丰富开发者，WXSS 简单易用的组件库可节省大量设计和编码时间。对于个人开发者来说，时间和资源往往有限。WXSS 的简单易用性使得个人开发者能够快速上手，无需花费大量时间学习复杂的样式语言。例如，新手开发者可以利用 WXSS 的内联样式和样式外联功能，快速为自己的小程序添加个性化的样式。而经验丰富的开发者则可以利用 WXSS 的丰富选择器和响应式设计特性，打造更加复杂、专业的小程序界面。此外，WXSS 的文档齐全，每个组件都配有详细的使用说明和示例代码，便于个人开发者学习和参考。
（一）环境准备与项目结构
要学习 WXSS，首先需要进行环境准备。获取 APPID 可登录微信公众平台，在主页的 “开发”→“开发管理”→“开发设置”→“开发者 ID” 中找到并复制 AppID。下载微信开发者工具，可从官方网站获取。
小程序与传统 web 文件结构相比，微信小程序是四层结构，多了一层配置.json。基本的项目目录通常包括 、、 文件，定义小程序的一些全局配置。小程序所有的页面文件都在 pages / 路径下，页面文件有四种文件类型，分别是.js、.wxml、.wcss、和.json 后缀的文件。相比全局配置文件，页面配置文件只对当前页面生效。
（二）配置文件 JSON
全局配置 ： 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。例如，pages 字段用于描述当前小程序所有页面路径，让微信客户端知道小程序页面定义在哪个目录；window 字段定义小程序所有页面的顶部背景颜色、文字颜色定义等。
页面配置 ：页面级别的.json 配置文件可以实现对小程序页面特殊的窗口表现需求，页面中配置项会覆盖 的 window 中相同的配置项。
sitemap 配置：小程序根目录下的 文件用于配置小程序及其页面是否允许被微信索引。
（三）模板语句 WXML
基本用法：WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。例如，text 相当于以前 web 中的 span 标签，view 相当于以前 web 中的 div 标签。
逻辑运算：可以在花括号中加入表达式，如数字运算、字符串拼接、三元表达式等。
列表循环：wx:for 用于列表循环，可以指定循环项的名称和索引，同时需要注意 wx:key 的使用来提高列表渲染性能。
条件渲染：根据特定条件显示或隐藏组件。
常见组件包括 view、text、image、swiper、navigator、rich-text、button、icon、radio、checkbox 等。每个组件都有特定的用途和属性，可以根据需求进行灵活运用。
（四）样式列表 WXSS
尺寸单位：WXSS 扩展了尺寸单位，如 rpx（responsive pixel）。在不同尺寸设备上，rpx 可以根据屏幕宽度进行自适应，为开发者提供了便利。
样式导入：使用 @import 语句可以导入外联样式表，使代码更加模块化，便于管理和维护。
导入 less：可以通过特定的方式导入 less 文件，进一步增强样式的可维护性和可扩展性。
（五）自定义组件与生命周期
自定义组件：可以创建自定义组件，提高代码的复用性。创建自定义组件需要在特定的目录下进行声明和实现，然后在需要使用的地方进行引入。
小程序和页面的生命周期：小程序有应用生命周期和页面生命周期。应用生命周期包括 onLaunch、onShow、onHide 等阶段；页面生命周期包括 onLoad、onShow、onReady、onHide、onUnload 等阶段。了解这些生命周期有助于更好地管理小程序的状态和行为。
微信小程序版式 第2篇
小程序页面主要由以下文件组成。
本项目程序分为4个页面：主页、新闻详情页、产品服务页、联系我们页。
主页效果图如下
1. 页面结构
上方是一个图片轮播图，中间是新闻列表，下文有一个查看更多导航
其页面结构代码如下
2. 样式表
样式代码如下所示
3、 页面逻辑处理
页面逻辑也是通过接口取网站的数据，并且存到swipet,news等数据中，供前端显示
产品服务页和主页的新闻列表页类似
1. 页面结构
其页面结构代码如下
2. 样式表
使用公共样式表。
3、 页面逻辑处理
请求官网接口数据并显示
1. 页面结构
其页面结构代码如下.
2. 样式表
使用公共样式表。
3、 页面逻辑处理
请求官网接口数据并显示
微信小程序版式 第3篇
在开发自己的微信小程序之前，首先需要注册小程序账号，接下来我们一步一步做详细说明。 打开浏览器，输入：或直接搜微信公众号平台也可以 打开之后，对我们来说第一次使用，所以我们要选择“立即注册”。
选择左下角的“小程序”方框
输入邮箱、密码、确认密码、验证码，之后选择同意协议和条款。当然这里的密码不是邮箱的密码，而是正在申请的小程序账号的密码。最后按下“注册”按钮。
单击下半部一大片绿色的部分，就可以回到注册界面继续剩下去
选择主题类型为“个人”，然后输入管理员的姓名，身份证号码。 输入手机号码并单击“获取验证码”，将手机接收到的验证码输入到短信验证码栏中。 完成上述步骤，画面下部会出现一个二维码，需要用已经绑定银行卡的微信的扫一扫功能扫描该二维码进行实名认证。
如果认证成功，画面会变成下面这个样子。