• 首頁 > 上網技巧 > 電腦小技巧 > 微信小程序在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提供的廣告

    pk10最牛稳赚计划软件
  • 两码中特期期费公开 大乐透一等奖 龙珠直播中超 重庆欢乐生肖走势图彩经网 时时彩99倍那个网站 双色球走势图带连线图表 云南11选5中奖奖金领取 北京赛车pk10群二维码 香港赛马会排位表+资料 三肖中特期期准黄大仙准黄大8 今日nba 欢乐斗地主(腾讯版) 今年网上做什么最赚钱 四川金7乐技巧 大乐透开奖