每个.wxs文件或者标签都是一个单独的模块,当我们想在外部引入其中的私有变量或者函数时,需要module.exports实现。
示例代码:
首先在tools.wxs文件中这么编写///pages/tools.wxsvarfoo="'helloworld'fromtools.wxs";varbar=function(d){returnd;}module.exports={FOO:foo,bar:bar,};module.exports.msg="somemsg";然后在wxml页面中引用wxssrc="./tools.wxs"module="tools"/view{{tools.FOO}}/viewview{{tools.bar(5)}}/viewview{{tools.msg}}/view页面中会显示
注意事项wxs跟js相比还是有很多限制的。
比如:
它不支持es6语法,所以我们平常编码过程中使用的解构,箭头函数…都是不支持的。
定义变量只能用var或者不写代表全局。因为let,cons是es6的
数据类型wxs语法是没有symbolnullundefined的。其他的数据类型都支持。
具体都有:
number:数值string:字符串boolean:布尔值object:对象function:函数array:数组date:日期regexp:正则判断wxs中的数据类型
我们知道在js中判断数据类型可以用typeof&&Object.prototype.toString.call()
typeofundefined==='undefined'//truetypeoftrue==='bollean'//truetypeof25==='number'//truetypeof'shit'==='string'//truetypeof{name:'mars'}==='object'//true//以及es6中的SymboltypeofSymbol()==='symbol'//truetypeoffunctiona(){}==='function'//true以上6种数据类型都有与之同名的字符串与之对应。但是mull是不再其中的
typeofnull==='object'//true我们知道当遇到ArrayDateObject…时typeof都会识别为object
此时需要Object.prototype.toString.call()
但是在wxs中有属性constructor会返回相应数据类型的字符串
如图:
戳
wxs模块只能在定义模块的WXML文件中被访问到。使用include或import时,wxs模块不会被引入到对应的WXML文件中。
template标签中,只能使用定义该template的WXML文件中定义的wxs模块。
使用场景因为wxml的双括号数据绑定中对表达式的支持不够完善,因此我们可以用wxs来增强wxml的表达式。也就是可以在wxml中写函数。
接下来讲两个实际的应用场景的例子
展示天气进行数据展示//index.wxs//湿度判断humidity:function(h){if(h){return'湿度'+h+'%'}returnh},//风的等级判断windLevel:function(level){if(level==='1-2'){return'微风'}else{returnlevel+'级'}},//风的类型wind:function(code,level){if(!code){return'无风'}if(level){level=level.toString().split('-')level=level[level.length-1]returncode+''+level+'级'}returncode},因为后台返回给我们的数据数组是时间戳,但是要处理成我们想要的时间格式,比如:2019-07-17一般处理是遍历数组然后对数组中的每个时间戳对象调用时间转化函数。
但是在wxs中我们的转换函数可以这么写
//utils.wxsvarformatTime=function(date){vardate=getDate(date)varyear=date.getFullYear();varmonth=date.getMonth()+1;varday=date.getDate();return([year,month,day].map(formatNumber).join("-")+""+[hour,minute].map(formatNumber).join(':'));}varformatNumber=function(n){n=n.toString();returnn[1]?n:"0"+n;}module.exports={formatTime:formatTime,}//pages/index/index.htmlwxssrc='./utils.wxs'module="utils"blockwx:for="{{list}}"wx:key="index"/blockview{{utils.formateTime(item.time)}}/view最终实现效果如下:
【完】
【作者简介】Mars芦苇科技web前端开发工程师喜欢看电影,撸铁还有学习。擅长微信小程序开发,系统管理后台。访问了解更多。
作者主页:













