E企盈小程序营销工具技术服务商 热线:4006-838-530

wxs,小程序wxs语法详解

E企盈小程序直播系统

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前端开发工程师喜欢看电影,撸铁还有学习。擅长微信小程序开发,系统管理后台。访问了解更多。作者主页:

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » wxs,小程序wxs语法详解
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏