微信小程序-WXS脚本

wxs 和 JavaScript 的关系

虽然 wxs 的语法类似于JavaScript ，但是wxs 和 JavaScript 是完全不同的两种语言

①wxs 有自己的数据类型

· number 数值类型、 string 字符串类型、 boolean 布尔类型、 object 对象类型、

· function 函数类型、 array 数组类型、 date日期类型、 regwxp 正则

②wxs 不支持类似于ES6以上的语法形式

· 不支持：let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc...

· 支持: var 定义变量、普通function 函数等类似的ES5的语法

③wxs 遵循CommonJS规范

· modle 对象

· require () 函数

· module.exports 对象

基本用法：

内嵌wxs脚本

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

wxml 中访问模块中的成员：

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

<wxs module="m1">

   module.exports.toUpper = function(str){

       return str.toUpperCase();

   }

</wxs>

定义外联的wxs 脚本

wxs代码还可以编写在以 .wxs 为后缀名的文件内，就像javascript 代码可以编写在.js为后缀名的文件中一样。示例代码如下：

定义外联的wxs脚本：

在utils 文件夹中创建一个后缀 .wxs文件，按照下面的写法：

function tolower(str){

   return str.toLower();

}

function toUpper(){

    return str.toUpper();

}

module.exports = {

    toLower:toLower,

    toUpper:toUpper

}

如何使用外联wxs脚本：

在wxml 中引入外联的wxs 脚本时，必须为<wxs>标签添加 module 和 src 属性，其中：

· module 用来指定模块名称

· src 用来引入指定要引入的脚本的路径，且必须时相对路径

示例代码：

在wxs脚本文件中加入：

function toLower(str){

   return str.toLowerCase()

}

function toUpper(str){

    return str.toUpperCase()

}

module.exports = {

    toLower:toLower,

    toUpper:toUpper

}

在wxml文件中引入外联wxs脚本的写法：

<view>{{m2.toLower(country)}}</view>

<wxs src = "../../utils/tools.wxs" module = 'm2'></wxs>

注意：tools.wxs的文件可以自己创建：

WXS的语法注意要点

wxs的典型应用场景就是“过滤器”， 经常配合 Mustache 语法进行使用，例如：

< view >{{ m2 . toLower ( country ) }}</ view >

但是，在wxs中定义的函数不能作为组件的事件回调函数。例如，下面的语法是错误的：

< button  bindtap  = " m2.toLower ">按钮</ button >

①wxs 不能调用 js 定义的函数

②wxs 不能调用小程序提供的API