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>
- 运行效果: