小程序 WXS模块

WXS模块

案例分析

例如：定义wxs模块，将字符串转小写，并且截取子串

• 目录结构：

• utils/wxs/common.wxs文件代码

/* 
  1. wxs是一个微信脚本机制，weixin script
  2. wxs后缀是“.wxs”
  3. 一般存储于utils目录下
  4. 可以封装函数，但不支持es6写法，写了就报错
  5. 封装好的函数在使用的时候需要导出，因此不支持es6写法，所以不能使用es6的模块规范，得用commonJS模块化规范
*/

// 封装一个函数，实现将字符串转小写，截取子串

function parseString(str,len){
  return str.toLowerCase().slice(0,len);
}

// 导出，使用CommonJS规范
module.exports = {
  parseString :parseString
}

• pages/main/main/wxml文件代码

<!--miniprogram/pages/main/main.wxml-->


<view class="container">
    mian页面
</view>

<!-- 
    wxs类似于vue中过滤器，因为vue的过滤器在视图部分使用，所以wxs的使用也在视图部分
    1. 导入wxs模块：通过wxs标签导入
    2. 使用wxs模块封装的方法
 -->
 <!-- 导入，需要通过module起名字 -->
 <wxs src="/utils/wxs/common.wxs" module="tool"></wxs>
 <view>
    {{tool.parseString("KJFOAIlkjaLJFIOJlkdjslalfj",8)}}
 </view>

• 运行效果：