微信小程序> wxs,小程序wxs语法详解

wxs,小程序wxs语法详解

浏览量:1093 时间: 来源:广州芦苇科技web前端
WXS与JavaScript是不同的语言,有自己的语法,并不和JavaScript一致。WXS的运行环境和其他JavaScript代码是隔离的,WXS中不能调用其他JavaScript文件中定义的函数,也不能调用小程序提供的API。WXS函数不能作为组件的事件回调。由于运行环境的差异,在iOS设备上小程序内的WXS会比JavaScript代码快2~20倍。在android设备上二者运行效率无差异使用方法wxs代码可以写在wxml文件中的标签内,或者以.wxs为后缀名的文件内。(ps:一般建议写在.wxs文件中)
每个.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前端开发工程师喜欢看电影,撸铁还有学习。擅长微信小程序开发,系统管理后台。访问了解更多。
作者主页:

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎