微信小程序开发|小程序脚本语言 wxs

微信小程序开发|小程序脚本语言 wxs

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

wxs 可以说就是为了满足能在页面中使用 js 存在的，在 wxml 页面中，只能在插值{{ }}中写简单的 js 表达式，而不能调用方法，例如想取出一个字符串的最后一位，就不能调用 slice() 方法。

通常的解决办法是在 page 的 data 对象中先把这个字符串截取好赋给某个变量，然后在页面中使用这个变量，但是问题又来了，如果变量多了呢，是不是要定义很多次。

WXS 代码可以编写在 wxml 文件中的 标签内，或以 .wxs 为后缀名的文件内。

在 wxml 文件中的 标签内

1、页面渲染

<!--wxml-->
<wxs module="m1">
var msg = "hello world";

module.exports.message = msg;
</wxs>

<view> {{m1.message}} </view>

2、数据处理

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5, 1, 2, 3, 4]
  }
})

3、页面输出：

hello world

.wxs 文件

.wxs 文件

// /pages/tools.wxs
var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";

页面渲染

<!-- page/index/index.wxml -->

<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>

页面输出：

some msg
'hello world' from tools.wxs

参考文档

WXS 简单介绍
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/

WXS 语法参考
https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/