微信小程序-WXS脚本

一、概述

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设备上,二者的运行效率无差异

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

13. 一个天文望远镜R-C系统的设计

导论: 要求主口径2160mm,整个系统的相对孔径为1:1(相对孔径:镜头的有效孔径和焦距之比)。系统的焦距为19440mm,焦点需引出主镜之后,以便配接各种光谱和光度观测设备。 设计流程: (1)理论分析与计算 望远镜的两镜系统由一个主镜和一个次镜组成,通常主镜和次镜都是…

文本纠错助手

欢迎来到高效文本纠错的世界&#xff01; 文本纠错助手 是您的最佳搭档&#xff0c;专为处理各种文本中的错误而生。在我们强大的 Intel G8i 处理器上&#xff0c;它能快速、准确地帮你找出并纠正错误。下面是这款神器的详细介绍。 硬件配置 处理器&#xff1a;Intel G8i 处理…

Adobe XD最新版号查询,如何使用?

Adobe XD是Adobe家推出的基于矢量的原型设计合作工具&#xff0c;被业界视为应对Sketch的“对抗”产品。Adobe XD不同于Sketch的系统限制&#xff0c;灵活性比较高&#xff0c;Windows和Mac都可以使用。自2017年推出以来&#xff0c;Adobe XD版经历了多次更新&#xff0c;这篇文…

vue3之拆若依--记实现后台管理首页(左侧菜单栏、头部信息区域...)

效果图 前期准备 启动若依在本地 启动若依后台,跑在自己本地: 这里对于如何下载若依相关的前后端代码请参考若依官网:RuoYi 若依官方网站 |后台管理系统|权限管理系统|快速开发框架|企业管理系统|开源框架|微服务框架|前后端分离框架|开源后台系统|RuoYi|RuoYi-Vue|RuoYi-…

03--nginx架构实战

前言&#xff1a;这应该是nginx梳理的最后一章&#xff0c;写一些关于网站架构和网站上线的知识内容&#xff0c;主要是感觉到运维并不是单一方向的行业&#xff0c;这一章概念会有一些广泛&#xff0c;但是非常重要&#xff0c;都是这几年工作中遇到的情况&#xff0c;整理一下…

element-plus表格添加简单右键

实现如下 <template><main class"mainClass" > <el-table :data"tableData" style"width: 100%"row-contextmenu"rowContextmenu"cell-contextmenu"cellContextmenu"contextmenu.prevent><el-table-c…

C51学习归纳4 --- 矩阵键盘

一、开发板原理图 我们可以看到这个键盘是4*4的&#xff0c;行可以由4个数据接口接收&#xff08;P1_4~7&#xff09;&#xff0c;列可以由4个数据接口接收&#xff08;P1_0~3)。 所以我们可让行作为扫描方向&#xff0c;或者列作为扫描方向&#xff0c;进行按键扫描。如何扫描…

AI 入门指南二 :AI提示词(Prompt)

一&#xff0c;提示词的定义 提示词在中文中意为“触发”&#xff0c;在自然语言处理&#xff08;NLP&#xff09;的领域&#xff0c;它更接近于一个“心领神会”的概念&#xff0c;而非具有明确定义的术语。 简而言之&#xff0c;提示词是用户对大型语言模型的输入&#xff0…

氘化铝锂产品附加值高 市场需求将继续增长

氘化铝锂产品附加值高 市场需求将继续增长 氘化铝锂&#xff08;LiAlD4&#xff09;是一种还原性非常强的氢同位素铝-氘化合复合物&#xff0c;常温常压下为灰色固体粉末&#xff0c;是四氢锂铝中被氘原子取代的衍生物。在锂电池领域&#xff0c;氘化铝锂可以添加到正极材料中&…

专业好用的屏幕捕获工具

一、简介 1、一款功能全面、操作简便的屏幕捕获工具,它不仅支持常规的截屏功能,还包括了录屏、OCR文字识别、翻译、GIF制作等多项实用功能。该软件适用于Windows操作系统,旨在为用户提供一站式的屏幕捕捉解决方案 二、下载 1、下载地址: 官网链接:https://verycapture.com…

Sqli-labs-maste靶场的下载、配置

目录 下载 配置 配置数据库 配置网站 初始化靶场 下载 GitHub下载地址&#xff1a; 百度网盘&#xff1a;https://pan.baidu.com/s/1jBcKkLzRV8q72rx_0AcznA?pwdxrsc 提取码&#xff1a;xrsc 迅雷链接&#xff1a;https://pan.xunlei.com/s/VNzC0-XAVysQYz4HufgYYze4A…

php质量工具系列之phpmd

PHPMD PHP Mess Detector 它是PHP Depend的一个衍生项目&#xff0c;用于测量的原始指标。 PHPMD所做的是&#xff0c;扫描项目中可能出现的问题如&#xff1a; 可能的bug次优码过于复杂的表达式未使用的参数、方法、属性 PHPMD是一个成熟的项目&#xff0c;它提供了一组不同的…

Fortigate防火墙二层接口的几种实现方式

初始配置 FortiGate出厂配置默认地址为192.168.1.99&#xff08;MGMT接口&#xff09;&#xff0c;可以通过https的方式进行web管理&#xff08;默认用户名admin&#xff0c;密码为空&#xff09;&#xff0c;不同型号设备用于管理的接口略有不同。 console接口的配置 防火墙…

1.2 QT随手简记(二)

QT学习篇2 一、QT学习方法 1. QT查询与学习资源 QT助手&#xff1a;学会使用QT的助手和上网查询&#xff0c;掌握API文档的查询与使用。QT设计师界面&#xff1a;通过图形界面进行组件的拖拽布局&#xff0c;所见即所得。 2. QT设计师界面操作 跳转与代码生成&#xff1a;…

大数据湖一体化平台整体建设方案(PPT原件)

背 景&#xff1a;大数据湖的发展背景与建设理念 体 系&#xff1a;大数据湖体系规划与建设思路 生态圈&#xff1a;探索新兴业务入湖建设模式 共 享&#xff1a;大数据湖统一访问共享规划 运 营&#xff1a;大数据湖一体化运营管理建设 软件全套资料部分文档清单&…

使用Django JWT实现身份验证

文章目录 安装依赖配置Django设置创建API生成和验证Token总结与展望 在现代Web应用程序中&#xff0c;安全性和身份验证是至关重要的。JSON Web Token&#xff08;JWT&#xff09;是一种流行的身份验证方法&#xff0c;它允许在客户端和服务器之间安全地传输信息。Django是一个…

Canva如何通过从MySQL迁移到DynamoDB来管理每日新增的5000万素材

随着数字化设计的蓬勃发展&#xff0c;Canva作为一家在线设计平台&#xff0c;面临着海量的用户生成内容。每天&#xff0c;平台上新增的素材数量高达5000万&#xff0c;这对数据库系统提出了前所未有的挑战。为了应对这一挑战&#xff0c;Canva决定将原本基于MySQL的数据库系统…

100000开发的系统,执意重构钱多执念?

收到一位客户询盘&#xff0c;要重做自己的系统&#xff0c;原因&#xff1a;嫌弃基于PHP做的系统服务器消耗大。咨询了好几拨人&#xff0c;觉得外包公司贵&#xff0c;个人程序员又不靠谱&#xff0c;总之一门心思要重构。 现状&#xff1a; 1、系统研发耗费100000。 2、目…

5款相见恨晚的神级软件推荐,每一款都让人惊喜

今天来给大家种草5款特别赞且完全免费的软件&#xff0c;每一款都超级好用&#xff0c;的值得大家去试试。 搜书大师「Android、iPhone」 亮点&#xff1a;看小说神器。 搜书大师是看小说的神器&#xff0c;而且永久免费哦&#xff0c;看书的时候再也不会被那些烦人的弹窗广…

Scala 练习一 将Mysql表数据导入HBase

Scala 练习一 将Mysql表数据导入HBase 续第一篇&#xff1a;Java代码将Mysql表数据导入HBase表 源码仓库地址&#xff1a;https://gitee.com/leaf-domain/data-to-hbase 一、整体介绍 HBase特质 连接HBase, 创建HBase执行对象 初始化配置信息&#xff1a;多条(hbase.zookeeper.…