微信小程序-WXS

embedded/2024/10/21 5:22:52/

文章目录

WXS_1">微信小程序-WXS

概述

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

WXS 的应用场景是“过滤器”,所谓的过滤器是指在渲染数据之前,对数据进行处理,过滤器处理的结果最终会显示在页面上。

WXS 与 JavaScript 是不同的语言,有自己的语法,不支持 ES6 规范,并不和 JavaScript 一致。WXS 不支持 let、const、解构赋值、展开运算符、箭头函数、对象属性简写等语法,WXS 支持 var 定义变量、普通 function 函数等语法。

WXS 支持八种数据类型:

  • number : 数值
  • string :字符串
  • boolean:布尔值
  • object:对象
  • function:函数
  • array : 数组
  • date:日期
  • regexp:正则

WXS 遵循 CommonJS规范。在每个模块内部,module 变量代表当前模块,这个变量是一个对象,它的 exports 属性(即module.exports)是对外的接口。在使用 require() 函数引用其他模块时,得到的是被引用模块中 module.exports 所指的对象。

WXS 具有隔离性:隔离性是指 WXS 代码的运行环境和其他 JavaScript 代码是隔离的:

  • WXS 代码中不能调用页面的JS文件定义的函数。
  • WXS 代码中不能调用微信小程序提供的API。

WXS代码可以写在页面的WXML文件的标签内(内嵌WXS脚本),也可以写在以.wxs为后缀名的文件中(外联WXS脚本)。每一个.wxs文件和标签均为一个单独的模块,有自己独立的作用域,即在一个模块内定义的变量和函数默认为私有的,对其他模块不可见。一个模块想要对外暴露其内部的变量和函数,只能通过module.exports实现。

语法文档

WXS_35">内联WXS脚本

<wxs module="m1">function toUpper(str){return str.toUpperCase()}module.exports = {toUpper: toUpper}
</wxs><view>{{m1.toUpper("hello world")}}
</view>

WXS_54">外联WXS脚本

新建date.wxs文件:

function handleDate(time) {var oDate = getDate(time);return oDate.getFullYear() + "-" + (oDate.getMonth() + 1) + "-" + oDate.getDate();
}module.exports = handleDate
<wxs src="./date.wxs" module="handleCurrentDate" />
<text>{{handleCurrentDate()}}</text>

新建studentList.wxs文件:

function filterScore(studentList) {return studentList.filter(function (item) {return item.age > 18})
}function filterAge(studentList) {return studentList.filter(function (item) {return item.score > 60})
}module.exports = {filterScore: filterScore,filterAge: filterAge
};

使用:

<view>过滤score大于60的</view>
<wxs src="./studentUtils.wxs" module="studentUtils" />
<view wx:for="{{studentUtils.filterScore(studentList)}}" wx:key="index">{{item.name}} - {{item.score}}
</view>
<view>过滤age大于18的</view>
<view wx:for="{{studentUtils.filterAge(studentList)}}">{{item.name}} - {{item.age}}
</view>

http://www.ppmy.cn/embedded/129183.html

相关文章

如何使用Websocket订阅实时股票价格

WebSocket和HTTP请求在工作原理和使用场景上存在显著区别。首先&#xff0c;HTTP是一种无状态的协议&#xff0c;客户端发起请求&#xff0c;服务器响应后&#xff0c;连接通常会关闭。如果客户端需要再次获取数据&#xff0c;必须发起新的请求。这种"请求-响应"模型…

简单实现通过电脑操作手机

通过电脑操作手机&#xff0c;支持单击&#xff0c;拖抓事件&#xff0c;延时有1-2秒。 具体步骤&#xff1a; 1、从手机截图到sdcard 2、将图片导出到PC 3、从PC加载展示图片 4、开启定时器 5、设置点击、滚动事件 1、 private static void takeScreenshot(String path)…

Kafka异常重试方案小记

背景 在最近进行的项目架构升级中&#xff0c;我们对原有的核心项目结构进行了细致的拆分。 现在&#xff0c;核心项目与非核心项目之间的通信和数据交换主要通过Kafka这一中间件来实现。 这种设计主要体现在核心项目向非核心项目发送通知&#xff0c;这些通知大致可以分为三个…

【Linux】并行与并发(含时间片)

简单来说 并发&#xff1a;多个进程轮流使用同一个CPU&#xff0c;在逻辑层面上&#xff0c;一段时间内推进完成了多个进程 并行&#xff1a;机器中有多个CPU可以使用&#xff0c;在物理层面上&#xff0c;做到同一时间会有多个进程同时在运行 举个例子&#xff1a;一群人需要…

基于SSM+微信小程序的宠物管理系统1

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 基于SSM微信小程序的宠物管理系统实现了管理员、店主、用户。 管理员实现了店主管理、附件宠物店、管理员、用户管理、猫狗查询、猫狗宠物社区、商品信息等、店主实现了商品信息管理。用户…

Windows PowerShell 有没有类似conda的虚拟环境功能?

PowerShell本身并不直接提供与Conda完全相同的环境功能&#xff0c;但PowerShell可以通过一些方法和工具来实现类似的环境管理。以下是对PowerShell和Conda环境功能的详细对比及PowerShell实现类似功能的途径&#xff1a; 一、Conda的环境功能 Conda是一个开源的包管理系统和…

OpenAI研究揭示ChatGPT的性别和种族偏见

&#x1f989; AI新闻 &#x1f680; OpenAI研究揭示ChatGPT的性别和种族偏见 摘要&#xff1a;OpenAI发布了一项新研究&#xff0c;指出ChatGPT在回应用户时&#xff0c;可能会根据姓名推断性别和种族特征&#xff0c;从而反映训练数据中的社会偏见。例如&#xff0c;女性名…

基于Docker安装Grafana及其基本功能

Grafana是一款用Go语言开发的开源数据可视化工具&#xff0c;可以做数据监控和数据统计&#xff0c;带有告警功能。 拉取Grafana镜像 docker pull grafana/grafana 运行镜像 docker run -d -p 3000:3000 --namegrafana grafana/grafana 打开浏览器&#xff0c;访问 http://l…