最近在开发微信小程序的时候遇到了很多坑，比如单个http请求的包大小不能大于1M，的文件。json不能直接异步请求(需要转换成js导出)，生成canvas海报，滚动监控频繁使用setData等。另一个例子是本文的主题：js的公共方法不能再直接用于wxml页面。

场景是这样的。一般我们把一些常用的js函数放在utils/util.js中，但是在使用的过程中，我们发现其中的方法只能在js中调用，不能直接在wxml中使用。

所以用小程序的其他方法来实现：wxs

根据官方文件，WXS(WeiXin Script)是一种针对小程序的脚本语言，可以与WXML结合来构造页面结构。

注意

Wxs不依赖于运行时的基本库版本，可以在所有版本的小程序中运行。

Wxs和javascript是不同的语言，有自己的语法，和javascript不一致。

wxs的运行环境与其他javascript代码隔离，其他javascript文件中定义的函数不能在wxs中调用，小程序提供的API也不能被调用。

wxs函数不能用作组件的事件回调。

由于运行环境的不同，iOS设备上小程序中的wxs会比javascript代码快2 ~ 20倍。它们在安卓设备上的运行效率没有区别。

让我们用一个代码例子来说明它。

1.在utils文件夹中创建新文件，如util.wxs

2.将以下代码粘贴到util.wxs中：

var筛选器={

//返回学历背景

getDeliver:函数(i) {

if(！I)返回

var _txt=' '

开关(i) {

案例1:

_txt=' all '

破裂

案例2:

_txt='初中及以下'

破裂

案例3:

_txt='中专/中专'

破裂

案例4:

_txt='高中'

破裂

案例5:

_txt='大专'

破裂

case 6:

_txt='本科'

破裂

案例7:

_txt=' master's

破裂

案例8:

_txt='医生'

破裂

}

return _txt

},

//回归工作经验

getWorkExp:函数(i) {

if(！I)返回

var _txt=' '

开关(i) {

案例1:

_txt=' all '

破裂

案例2:

_txt='应届毕业生'

破裂

案例3:

_ txt=年内'

破裂

案例4:

_txt='1-3年'

破裂

案例5:

_txt='3-5年'

破裂

case 6:

_txt='5-10年'

破裂

案例7:

_ txt='超过10年'

破裂

}

return _txt

},

//回归工作本质

getWorkType:函数(i) {

if(！I)返回

var _txt=' '

开关(i) {

案例1:

_txt='全职'

破裂

案例2:

_txt='灵活就业'

破裂

案例3:

_txt='实习生'

破裂

}

return _txt

},

//返回工作状态

getWorkStatus:函数(i) {

if(！I)返回

var _txt=' '

开关(i) {

案例1:

_txt='离开-随时到达'

破裂

案例2:

_txt='月内到达工作岗位'

破裂

案例3:

_txt='在职-考虑机会'

破裂

案例4:

_txt='在职-暂不考虑'

破裂

}

return _txt

}

}

module.exports={

getDeliver:过滤器. getDeliver，

getworkexp : filter . getworkexp，

getWorkType:筛选器. getWorkType，

getWorkStatus:筛选器. getWorkStatus

}

3.将此文件引入到需要公共方法的wxml中：

wxs模块='filter' src='././utils/util.wxs'/wxs

路径自行调整，一般是这样的。

4.例如，在wx:for循环视图中的特定用途：

view class='job-info '

{ { filter . GetWorkExp(item . WorkYears)} } | { { filter . GetDelivery(item . EduCation LeveL)} }

/view

“item.workYears”和“item.educationLevel”这里是接口返回的数据，约定的数字对应wxs文件中的数字。