首页 > 上网技巧 > 电脑小技巧 > 微信小程序在wxml中使用js公共方法

微信小程序在wxml中使用js公共方法

时间:2019-08-25 15:12 作者:QQ地带 我要评论

最近在开发微信小程序的时候遇到很多坑,比如单次http请求的包大小不能大于1M,不能直接异步请求.json的文件(需要改装成js并export),生成canvas海报,滚动监听中频繁使用setData等问题,又比如本文的主题:不能再wxml页面中直接使用js的公共方法。
 
场景是这样的,一般我们都会把一些常用的js函数放在utils/util.js里,但在使用过程中,发现它里面的方法只能在js里调用,没法直接在wxml中使用。。
 
于是利用小程序的其他方法实现:wxs
 
官方文档中提到:WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。
 
注意
 
wxs 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。
wxs 与 javascript 是不同的语言,有自己的语法,并不和 javascript 一致。
wxs 的运行环境和其他 javascript 代码是隔离的,wxs 中不能调用其他 javascript 文件中定义的函数,也不能调用小程序提供的API。
wxs 函数不能作为组件的事件回调。
由于运行环境的差异,在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。
 
下面结合代码实例来使用一下。
 
1. 在utils文件夹中新建一个文件,比如:util.wxs
 
2. 将下面代码贴进util.wxs中:
 
 
var filter = {
    // 返回学历
    getDeliver: function (i) {
        if(!i) return
        var _txt = ''
        switch(i) {
          case 1:
            _txt = '全部'
          break
          case 2:
            _txt = '初中及以下'
          break
          case 3:
            _txt = '中专/中技'
          break
          case 4:
            _txt = '高中'
          break
          case 5:
            _txt = '大专'
          break
          case 6:
            _txt = '本科'
          break
          case 7:
            _txt = '硕士'
          break
          case 8:
            _txt = '博士'
          break
        }
        return _txt
    },
    // 返回工作经验
    getWorkExp: function (i) {
        if(!i) return
        var _txt = ''
        switch(i) {
            case 1:
                _txt = '全部'
            break
            case 2:
                _txt = '应届生'
            break
            case 3:
                _txt = '1年以内'
            break
            case 4:
                _txt = '1-3年'
            break
            case 5:
                _txt = '3-5年'
            break
            case 6:
                _txt = '5-10年'
            break
            case 7:
                _txt = '10年以上'
            break
        }
        return _txt
    },
    // 返回工作性质
    getWorkType: function (i) {
        if(!i) return
        var _txt = ''
        switch(i) {
            case 1:
                _txt = '全职'
            break
            case 2:
                _txt = '灵活用工'
            break
            case 3:
                _txt = '实习生'
            break
        }
        return _txt
    },
    // 返回工作状态
    getWorkStatus: function (i) {
        if(!i) return
        var _txt = ''
        switch(i) {
            case 1:
                _txt = '离职-随时到岗'
            break
            case 2:
                _txt = '在职-月内到岗'
            break
            case 3:
                _txt = '在职-考虑机会'
            break
            case 4:
                _txt = '在职-暂不考虑'
            break
        }
        return _txt
    }
}
module.exports = {
    getDeliver: filter.getDeliver,
    getWorkExp: filter.getWorkExp,
    getWorkType: filter.getWorkType,
    getWorkStatus: filter.getWorkStatus
}
3. 在需要用到公共方法的wxml中引入该文件:
 
 
<wxs module="filter" src="../../utils/util.wxs"></wxs>
路径自行调整,一般是这样的。
 
4. 具体使用,比如在wx:for循环中的view中写道:
 
 
<view class="job-info">
{{filter.getWorkExp(item.workYears)}} | {{filter.getDeliver(item.educationLevel)}}
</view>
这里的“item.workYears”和“item.educationLevel”是接口返回的数据,约定好的数字,对应了wxs文件中的数字。

标签: 微信小程序
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告