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

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

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

相关文章

Jupyter 各种主题

安装和更新主题 # 安装jupyter主题 pip install jupyterthemes # 加载可用主题列表 jt -l可用主题列表 Available Themes:chesterishgrade3gruvboxdgruvboxlmonokaioceans16onedorksolarizeddsolarizedl# 选择你想要的主题 jt -t <name of the theme> # 如 jt -t che…

软件测试总结基础

软件测试总结基础 1. 何为软件测试 定义&#xff1a;使用技术手段验证软件是否满足需求 目的&#xff1a;减少bug&#xff0c;保证质量 2. 软件测试分类 阶段划分 单元测试&#xff0c;针对源代码进行测试集成测试&#xff0c;针对接口进行测试系统测试&#xff0c;针对功能…

Web 网页性能优化

Web 网页性能及性能优化 一、Web 性能 Web 性能是 Web 开发的一个重要方面&#xff0c;侧重于网页加载速度以及对用户输入的响应速度 通过优化网站来改善性能&#xff0c;可以在为用户提供更好的体验 网页性能既广泛又非常深入 1. 为什么性能这么重要&#xff1f; 1. 性能…

人工智能学习笔记(1):了解sklearn

sklearn 简介 Sklearn是一个基于Python语言的开源机器学习库。全称Scikit-Learn&#xff0c;是建立在诸如NumPy、SciPy和matplotlib等其他Python库之上&#xff0c;为用户提供了一系列高质量的机器学习算法&#xff0c;其典型特点有&#xff1a; 简单有效的工具进行预测数据分…

YoloV8改进策略:Neck篇|自研Neck层融合模型|深度特征与浅层特征融合,涨点明显|附结构图(独家原创)

摘要 本文介绍的独家原创的Neck层特征融合方法&#xff0c;将深度特征和浅层特征相融合&#xff0c;结合自研下采样模块和动态上采样模块&#xff0c;提供了一种高效的Neck层改进方式&#xff0c;不仅为他们提供了一个现成的解决方案&#xff0c;而且能够作为灵感启发&#xf…

SysTools MailXaminer 电子邮件取证工具,发现电子邮件中的秘密

天津鸿萌科贸发展有限公司是 SysTools 系列软件的授权代理商。 SysTools MailXaminer 电子邮件取证软件提供全功能解决方案&#xff0c;通过简化的操作&#xff0c;从电子邮件客户端、网络邮箱服务器、磁盘镜像、Skype 通讯工具中解密并搜索证据&#xff0c;支持单人取证模式和…

代码随想录训练营Day 49|力扣139.单词拆分、关于多重背包,你该了解这些!、背包问题总结篇!

1.单词拆分 视频讲解&#xff1a;动态规划之完全背包&#xff0c;你的背包如何装满&#xff1f;| LeetCode&#xff1a;139.单词拆分_哔哩哔哩_bilibili 代码随想录 代码&#xff1a; class Solution { public:bool wordBreak(string s, vector<string>& wordDict) …

Bev 车道标注方案及复杂车道线解决

文章目录 1. 数据采集方案1.1 传感器方案1.2 数据同步2. 标注方案2.1 标注注意项2.2 4d 标注(时序)2.2.1 4d标签制作2.2.2 时序融合的作用2.2.2.1 时序融合方式2.2.2.2 时序融合难点2.2.2.2 时序实际应用情况3. 复杂车道线解决3.1 split 和merge车道线的解决3.2 大曲率或U形车道…

postman教程-12-保存请求至Collections

领取资料&#xff0c;咨询答疑&#xff0c;请➕wei: June__Go 上一小节我们学习了Postman管理环境的方法&#xff0c;本小节我们讲解一下Postman保存请求至Collections集合的方法。 1、创建Collection 在保存Request请求之前&#xff0c;先创建一个Collection(集合)&#…

java常见api :Math System

一. Math类 1.定义在那个包 java.lang包下 2.作用 (1)是一个帮助我们用于进行数学计算的工具类 (2)私有化构造方法,所有的方法都是静态的 3.常用的方法 &#xff08;1&#xff09;获取绝对值 System.out.println(Math.abs(-88)); 取值范围&#xff1a; -2147483648到21…

Python中如何打开网页

幸好思念无声&#xff0c;可惜思念无声 ——24.6.4 Python打开前端网页 1.导入webbrowser库 用webbrowser.open(传入网址)&#xff0c;打开网页 import webbrowser webbrowser.open("Index.html") 2.用flask框架 from wsgiref.simple_server import make_serve…

什么是电风扇行情?

“电风扇行情” 是一个金融术语&#xff0c;用于描述证券市场中价格上下波动频繁、幅度较大&#xff0c;但总体趋势不明显的市场状况。   其名称来源于电风扇的扇叶在旋转时&#xff0c;风向不断变化的特征&#xff0c;形象地比喻了市场价格频繁变动但没有明确方向的情景。 …

mysql分页查询优化

优化分页中的偏移量 背景和问题 在数据量较大的情况下&#xff0c;使用 LIMIT 偏移量会导致查询效率低下。例如&#xff0c;获取第 101 页的数据&#xff0c;每页 50 条记录时&#xff0c;查询语句如下&#xff1a; SELECT * FROM articles ORDER BY id LIMIT 50000, 50;这种…

代码随想录算法训练营Day25|216.组合总和III、17.电话号码的字母组合

组合总和III 216. 组合总和 III - 力扣&#xff08;LeetCode&#xff09; 思路和昨日的组合题类似&#xff0c;但注意对回溯算法中&#xff0c;收获时的条件需要写对&#xff0c;path的长度要为k的同时&#xff0c;path中元素总和要为n。 class Solution { public:vector<…

A6370超速保护监控器

A6370监控器是AMS 6300 SIS超速保护系统的一部分&#xff0c;并且 与A6371一起安装在19英寸机架中(84HP宽&#xff0c;3RU高) 系统底板。一个AMS 6300 SIS由三个保护监视器(A6370)组成 和一个背板(A6371)。 该系统设计用于涡流传感器、霍尔元件传感器和 磁性(VR)传感器。 传感器…

UI 自动化分布式测试 -Docker Selenium Grid

分布式测试Selenium Grid 对于大型项目或者有大量测试用例的项目,单机的测试环境往往无法快速完成所有测试用例的执行,此时自动化测试执行效率将会成为最大的瓶颈,Selenium Grid 可以通过多机的分布式架构允许测试用例并行运行,大大缩短了测试时间。 Selenium Grid 提供了多…

Android14 WMS-窗口绘制之relayoutWindow流程(一)-Client端

Android14 WMS-窗口添加流程(一)-Client端-CSDN博客 Android14 WMS-窗口添加流程(二)-Server端-CSDN博客 经过上述两个流程后&#xff0c;窗口的信息都已经传入了WMS端。 1. ViewRootImpl#setView 在窗口添加流程(一)中&#xff0c;有这个方法&#xff1a; http://aospxre…

【从零开始部署SAM(Segment Anything Model )大模型 3 Ubuntu20 离线部署 C++】

这里是目录 总览环境配置模型准备Moble SAM onnx模型获取Moble SAM pre onnx模型获取 运行cmakelist 运行结果 总览 相比于使用python离线部署SAM大模型&#xff0c;C要麻烦的多&#xff0c;本篇的部署过程主要基于项目&#xff1a;https://github.com/dinglufe/segment-anyth…

今日增长工具精选 | 三款你不知道但很实用的运营工具

PartnerShare作为一款分销裂变系统&#xff0c;受到国内多数工具类saas企业的青睐&#xff0c;旗下还有产品分享社区&#xff0c;介绍多种实用的工具&#xff0c;林叔从它那里获得灵感&#xff0c;新开了增长工具集合分享&#xff01;希望能帮助更多saas企业增长。 一、Charac…

kettle学习总结(3)

书接上回&#xff0c;数据同步核心流程1&#xff0c;同步aav库表 <?xml version"1.0" encoding"UTF-8"?> <transformation><info><name>sync_aav</name><description /><extended_description /><trans_v…