WXS 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

WXS 代码可以编写在 WXML 文件中的 <wxs> 标签内或以 .wxs 为后缀名的文件内。每一个 <wxs> 标签和 .wxs 文件都是一个单独的模块，每个模块都有自己独立的作用域，即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。

WXML 和 WXS 直接在渲染层进行通讯，性能开销很低。因此 WXS 可以解决在某些场景下，频发地数据绑定以及页面与 JS 通信的性能问题，还能为页面提供一些工具方法来简化开发。

小程序的框架分为视图层（Webview）和逻辑层（App Service）。WXS 是运行在视图层的。

在单个 WXML 文件内，module 模块名需要唯一，否则后面的将会覆盖前面的。但是不同文件之间的 wxs 模块名不会相互覆盖。

wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。

编写在 WXML 文件中的 <wxs> 标签内。

<!-- index.wxml -->
// 导出 wxs 模块
// module 是当前 <wxs> 标签的模块名
<wxs module="utils">// 每个 wxs 模块均有一个内置的 module 对象，一个 wxs 模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现module.exports = {msg : "hello world",}
</wxs>// 引用 wxs 模块
<view> {{utils.msg}} </view>

编写在以 .wxs 为后缀名的文件内。

// utils.wxs
// 导出 wxs 模块
// 每个 wxs 模块均有一个内置的 module 对象，一个 wxs 模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。
var getMsg =  function() {console.log("hello world")
}
module.exports = {getMsg: getMsg,
}

<!-- indexwxml -->
// 引入 wxs 模块
// module 是当前 <wxs> 标签的模块名。src 是被引用的 wxs 文件的相对路径，仅当 <wxs >标签为单闭合标签或空标签时有效。
<wxs module="utils" src="./utils.wxs"></wxs>
// 绑定的 WXS 函数必须用{{}}括起来
<view bindtap="{{utils.getMsg}}">按钮</view>

.wxs 文件不仅可以被 WXML 中的 <wxs> 标签引用，还可以使用 require 函数被其他的 .wxs 文件引用。

// tools.wxs
var utils = require("./utils.wxs");
console.log(utils.getMsg());

WXS 不同于 JavaScript：

WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。

WXS 中不支持 let 和 const；不支持箭头函数。

WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的API。

由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

注释：

WXS 主要有 3 种注释的方法：

// 方法一：单行注释/*
方法二：多行注释
*//*
方法三：结尾注释。即从 /* 开始往后的所有 WXS 代码均被注释

数据类型：

WXS 语言目前共有以下几种数据类型：string、number、boolean、object、array、function、date、regexp。

生成 date 对象需要使用 getDate 函数, 返回一个当前时间的对象。

var  date = getDate(1500000000000);

生成 regexp 对象需要使用 getRegExp函数。

var reg = getRegExp('(\d)(?=(?:\d{3}[+]?)+$)','g');

数据类型判断：

数据类型判断可以使用 constructor 属性，也可以使用 typeof 区分部分数据类型。

var string = "str";
console.log( string.constructor === "String" )var func = function(){};
console.log( func.constructor ===  "Function" )

var object = {};
console.log( typeof object === 'object' );var func = function(){};
console.log( typeof func === 'function' );

变量：

不支持 let 和 const 声明变量。

运算符：

大致和 JS 中相同。

语句：

支持 if 语句、switch 语句、for 语句、while 语句、do while 语句。

函数：

不支持箭头函数。

使用 WXS 函数响应事件：

可以使用 WXS 函数响应事件。WXS 函数接受 2 个参数：

event：在小程序事件对象的基础上多了 event.instance 对象来表示触发事件的组件的 ComponentDescriptor 实例。
ownerInstance：表示触发事件的组件所在组件的 ComponentDescriptor 实例，如果触发事件的组件是在页面内的，ownerInstance 表示的就是页面实例。

目前 WXS 函数只能响应内置组件的事件，不支持响应自定义组件的事件。还不支持原生组件的事件、input 和 textarea 组件的 bindinput 事件。（2022.10.07）

// index.wxml
// 在 WXML 视图层中的组件上绑定事件处理的 WXS 函数
<wxs module="touchmove" src="./touchmova.wxs"></wxs>
<view bindtouchmove="{{touchmove.handleTouchmove}}"></view>// touchmove.wxs
//  在 WXS 中义并导出事件处理函数
function handleTouchmove(event, ownerInstance) {console.log(event)
}
module.exports = {handleTouchmove: handleTouchmove
}

引用 WXS 的组件/页面的 JS 逻辑层与 WXS 通信：

可以通过 WxsPropObserver 在引用该 WXS 的组件/页面的 JS 逻辑层中调用 WXS 中定义的函数。

可以通过 WXS 中 ComponentDescriptor 实例的 callMethod 方法直接调用引用该 WXS 的组件/页面的 JS 逻辑层定义的函数。

// index.wxml
<wxs module="touchmove" src="./touchmova.wxs"></wxs>
// change:prop（属性前面带 change: 前缀）是在 prop 属性被设置的时候触发 WXS 函数，初始化时也会调用一次，类似 Component 定义的 properties 里面的 observer 属性
<view bindtouchmove="{{touchmove.handleWxsTouchmove}}" change:prop="{{touchmove.propObserver}}"></view>// index.js
Page({data: {prop: '',},handlePageTouchmove() {}
})// touchmova.wxs
module.exports = {handleWxsTouchmove: function (event, ownerInstance) {// 可以通过 callMethod 方法来调用当前组件/页面在 JS 逻辑层定义的函数。event.instance.callMethod('handlePageTouchmove')},// 当 prop 被设置的时候会触发 propObserver 函数propObserver: function(newValue, oldValue, ownerInstance, instance) {console.log('prop observer', newValue, oldValue)}
}

WXS 触发引用该 WXS 的自定义组件所在的父组件/页面中的事件。

可以通过 WXS 中 ComponentDescriptor 实例的 triggerEvent 方法来触发引用该 WXS 的自定义所在的父组件或页面中的事件，和组件的 triggerEvent 一致。

callMethod 是调用引用该 WXS 的组件/页面内部自身的方法。
triggerEvent 是触发引用该 WXS 的组件外部别人的方法，即引用该 WXS 的组件所在组件/页面的方法。

使用场景：

有频繁用户交互的效果在小程序上表现是比较卡顿的。例如页面有 2 个元素 A 和 B，用户在 A 上做 touchmove 手势，要求 B 也跟随移动。

一次 touchmove 事件的响应过程为：

用户滑动触发 touchmove 事件，touchmove 事件从视图层抛到逻辑层。
逻辑层处理 touchmove 事件，通过 setData 来改变 B 位置的 data 值，通知视图层后，视图层重新渲染 B 的位置。

也就是，一次 touchmove 的响应需要经过 2 次的逻辑层和渲染层的通信以及一次渲染，通信的耗时比较大。而且 setData 渲染也会阻塞其它脚本执行，导致了整个用户交互的动画过程会有延迟。

可以使用 WXS 函数用来响应小程序事件。让事件在视图层响应，从而减少通信的次数达到性能的优化。

《五》微信小程序中的 WXS（WeiXin Script）相关推荐

微信小程序中wxs文件的用法
微信小程序中的wxs文件,大家或多或少都有见过,但怎么使用呢?在项目开发中又能给我们带来什么便捷和解决什么问题呢?借助一个案例为大家介绍具体用法. 一.什么是wxs文件及wxs文件有什么作用 wxs相 ...
五分钟学会在微信小程序中使用 vantUI 组件库
前言我们在开发微信小程序时,设计和实现好用的用户界面无疑是至关重要的一步.但是微信小程序官方自带的 UI 组件库无法满足很多使用场景,这个时候就需要我们使用一些第三方的 UI 组件库.而 vant ...
微信小程序中 wxs的使用
本文简单介绍一下在开发微信小程序中怎么使用wxs 首先建个wxs的文件夹文件夹下有个 format.wxs fromat.wxs里代码: // 处理价钱格式保留小数 function pric ...
微信小程序中实现过滤器
微信小程序中的过滤器文章目录微信小程序中的过滤器前言一.WXS 简介 1. 什么是wxs 2. wxs的应用场景 3. wxs和JavaScript的关系 4. wxs的特点二.使用步骤 1 ...
Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
微信小程序中用户登录和登录态维护
微信小程序和以前的web项目不同,他是前后端分离的应用,之前我们的传统登录有web服务器提供Session维护, 后端在返回结果给前端web项目时,带上cookie,且以cookie值为key存储用户 ...
微信小程序中如何发送客服消息给用户
微信小程序是一种快速开发和发布应用程序的平台,可以为用户提供各种服务和功能.而与用户进行沟通和交互是实现这些目标的重要步骤之一.因此,在本文中,我们将介绍如何在微信小程序中使用客服消息来与用户进行联系 ...
微信小程序中使用JSAPI支付
微信小程序中使用JSAPI支付在微信小程序中使用微信支付api[wx.requestPayment]需要传递以下字段如何获取支付所需要的值在微信小程序中使用微信支付api[wx.requestP ...
Canvas 动画引擎解析与微信小程序中的应用
点击观看大咖分享抗击疫情,腾讯云在行动.在开发微信小程序的过程中,我们经常需要展现一些图形和图表.目前市面上有好几款常用的图形库,在这些图形库的底层都有渲染引擎在支撑. ZRender 是其中一款非 ...

《五》微信小程序中的 WXS（WeiXin Script）