微信小程序学习笔记-WXS脚本基础语法

17 阅读1分钟

一、内嵌WXS脚本

wxs代码可以编写在wxml文件中的<wxs>标签内,就像Javascript代码可以编写在html文件中的<script>标签内一样。

wxml文件中每个<wxs></wxs>标签,必须提供module属性,用来指定当前wxs模块名称,方便在wxml中访问模块中的成员:

<view>{{m1.toUpper(username)}}</view>

<wxs module="m1">
    //将文本转为大写形式zs->ZS
    module.exports.toUpper = function(str){
        return str.toUpperCase()
    }
</wxs>

注:一般用来做数据的过滤器

二、定义外联的wxs脚本

wxs代码还可以编写在以.wxs为后缀名的文件内,就像JavaScript代码可以编写在以.js为后缀名的文件中一样。示例代码:

//tools.wxs文件
function toLower(str){
    return str.toLowerCase()
}

modile.exports = {
    //不支持简写必须指定
    toLower:toLower
}

三、引入使用外联的wxs脚本

在wxml中引入外联的wxs脚本时,必须为<wxs>标签添加modulesrc属性,其中:

  • module用来指定模块的名称
  • src用来指定要引入的脚本的路径,且必须是相对路径 示例代码如下:
<!-- 调用m2模块中的方法 -->
<view>{{m2.toLower(country)}}</view>

<!-- 引用外联的tools.wxs脚本,并命名为m2 -->
<wxs src="../../utils/tools.wxs" module="m2"></wxs>