背景
说出来不怕大家笑话,我也是之前没写过小程序,就直接拿来就用做了一个项目,所以小程序的文档看的最多就是组件和api,但是昨天review同事代码,wxs的使用让我觉得之前自己写的很多js代码都可以更简单,话不多说,上代码;
实际例子
一、适用场景
wxs的主要作用是针对,接口的数据并不能直接渲染,例如时间格式,后端的对一些卡券之类的枚举(满减,折扣,限时,邮费等等)为数字表示,返回直接是 一个“ 1 ”代表“满减券”,那么我们前端就得展示为 满减券标志,直接在js中处理会麻烦很多,或者物流的状态枚举,卡券的使用状态;
二、对后端枚举做前端展示转化
第一步:定义wxs文件,写一个函数然后根据根据接口文档不同的枚举值返回不同的状态值,例如这里的物流状态枚举,1 为待发货,2为待收货等;
第二步:通过模块方式导出刚刚写的转换物流状态函数;
第三步:在wxml中通过wxs标签引入,并且加上moudle属性;
第四步:然后就可以在wxml中随意使用啦,用法就是indent.orderColor();正常的函数调用;
同理还可以对时间格式化
时间格式化
用法都是一致的;
注意!!!
wxs中只能写ES5及以下的方法,例如ES6的块const let 箭头函数,甚至是数组,字符串的新增方法都是不可用的例如字符串的includes是Es6的,或者数组的循环方法,都不能用;
总结
wxs主要是方便对wxml中很多同一个字段代表很多含义作处理,可以减少在js中处理或者在wxml中写很多if/else来判断显示什么的代码;如果不怎么用wxs,你很可能会对同一个字段的不同枚举写多个if来判断当前展示什么状态;所以用起来吧;这篇文章只对临时被拉去做小程序的骚年们;