微信小程序WXS语法和页面适配

最新推荐文章于 2024-07-26 14:06:36 发布

= * shmily

最新推荐文章于 2024-07-26 14:06:36 发布

阅读量568

点赞数

分类专栏：微信小程序文章标签：小程序微信

本文链接：https://blog.csdn.net/weixin_46178009/article/details/120195409

版权

微信小程序专栏收录该内容

3 篇文章 1 订阅

订阅专栏

WXS是微信小程序的一种脚本语言，用于处理WXML中的数据预处理。它可以减少JS文件的负担，提高代码的可维护性和可移植性。WXS可以通过在wxml文件内直接编写或独立的.wxs文件导入使用。模块命名遵循特定规则，确保在文件内的唯一性。WXS语法与JavaScript相似，但模块操作有别。在适配方面，小程序使用rpx单位进行屏幕尺寸适配，确保不同屏幕下内容的显示效果。

摘要由CSDN通过智能技术生成

概述

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML ，可以构建出页面的结构。

作用

在WXML文件中如果想要嵌入一段脚本语言，实现对WXML中数据的预处理操作，此时可以
使用WXS语法。

适用场景

在某一个WXML文件中嵌入一段WXS脚本实现对当前WXML中数据的预处理操作。可以实现JS文件中代码的减负，从而提高代码的可维护性和可移植性。
可以将公共操作封装在一个独立的wxs文件中，在需要使用该脚本的WXML中导入wxs文件，从而实现公共脚本的封装。

wxs语法

wxs模块

WXS 脚本可以编写在 wxml 文件中的标签内，或以 .wxs 为后缀名的文件内，相当
于微信版本的 JS 。通过模块的概念实现代码的封装。

wxs 的两种使用方式

直接在 wxml 中使用
首先在 wxml 文件中书写一个 wxs 标签，设置标签的module属性。
在 wxs 标签中定义需要进行操作的方法（函数），注意在脚本中的方法一般都是
简单方法，单纯用来完成对数据的过滤，预处理等。
最后将定义的方法以模块的导出的方式导出给外界。

module 属性:
module 属性是当前 <wxs> 标签的模块名。在单个 wxml 文件内，建议其值唯一。有重复模块名则按照先后顺序覆盖（后者覆盖前者）。不同文件之间的 wxs 模块名不会相互覆盖。
module 属性值的命名规则：
首字符必须是：字母（a-zA-Z），下划线（）
剩余字符可以是：字母（a-zA-Z），下划线（），数字（0-9）
作用：
为当前 wxs 标签包裹的一段脚本设置一个模块名，将来在 wxml 文件使用该模块方法是方便调用。

在需要使用的 wxml 文件中，以模块名调用。
直接将脚本写在一个 .wxs 文件中。
创建一个 wxs 后缀的文件。
在需要使用 wxs 文件的 wxml 文件中通过 wxs 标签导入该脚本。在需要的地方仍然使用模块名调用。

实现案例：

wxs 基于语法

该语法是延续 Javascript 基础语法，和 Javascript 基本语法完全相同，只是在模块操作时存在不同。
打开温馨开发者文档，查看 wxs 语法。

页面适配

微信小程序开发过程中，随着屏幕宽度的切换，需要保证页面中存在的内容可以跟随屏幕发生变化，以保证不同屏幕下页面文字的尺寸适配当前屏幕。此时需要将所有非百分的尺寸，使用一种相对单位进行适配。该相对单位为 rpx 。
rpx 是微信小程序内部内置的一个相对单位, 该相对单位是以当前设备的屏幕宽度为参照物。在小程序开发中设计稿的尺寸是按照 iPhone6 的屏幕作为参考，因此 iPhone6 下0.5 px == 1 rpx 。如果切换到 iPhone5 下，此时屏幕宽度为320，按照等比例缩放的要求，此时0.42 px == 1rpx 。如果所有的标签均使用 rpx 作为单位，此时随着屏幕切换，1 rpx 换算成对应 px 是不同的。