微信小程序-WXS

文章目录

微信小程序-WXS

概述

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

WXS 的应用场景是"过滤器",所谓的过滤器是指在渲染数据之前,对数据进行处理,过滤器处理的结果最终会显示在页面上。

WXS 与 JavaScript 是不同的语言,有自己的语法,不支持 ES6 规范,并不和 JavaScript 一致。WXS 不支持 let、const、解构赋值、展开运算符、箭头函数、对象属性简写等语法,WXS 支持 var 定义变量、普通 function 函数等语法。

WXS 支持八种数据类型:

  • number : 数值
  • string :字符串
  • boolean:布尔值
  • object:对象
  • function:函数
  • array : 数组
  • date:日期
  • regexp:正则

WXS 遵循 CommonJS规范。在每个模块内部,module 变量代表当前模块,这个变量是一个对象,它的 exports 属性(即module.exports)是对外的接口。在使用 require() 函数引用其他模块时,得到的是被引用模块中 module.exports 所指的对象。

WXS 具有隔离性:隔离性是指 WXS 代码的运行环境和其他 JavaScript 代码是隔离的:

  • 在 WXS 代码中不能调用页面的JS文件定义的函数。
  • 在 WXS 代码中不能调用微信小程序提供的API。

WXS代码可以写在页面的WXML文件的标签内(内嵌WXS脚本),也可以写在以.wxs为后缀名的文件中(外联WXS脚本)。每一个.wxs文件和标签均为一个单独的模块,有自己独立的作用域,即在一个模块内定义的变量和函数默认为私有的,对其他模块不可见。一个模块想要对外暴露其内部的变量和函数,只能通过module.exports实现。

语法文档

内联WXS脚本

xml 复制代码
<wxs module="m1">
	function toUpper(str){
    	return str.toUpperCase()
    }
    module.exports = {
    	toUpper: toUpper
    }
</wxs>

<view>
	{{m1.toUpper("hello world")}}
</view>

外联WXS脚本

新建date.wxs文件:

javascript 复制代码
function handleDate(time) {
  var oDate = getDate(time);
  return oDate.getFullYear() + "-" + (oDate.getMonth() + 1) + "-" + oDate.getDate();
}

module.exports = handleDate
xml 复制代码
<wxs src="./date.wxs" module="handleCurrentDate" />
<text>{{handleCurrentDate()}}</text>

新建studentList.wxs文件:

javascript 复制代码
function filterScore(studentList) {
  return studentList.filter(function (item) {
    return item.age > 18
  })
}

function filterAge(studentList) {
  return studentList.filter(function (item) {
    return item.score > 60
  })
}

module.exports = {
  filterScore: filterScore,
  filterAge: filterAge
};

使用:

xml 复制代码
<view>过滤score大于60的</view>
<wxs src="./studentUtils.wxs" module="studentUtils" />
<view wx:for="{{studentUtils.filterScore(studentList)}}" wx:key="index">
  {{item.name}} - {{item.score}}
</view>
<view>过滤age大于18的</view>
<view wx:for="{{studentUtils.filterAge(studentList)}}">
  {{item.name}} - {{item.age}}
</view>
相关推荐
海绵宝宝不喜欢侬1 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
亮子AI1 天前
【小程序】微信小程序隐私协议
微信小程序·小程序
毕设源码-钟学长1 天前
【开题答辩全过程】以 “旧书驿站”微信小程序的设计与开发为例,包含答辩的问题和答案
微信小程序·小程序
nodcloud2 天前
点可云进销存商城如何部署在微信小程序
微信小程序·小程序
项目題供诗3 天前
微信小程序开发教程(八)
微信小程序·小程序
拼图2093 天前
微信小程序——云函数【使用使用注意事项】
微信小程序·小程序
Q_Q5110082853 天前
springboot+python+uniapp基于微信小程序的旅游服务系统景点信息展示 路线推荐 在线预约 评论互动系统
spring boot·python·微信小程序·django·flask·uni-app
海绵宝宝不喜欢侬3 天前
uniapp微信小程序保存海报到手机相册canvas
智能手机·微信小程序·uni-app·canva可画
海绵宝宝不喜欢侬4 天前
【uniapp微信小程序】扫普通链接二维码打开小程序
微信小程序·小程序·uni-app
亮子AI4 天前
【小程序】微信小程序九宫格抽奖动画(完整版)
微信小程序·小程序