【微信小程序】wxs脚本

news/2024/7/20 2:04:12 标签: 微信小程序, 小程序

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.niftyadmin.cn/n/5348410.html

相关文章

力扣:102. 二叉树的层序遍历

广度优先搜索解题&#xff1a; 1.先定义接受的大集合数组 List<List<Integer>>&#xff0c;在创建一个队列来模拟树的进队列操作。 2.这道题的层序遍历重点在于每一层的全部结点组成一个数组来进行存储&#xff0c;所以要如何辨别每一层的节点是解题关键。我们可…

呼吸机电机控制主控MCU方案

呼吸机是一种能代替、控制或改变人的正常生理呼吸&#xff0c;增加肺通气量&#xff0c;改善呼吸功能&#xff0c;减轻呼吸功消耗&#xff0c;节约心脏储备能力的装置。呼吸机连接一条管子到患者的嘴或鼻子&#xff0c;氧气量可以通过监视器加以控制。 基于灵动微控制器的呼吸…

ajax点击搜索返回所需数据

html 中body设置&#xff08;css设置跟进自身需求&#xff09; <p idsearch_head>学生信息查询表</p> <div id"div_1"> <div class"search_div"> <div class"search_div_item"> …

【Leetcode】2846. 边权重均等查询

文章目录 题目思路代码结果 题目 题目链接 现有一棵由 n 个节点组成的无向树&#xff0c;节点按从 0 到 n - 1 编号。给你一个整数 n 和一个长度为 n - 1 的二维整数数组 edges &#xff0c;其中 edges[i] [ui, vi, wi] 表示树中存在一条位于节点 ui 和节点 vi 之间、权重为 …

go 引用fork后的模块的两种方式(replace和工作区)

很久没更新了&#xff0c;一是工作琐碎&#xff0c;二是处在舒适区&#xff0c;但最近看着身边的同事一个个离开&#xff0c;危机感骤然而生&#xff0c;不得不重拾书本&#xff0c;毕竟生活还得继续&#xff0c;不卷是不可能的&#xff0c;谁让我们生在这个卷中卷的国度&#…

初识MQRabbitMQ快速入门

一、同步和异步通讯 微服务间通讯有同步和异步两种方式&#xff1a; 同步通讯&#xff1a;就像打电话&#xff0c;需要实时响应。 异步通讯&#xff1a;就像发邮件&#xff0c;不需要马上回复。 两种方式各有优劣&#xff0c;打电话可以立即得到响应&#xff0c;但是你却不能…

人工智能的未来展望:自然语言处理(NLP)与计算机视觉(CV)

NLP和CV是人工智能的两个重要分支&#xff0c;它们在处理和分析信息方面有不同的侧重点和挑战。 NLP&#xff08;自然语言处理&#xff09;旨在让计算机理解和生成人类语言&#xff0c;主要处理的是文本信息。NLP的研究和应用主要集中在如何让计算机理解和生成人类语言&#x…

Taro框架如何抹平各端的差异

Taro 是一款开源的跨端统一开发框架&#xff0c;它通过以下方式来抹平各端&#xff08;如微信小程序、支付宝小程序、H5、React Native 等&#xff09;的差异&#xff1a; 统一的编程模型&#xff1a;Taro 提供了与 React 类似的编程模型&#xff0c;开发者可以使用 JSX 语法和…