2021-09-01

微信小程序的wxs使用

官方文档

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

用途： 开发中常用作过滤器，跟vue的filter相似。
wxs标签的2个属性：

1. module:当前 标签的模块名。必填字段。
2. src:引用 .wxs 文件的相对路径。仅当本标签为单闭合标签或标签的内容为空时有效。

两种使用方法：
方法一：直接在页面渲染写到wxml里

<!--wxml-->
<wxs module="m1">
    var msg = "hello world";
    module.exports.message = msg;
</wxs>

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

方法二：在项目根目录下创建一个wxs文件，在需要的组件里引入即可
每个 wxs 模块均有一个内置的 module 对象。

    // /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>