小程式的wxs指令碼(類似過濾器)

尤加利葉發表於2020-12-18

1.內嵌wxs指令碼

wxs程式碼可以編寫在wxml檔案中的<wxs>標籤內 就像JavaScript程式碼可以寫在HTML檔案中的<script>標籤內

wxml檔案中的每個<wxs></wxs>標籤 必須提供module屬性 用來指定當前wxs的模組名稱 方便在wxml中訪問模組中的成員

<view>{{m1.toUpper(username)}}</view>

<wxs module='m1'>
    //將文字轉為大寫形式 za -ZS
    module.exports.toUpper = function(str){
        return str.toUpperCase()
}

</wxs>

2.定義外聯的wxs指令碼

建立在utils資料夾中

wxs程式碼還可以編寫在以.wxs為字尾名的檔案內,就像JavaScript程式碼可以編寫在以.js為字尾名的檔案中一樣

//tools.wxs檔案
function toLower(str){
    return str.toLowerCase()
}

module.exports = {
    toLower:toLower
}

在wxml中引入外聯的wxs指令碼時 必須為<wxs>標籤新增modulesrc屬性

  • module 用來指定模組名稱
  • src用來指定引入的指令碼的路徑 且必須是相對路徑
<!-- 呼叫m2模組中的方法 -->
<view>{{m2.toLower(country)}}</view>

<!-- 引入外聯的 tools.wxs 指令碼 並命名為m2 -->
<wxs src='../../utils/tools.wxs' module='m2'></wxs>

 

相關文章