微信小程序-WXS脚本

news2024/11/16 21:32:18

一、概述

1.WXS

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

2.wxs 的应用场景
wxml中无法调用在页面的.js 中定义的函数,但是,wxml 中可以调用 wxs 中定义的函数。因此,小程序中wxs 的典型应用场景就是“过滤器”

二、基础语法

1.内嵌wxs脚本

wxs代码可以编写在wxml文件中的<wxs>标签内,就像Javascript代码可以编写在html文件中的<script>标签内一样

wxml文件中的每个<wxs></wxs>标签,必须提供module属性,用来指定当前wxs的模块名称,方便在wxml中访问模块中的成员:

2.定义外联的wxs脚本

wxs代码还可以编写在以.wxs为后缀名的文件内,就像javascript代码可以可以编写在以,js为后缀名的文件中一样

新建一个wxs脚本

// tool.wxs文件
function toLower(str) {
  return str.toLowerCase()
}

module.exports = {
  toLower: toLower
}

3.使用外联的wxs脚本

在wxml中引入外联的wxs脚本时,必须为<wxs>标签添加module和src属性,其中:

module用来指定模块的名称

src用来指定要引入的脚本的路径,且必须是相对路径

在.js文件中声明一个country

// pages/message/message.js
Page({

  /**
   * 页面的初始数据
   */ 
  data: {
    country: 'CHINA'
  }
)}

在message.wxml中:

<!--pages/message/message.wxml-->

<!-- 在message页面中显示大写CHINA -->
<view>{{country}}</view>

<!-- 在message页面中显示小写china -->
<!-- 调用m模块中的方法 -->
<view>{{m.toLower(country)}}</view>

<!-- 引用外联的tools.wxs脚本 命名为m -->
<wxs src="../../utils/tools.wxs" module="m"></wxs>

三、wxs特点

1.不能作为组件的事件回顾

wxs典型的应用场景就是“过滤器”,经常配合Mustache语法进行使用,例如:

<view>{{m.ToLower(country)}}</view>

但是,在wxs中定义的函数不能作为组件的事件回调函数,例如,下面的用法是错误的:

<button bindtap="m.toLower">按钮</button>

2.隔离性

隔离性指的是wxs的运行环境和其他JavaScript代码是隔离的

(1)wxs不能调用js中定义的函数

(2)wxs不能调用小程序提供的API


3.性能好

在iOS设备上,小程序内的WXS会比JavaScript代码快2~20倍

在Android设备上,二者的运行效率无差异

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1788664.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

容器项目之前后端分离

容器化部署ruoyi项目 #需要的镜像nginx、java、mysql、redis、 #导入maven镜像、Java镜像和node镜像 docker load -i java-8u111-jdk.tar docker load -i maven-3.8.8-sapmachine-11.tar docker load -i node-18.20.3-alpine3.20.tar #拉取MySQL和nginx镜像 docker pull mysql…

每日5题Day17 - LeetCode 81 - 85

每一步向前都是向自己的梦想更近一步&#xff0c;坚持不懈&#xff0c;勇往直前&#xff01; 第一题&#xff1a;81. 搜索旋转排序数组 II - 力扣&#xff08;LeetCode&#xff09; class Solution {public boolean search(int[] nums, int target) {int n nums.length;if (n…

【Redis数据库百万字详解】命令操作

文章目录 一、连接命令二、键命令 &#x1f308;你好呀&#xff01;我是 山顶风景独好 &#x1f388;欢迎踏入我的博客世界&#xff0c;能与您在此邂逅&#xff0c;真是缘分使然&#xff01;&#x1f60a; &#x1f338;愿您在此停留的每一刻&#xff0c;都沐浴在轻松愉悦的氛围…

Win10文件系统错误(-2147219196)

问题出现的原因&#xff1a; C盘快挤满了&#xff0c;导致电脑很卡&#xff0c;于是删掉了C盘用户下的一些文件C:\Users\DIY-PC&#xff0c;省了五六十G的内存&#xff0c;结果发现把一些系统文件也删掉了&#xff0c;导致图片预览报错 问题现象&#xff1a; &#xff08;自…

9. MySQL事务、字符集

文章目录 【 1. 事务 Transaction 】1.1 事务的基本原理1.2 MySQL 执行事务的语法和流程1.2.1 开始事务1.2.2 提交事务1.2.3 回滚&#xff08;撤销&#xff09;事务实例1&#xff1a;一致性实例2&#xff1a;原子性 【 2. 字符集 和 校对规则 】2.1 基本原理2.2 查看字符集查看…

【保姆级图文教程】QT下载、安装、入门、配置VS Qt环境

【保姆级图文教程】QT下载、安装、入门、配置VS Qt环境-CSDN博客 0.QT介绍 QT 是一个跨平台的应用程序开发框架&#xff0c;它提供了丰富的工具和类库&#xff0c;用于开发图形用户界面&#xff08;GUI&#xff09;程序。Qt 提供了 C 编程语言接口&#xff0c;同时也支持其他…

考研回顾纪录--科软考研失败并调剂兰州大学软件工程专业复试经历

1.背景 本人工作一年后决定考研&#xff0c;遂于2023年4月底离职。5月到家后开始学习。本科东北大学软件工程专业&#xff0c;绩点3.2/5&#xff0c;按照百分制计算是82分。本科纯属混子&#xff0c;只有一个四级551&#xff0c;一个数学竞赛省二等奖&#xff0c;大创学校立项…

Vue3实战笔记(59)—从零开始掌握Vue3插槽机制,进阶与提高

文章目录 前言一、具名插槽二、高级列表组件示例总结 前言 接上文&#xff0c;接下来看一点稍微复杂的&#xff1a;具名插槽 一、具名插槽 子组件 MyComponent.vue&#xff1a; <template><div><slot name"header"></slot><slot><…

解决ESP-IDF工程里面C/C++找不到路径标红的问题

解决ESP-IDF工程里面C/C找不到路径标红的问题 教程 源文件 打开这一个文件 {"configurations": [{"name": "ESP-IDF","cStandard": "c11","cppStandard": "c17","compileCommands": "…

kafka-生产者拦截器(SpringBoot整合Kafka)

文章目录 1、生产者拦截器1.1、创建生产者拦截器1.2、KafkaTemplate配置生产者拦截器1.3、使用Java代码创建主题分区副本1.4、application.yml配置----v1版1.5、屏蔽 kafka debug 日志 logback.xml1.6、引入spring-kafka依赖1.7、控制台日志 1、生产者拦截器 1.1、创建生产者拦…

Precision和Recall

Precision&#xff08;精确率 / 查准率&#xff09;和 Recall&#xff08;召回率 / 查全率&#xff09;是分类任务中常用的两种性能度量&#xff0c;它们用于评估模型在处理二分类或多分类问题时的表现。 Precision&#xff08;精确率&#xff09; 精确率衡量的是模型预测为正…

linux内存缓存占用过高分析和优化

1、什么是buffer/cache &#xff1f; buffer/cache其实是作为服务器系统的文件数据缓存使用的&#xff0c;尤其是针对进程对文件存在read/write操作的时候&#xff0c;所以当你的服务进程在对文件进行读写的时候&#xff0c;Linux内核为了提高服务的读写速度&#xff0c;则将会…

Redis页面优化

文章目录 1.Redis页面缓存1.思路分析2.首先记录一下目前访问商品列表页的QPS1.线程组配置10000次请求2.请求配置3.开始压测1.压测第一次 平均QPS为6122.压测第二次 平均QPS为6153.压测第三次 平均QPS为617 3.然后记录一下访问商品详情页的QPS1.线程组配置10000次请求2.请求配置…

SwiftUI 利用 Swizz 黑魔法为系统创建的默认对象插入新协议方法(五)

功能需求 在 SwiftUI 的开发中,我们往往需要借助底层 UIKit 的“上帝之手”来进一步实现额外的定制功能。比如,在可拖放(Dragable)SwiftUI 的实现中,会缺失拖放取消的回调方法让我们这些秃头码农们“欲哭无泪” 如上图所示,我们在拖放取消时将界面中的一切改变都恢复如初…

python怎么退出help

Python中查看帮助可以在命令提示行中输入“help()”即可。 如果想要退出帮助&#xff0c;有三种方法&#xff0c;具体如下&#xff1a; 1、直接按键盘上的“enter”键退出帮助。 2、按键盘上的“q”键退出帮助。 3、按键盘上的“CtrlZ”键退出帮助。

带DSP音效处理D类数字功放TAS5805M中文资料

国产替代D类数字功放中文资料访问下方链接 ACM8628 241W立体声182W单通道数字功放中文寄存器表 内置DSP多种音频处理效果ACM8628M-241W立体声或182W单通道数字功放 1 特性 具有增强处理能力和低功率损耗的 TAS5805M 23W、无电感器、数字输入、立体声、闭环 D 类音频放大器 …

AI网络爬虫:用GraphQL查询爬取动态网页数据

任务&#xff1a;爬取网站www.skillshare.com搜索结果页面数据&#xff1a; 查看网站的请求信息&#xff1a; 请求网址: https://www.skillshare.com/api/graphql 请求方法: POST 状态代码: 200 OK 远程地址: 127.0.0.1:10809 引荐来源网址政策: strict-origin-when-…

【微信小程序开发】小程序中的上滑加载更多,下拉刷新是如何实现的?

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

什么是泛洪攻击?DDos攻击也是泛洪攻击的一种?

在数字化时代的浪潮中&#xff0c;网络安全已成为一场没有硝烟的战争。其中&#xff0c;泛洪攻击作为一种常见的网络攻击手段&#xff0c;对个人用户、企业乃至国家网络安全构成了严重威胁。本文将对泛洪攻击进行深入剖析&#xff0c;包括其定义、原理、类型、影响以及应对策略…

计算机基础(5)——进制与进制转换

&#x1f497;计算机基础系列文章&#x1f497; &#x1f449;&#x1f340;计算机基础&#xff08;1&#xff09;——计算机的发展史&#x1f340;&#x1f449;&#x1f340;计算机基础&#xff08;2&#xff09;——冯诺依曼体系结构&#x1f340;&#x1f449;&#x1f34…