微信小程序wxs

一、微信小程序中的wxs 是什么？

wxs 是微信小程序提供的一套独有的脚本语言。它和javascript 非常像，但是又有所不同，它结合wxml 可以构建构建出页面结构。下面先来看一下具体用法。

二、wxs 的内联用法

index.wxml

html 复制代码

<view>
    <wxs module="m1">
        module.exports.filterNumber = function (arr) {
            return arr.filter(function (item) {
                return item % 2 === 0
            })
        }
    </wxs>
    <view wx:for="{{m1.filterNumber(list)}}" wx:key="index">{{item}}</view>
</view>

index.js

js 复制代码

// index.js
Page({
    data: {
        list: [
            1, 2, 3, 4, 5, 6
        ]
    }
})

运行效果：

wxs 有几个特点：

wxs 代码都必须写在wxs 标签之间（内联的，外联可以写在.wxs文件中）
每个标签都必须有一个module属性，这是wxs的唯一id, 在wxml模板中要使用wxs标签中定义的方法必须通过module定义的属性值进行调用。
wxs中定义的方法必须通过module.exports 进行导出，只能使用commonjs规范，不能使用es6 的导出规范
在wxs 中不支持es6语法，比如let const 等是不能使用的
wxs 中定义的函数不能作为模板中的事件回调。

我们来证明下最后一个点，其他几点在这里就演示了，大家自己尝试下。

html 复制代码

<view>
    <wxs module="m1"src="../../wxs/filter-list.wxs"> 
    </wxs>
    <view wx:for="{{m1.filterNumber(list)}}" wx:key="index">{{item}}</view>
    <button bindtap="m1.filterNumber(list)" type="primary">按钮</button>
</view>

点击按钮，你会发现事件没有触发，并且控制台会有警告 Component "pages/index/index" does not have a method "m1.filterNumber(list)" to handle event "tap". 大概意思就是没有定义m1.filterNumber(list) 方法，也就验证了 wxs 中定义的函数不能作为模板中的事件回调。

三、外联的使用方式：

index.wxml

html 复制代码

<view>
    <wxs module="m1"src="../../wxs/filter-list.wxs"> 
    </wxs>
    <view wx:for="{{m1.filterNumber(list)}}" wx:key="index">{{item}}</view>
</view>

filter-list.wxs

js 复制代码

module.exports.filterNumber = function (arr) {
    return arr.filter(function (item) {
        return item % 2 === 0
    })
}

从上面的例子可以看到，引用外部的wxs,首先定义一个wxs的文件，并且导出模板需要的方法属性，然后在模板中通过wxs标签的src 引用,并且只能引用 .wxs 文件模块，且必须使用相对路径

三、wxs 文件中引用wxs 文件

在.wxs 文件中可以继续引用wxs 文件，只能引用wxs 文件，不能引用其他的文件，在.wxs文件中使用require 引用外部的wxs文件。具体使用方式如下：

index.wxml

html 复制代码

<view>
    <wxs module="m1"src="../../wxs/filter-list.wxs"> 
    </wxs>
    <view wx:for="{{m1.filterNumber(list)}}" wx:key="index">{{item}}</view>
    <view>姓名： {{m1.info.name}}</view>
    <view>年龄： {{m1.info.age}}</view>
</view>

filter-list.wxs

js 复制代码

var info = require('./info.wxs')

module.exports.filterNumber = function (arr) {
    return arr.filter(function (item) {
        return item % 2 === 0
    })
}
module.exports.info = info

info.wxs

js 复制代码

var info = {
    name: 'xiaoming',
    age: 20
}

module.exports = info

运行效果如下：

四、总结

本篇介绍了微信小程序中wxs 的内联用法和外联用法，以及wxs 的优点，缺点，注意点，在开发中可以适当的使用wxs 实现逻辑的复用。减少代码体积

微信小程序wxs

一、 微信小程序中的wxs 是什么？

二、wxs 的内联用法

三、外联的使用方式：

三、wxs 文件中引用wxs 文件

四、总结

一、微信小程序中的wxs 是什么？