《五》微信小程序中的 WXS(WeiXin Script)

news/2024/10/30 23:19:20/

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

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

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

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

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

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

  1. 编写在 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>	
    
  2. 编写在以 .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 个参数:

  1. event:在小程序事件对象的基础上多了 event.instance 对象来表示触发事件的组件的 ComponentDescriptor 实例。
  2. 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 事件的响应过程为:

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

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

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


http://www.ppmy.cn/news/305216.html

相关文章

微信小程序2-WXSS,WXS

微信小程序1-小程序基础,开发工具安装使用 1.WXSS WXSS (WeiXin Style Sheets)是一套样式语言&#xff0c;用于描述 WXML 的组件样式 为了适应广大的前端开发者&#xff0c;WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序&#xff0c;WXSS 对 CSS 进行了扩充以及修…

微信小程序基础02--WXML,WXSS基础

1.WXML语法参考 1.1数据绑定 WXML 中的动态数据均来自对应 Page 的 data。数据绑定&#xff0c;js文件里的data属性,在wxml中直接使用{{ }}进行绑定。与vue的写法十分相似。 特别注意&#xff1a;bool类型不要直接写 checked“false”&#xff0c;其计算结果是一个字符串&…

wx小程序

wx小程序 1.基础知识点 数据在js的data中绑定 在.wxml中渲染使用双花括号 即&#xff1a;{{}} 在渲染时可以用三元表达式和算法 在.wxss中写css样式 .wxml中没有div 标签&#xff0c;但是有相对应的标签view 2.事件绑定 1).点击事件 给标签绑定事件 <text>{{num…

微信小程序开发之——weui-wxss的使用

概述&#xff1a; WeUI 是一套同微信原生视觉体验一致的基础样式库&#xff0c;由微信官方设计团队为微信内网页和微信小程序量身设计&#xff0c;令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。 预览&…

微信小程序 Wxs篇

WXS&#xff08;WeiXin Script&#xff09;是小程序的一套脚本语言&#xff0c;结合 WXML&#xff0c;可以构建出页面的结构。 【注意】 WXS 不依赖于运行时的基础库版本&#xff0c;可以在所有版本的小程序中运行。WXS 与 JavaScript 是不同的语言&#xff0c;有自己的语法&…

入门微信小程序开发(二)wxml与wxss

一.初识WXML 对于每一位前端开发者而言&#xff0c;熟练的编写静态页面是入门的开始&#xff0c;在小程序中这一点也无法避免。在介绍微信小程序功能交互之前&#xff0c;我们先了解在小程序中如何实现页面布局与页面样式&#xff0c;这里先来介绍WXML。 WXML全称WeiXin Mark…

【微信小程序WXS 模块】

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

小程序wxs使用教程

1、什么是wxs wxs是小程序的一种脚本语言&#xff0c;它类似JavaScript&#xff0c;但是与JavaScript有所不同。wxs是一种数据绑定和逻辑处理的语言&#xff0c;它可以在wxml中使用&#xff0c;并且可以在wxml中直接调用。使用wxs可以实现更高效、更灵活的数据处理和渲染。 2…