如何在小程序中使用wxs模块
发表时间:2021-1-5
发布人:葵宇科技
浏览次数:34
一. 背景
-
在小程序 wxml 中的数据渲染,可以通过双花括号的形式,花括号里面只可以进行简单的算术运算或者使用三元表达式:
{{ count }} <view> {{ count ? 1 : 0 }} view> 复制代码 -
假如需要对绑定的数据进行处理,在 wxml 进行数据渲染的时候,类比于vue可以使用 methods 的方法或者使用 computed 来处理数据,但是 wxml 并不支持这种写法。所以引入了 wxs 语法。
二. WXS语法
1.模块
-
wxs 代码可以写在 .wxs 文件内或者 标签内;
-
每一个 .wxs 文件内或者 标签都是一个独立的模块;
-
一个模块要想对外暴露其内部的私有变量与函数,只能通过 module.exports 实现。
重要:
在 wxs 模块中编写js代码,但它不同于js,变量只能使用 var 来定义。
2.使用标签形式:
在 wxml 文件里面直接使用wxs标签:
module="m1"> // -- module是wxs模块的名称,导出时候在m1对象里面
var msg = "hello world";
module.exports.message = msg;
<view> {{ m1.message }} view>
复制代码
3. 使用 .wxs 文件形式:
在 example.wxs 文件中:
var getMax = function(array) {
var max = undefined;
for (var i = 0; i < array.length; ++i) {
max = max === undefined ?
array[i] :
(max >= array[i] ? max : array[i]);
}
return max;
}
module.exports.getMax = getMax;
复制代码
在 wxml 文件中引入 .wxs 文件并使用:
module="m1" src=http://www.wxapp-union.com/"../example.wxs"> // -- src是引入路劲,只能是相对路径
<view> {{ m1.getMax([1, 2, 3, 4, 5, 1, 2, 3, 4]) }} view> // -- 使用 wxs 模块中的方法
作者:jackycai
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。