【微信小程序】wxs脚本

1. 什么是 WXS

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

2. WXS 的应用场景

wxml 中无法调用在页面的 .js 中定义的函数(不包括事件绑定),但是, wxml 中可以调用 wxs 中

定义的函数。因此,小程序中 wxs 的典型应用场景就是“过滤器”。

3. WXS 的特点

  1. 与 JavaScript 不同:

    为了降低 wxs ( WeiXin Script )的学习成本, wxs 语言在设计时借大量鉴了 JavaScript 的语
    法。但是本质上, wxs 和 JavaScript 是完全不同的两种语言!,主要有以下区别:
    虽然 wxs 的语法类似于 JavaScript ,但是 wxs 和 JavaScript 是完全不同的两种语言:

    ① wxs 有自己的数据类型
    number 数值类型、 string 字符串类型、 boolean 布尔类型、 object 对象类型、
    function 函数类型、 array 数组类型、 date 日期类型、 regexp 正则

    ② wxs 不支持类似于 ES6 及以上的语法形式
    不支持: let 、 const 、解构赋值、展开运算符、箭头函数、对象属性简写、etc…
    支持: var 定义变量、普通 function 函数等类似于 ES5 的语法

    ③ wxs 遵循 CommonJS 规范
    module 对象
    require() 函数
    module.exports 对象

  2. 不能作为组件的事件回调:

    wxs 典型的应用场景就是“过滤器”,经常配合 Mustache 语法进行使用,例如:
    但是,在 wxs 中定义的函数不能作为组件的事件回调函数。例如,下面的用法是错误的:

    隔离性
    隔离性指的是 wxs 的运行环境和其他 JavaScript 代码是隔离的。体现在如下两方面:
    ① wxs 不能调用 js 中定义的函数
    ② wxs 不能调用小程序提供的 API

    性能好
    在 iOS 设备上,小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍
    在 Android 设备上,二者的运行效率无差异

  3. 使用WXS
    1)内嵌 wxs 脚本
    wxs 代码可以编写在 wxml 文件中的 标签内,就像 Javascript 代码可以编写在 html 文件中的 标
    签内一样。
    wxml 文件中的每个 标签,必须提供 module 属性,用来指定当前 wxs 的模块名称,方便在wxml 中访问模块中的成员,示例代码如下:

<!-- 定义一个文本,调用wxs中的方法 -->
<view>{{ m1.toUpper(username) }}</view>
<!-- 定义一个wxs的标签,并指定module模块名称 -->
<wxs module="m1">
<!-- 向外暴露一个方法 -->
module.exports.toUpper = function(str) {return str.toUpperCase()
}
</wxs>

2)外联的 wxs 脚本
wxs 代码还可以编写在以 .wxs 为后缀名的文件内,就像 Javascript 代码可以编写在以 .js 为后
缀名的文件中一样。示例代码如下:

// 1.定义方法
function toLower(str) {return str.toLowerCase()
}
// 2.暴露成员
module.exports = {toLower: toLower
}

在 wxml 中引入外联的 wxs 脚本时,必须为 标签添加 module 和 src 属性,其中:
module 用来指定模块的名称
src 用来指定要引入的脚本的路径,且必须是相对路径
示例代码如下:

<!-- 1.使用外联式引入外部的wxs文件 -->
<wxs module="m2" src="../../utils/tools.wxs"></wxs>
<!-- 2.调用 m2 模块的方法 -->
<view>{{ m2.toLower(country) }}</view>

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

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

相关文章

数据分析 - 图形化解释(后续添加)

图形化解释 作为数据分析师来说一个好的图形&#xff0c;就是自己的数据表达能力 简单文本 只有一两项数据需要分享的时候&#xff0c;简单的文本是最佳的沟通方法 下图的对比可以看出来文字的表达效果会好很多 散点图 散点图在展示两件事的关系时很有用&#xff0c;观察是否存…

5.rk3588用cv读取图片(C++)

rk3588自带了cv&#xff0c;不需要重新安装&#xff0c;执行以下操作即可&#xff1a; 一、读取图片 1.读取某张图片 #define HAVE_OPENCV_VIDEO #define HAVE_OPENCV_VIDEOIO#include <opencv2/opencv.hpp> #include <iostream> #include <opencv2/opencv.h…

网络协议基础

tcp/ip协议簇 TCP/IP协议族 网络接口层(没有特定的协议) 物理层 数据链路层 网络层: IP (v4/v6) ARP(地址解析协议) RARP . ICMP (Internet控制报文协议) IGMP 传输层: TCP (传输控制协议) UDP (用户数据报协议) 应用层: 都是基于传输层协议的端口&#xff0c;总共端口0~65535 …

golang 实现协程池

go 的 goroutine 提供了一种比线程而言更廉价的方式处理并发场景。相比线程&#xff0c;协程占据更小的内存空间&#xff0c;并且由于是在用户态进行调度&#xff0c;上下文切换的代价更小。所以协程更加容易支撑几万几百万的并发。但 goroutine 太多仍会导致调度性能下降、GC …

【搞懂设计模式】命令模式:从遥控器到编程的妙用!

我们都熟悉电视遥控器&#xff0c;它有许多按钮&#xff0c;每个按钮都有确定的功能。你按下电源键电视就会打开&#xff0c;再按下一次电视就会关闭。编程世界里也有这种模式&#xff0c;这就是我们说的命令模式。 命令模式是一种设计模式&#xff0c;它把一个请求或操作封装…

以梦为码,CodeArts Snap 缩短我与算法的距离

背景 最近一直在体验华为云的 CodeArts Snap&#xff0c;逐渐掌握了使用方法&#xff0c;代码自动生成的准确程度大大提高了。 自从上次跟着 CodeArts Snap 学习用 Python 编程&#xff0c;逐渐喜欢上了 Python。 我还给 CodeArts Snap 起了一个花名&#xff1a; 最佳智能学…

千问 qwen7B 微调后的模型推理代码

watch -n 1 nvidia-smi 1、数据处理代码 import asttrain_dataset []# 定义合法的字段列表 valid_fields ["id", "conversations"]with open(train.json, r, encoding"utf-8") as f:train_data f.readlines() for i, item in enumerate(tra…

计算机服务器中了halo勒索病毒怎么办,halo勒索病毒解密处理流程

计算机技术的发展与应用为企业的生产生活提供了坚实基础&#xff0c;但同时也为网络安全威胁制造了有利条件。近期&#xff0c;网络上的勒索病毒非常嚣张&#xff0c;给企业的计算机服务器带来严重威胁。近日&#xff0c;云天数据恢复中心接到山东某制造公司的求助&#xff0c;…

Oracle DG环境下的秘钥管理

今天有朋友问到1&#xff09;DG环境下的秘钥管理需要注意什么&#xff0c;2&#xff09;秘钥管理对DG的日志同步有影响吗&#xff1f; 对于2&#xff09;的回答是明确的&#xff0c;没有影响。秘钥的管理和DG的redo log shipping完全是两套机制。在最新版的Oracle Key Vault常…

Qlik Sense : ErrorCode(错误变量)

错误变量 所有错误变量的值在脚本执行之后依然保留。第一个变量 ErrorMode 由用户输入&#xff0c;最后三个变量是 Qlik Sense 的输出&#xff08;包括脚本中错误的信息&#xff09;。 使用每个变量的下拉列表可查看每个变量的简短描述和语法。单击语法描述中的变量名称可了解…

Vulnhub靶机:FunBox10

一、介绍 运行环境&#xff1a;Virtualbox 攻击机&#xff1a;kali&#xff08;10.0.2.15&#xff09; 靶机&#xff1a;FunBox10&#xff08;10.0.2.35&#xff09; 目标&#xff1a;获取靶机root权限和flag 靶机下载地址&#xff1a;https://download.vulnhub.com/funbo…

Effective C++——关于重载赋值运算

令operator返回一个*this的引用 在重载,,*等运算符时&#xff0c;令其返回一个指向this的引用。 class MyClass {int* val; public:MyClass(int i) : val(new int(i)){}MyClass():val(new int(0)){}void print() {cout << *val << endl;}MyClass& operator(co…

mysql面试题合集-基础

前言 工作很忙&#xff0c;本质还是自己比较懒惰&#xff0c;很久没更新博客了。近期打算面试&#xff0c;换个工作环境&#xff0c;那就先从面试题开始吧&#xff0c;后续也会逐渐更新自己在工作中的一些经验感悟。接下来切入主题&#xff0c;由于长期做前台开发工作&#xf…

LabVIEW电液比例阀测试系统

电液比例阀与普通阀和伺服阀相比&#xff0c;比例阀展现出显著的耐污染和可靠性特点。为了满足这些比例阀的综合性能测试需求&#xff0c;开发了一种基于LabVIEW软件的电液比例阀综合性能试验台。这个系统不仅能够进行比例压力阀、流量阀和方向阀的性能测试&#xff0c;而且通过…

RabbitMQ 笔记一

概览&#xff1a; MQ基本概念 RabbitMQ入门 基本工作模 1.MQ是什么&#xff1f; MQ:Message Queue, 存储消息的中间件&#xff0c;是消息发送过程中的暂存容器&#xff0c;主要用于解决分布式系统进程间的通信。 分布式系统通信的两种方式&#xff1a;直接远程调用、借助第三…

01:云计算底层技术奥秘|虚拟化管理|公有云概述

云计算底层技术奥秘&#xff5c;虚拟化管理&#xff5c;公有云概述 虚拟化平台安装验证虚拟化支持 Linux虚拟机创建虚拟机磁盘虚拟机配置文件创建虚拟机 公有云简介 虚拟化平台安装 虚拟化&#xff1a;是一种技术 就是将不可拆分的实体资源变成可以自由划分的逻辑资源&#xf…

one-stage/two-stage区别

One-stage和Two-stage是目标检测中的两种主要方法&#xff0c;它们在处理速度和准确性上存在显著差异。以下是两者的主要区别&#xff1a; 处理流程&#xff1a;One-stage方法通过卷积神经网络直接提取特征&#xff0c;并预测目标的分类与定位&#xff0c;一步到位&#xff0c…

【数据库学习】PostgreSQL优化

1&#xff0c;数据库减负思路 缓存 页面静态化 实时性不高的数据&#xff1b;数据库优化sql优化 表结构优化 数据库分区分表 合并数据库操作&#xff0c;将多次操作合并成一条sql执行。热点数据分离 主表只保存活跃数据。数据库读写分离 2&#xff0c;执行计划 explain只…

美易官方:Edward Jones将特斯拉评级从买进下调至持有

近日&#xff0c;知名金融机构Edward Jones宣布将对特斯拉&#xff08;Tesla&#xff09;的评级进行调整&#xff0c;从买进下调至持有。这一消息引起了市场的广泛关注。特斯拉作为全球领先的电动汽车制造商&#xff0c;其股票一直备受投资者关注。本文将对此次评级调整进行分析…

【Go学习】Ginkgo测试框架学习实践 + 问题记录 + 怎么解决(0)

1、ginkgo测试框架介绍&#xff1a;https://onsi.github.io/ginkgo/ 2、重点是学习实践 问题记录 怎么解决 3、送福利&#xff1a;国内好用的ChatGpt有很多&#xff0c;比如&#xff1a;天工、文心一言、讯飞星火、通义万相等 1. 安装 xxxmacdeMacBook-Pro-3  /Volumes/mac…