小程序学习--wxs的用法

新版本的小程序的wxs功能可以让wsmxl可以调用和编写js

在根目录的util文件夹下,新建filter.wxs文件不能使用const const是ES6的语法 wxs无法运用

基本上wxs和JS无关系,只是语法形式很相似! 编写几个方法就把方法名写到module.exports中!

//将反斜杠转换成文字
var format = function(text){
//如果传进来的text不存在
  if(!text){
    return
  }
//正则表达式匹配
  var reg =  getRegExp('\\\\n','g')
  return text.replace(reg,'\n&nbsp;')
}
//限制获取的条数 
var limit = function (array,length){
  return array.slice(0, length)
}
module.exports = {
  format:format,
  limit:limit 
}

编写完之后,如何引入wxml文件中呢? src是引入的文件路径,module是给引入的模块,也就是wxs文件定义一个新的名字(随便取)

<!-- 引入wxs模块 -->
<wxs src="../../util/filter.wxs" module="util"/>

然后在wxml文件中需要他的地方进行调用,util值wxs文件,limit文件中的方法

<!-- 限制获取的条数 -->
<block wx:for="{{util.limit(comments,5)}}" wx:key="">

以上是wxs写在页面的外部文件的方法,现在介绍如果在页面文件中编写wxs:

module等于tool 也就是这个模块名为tool,

//wxml代码底部下编写
<wxs module="tool">
  var highlight = function(index){
    if(index==0){
      return 'ex-tag1';
    }
    if(index==1){
      return 'ex-tag2';
    }
    return ''
  }
  module.exports={
    highlight:highlight
  }
</wxs>

解析来是如何调用:highlight为模块下的方法名

<v-tag bind:tapping="onPost" tag-class="{{tool.highlight(index)}}"
            text="{{item.content}}" >

小程序学习--wxs的用法

猜你喜欢