首页技术正文

小程序WXS 模块

程序员亚楠技术 2022年11月14日

0 收藏 763 点赞 3,377 浏览 900 个字

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构

WXS中定义的函数可以在wxml文件中使用，可以用它来当过滤器使用

WXS以.wxs扩展名结尾，文件中代码写法和JS类似，不支持ES6写法

1：创建wxs模块

2：

function mysub(str,start,len){var offset=start || 0;
var len= len || 10;
len= Math.min(20,len);
if(str.length<=len){
    return str;
}else{
     return str.substring(offset,len)+'...';}}
// module.exports={mysub:mysub};module.exports.mysub = mysub;

3：

调用

在wxml文件去引用

引用的时候一定要用相对应地址

每个 wxs 模块均有一个内置的 module 对象

命名空间：

<wxs src="../../tools.wxs" module="tools" />

wxjs:data数据进行循环

// pages/per/per.jsPage({    /**
     * 页面的初始数据
     */
    data: {        region: ['广东省', '广州市', '海珠区'],
        title:
        [
          {content:'上海全栈开发学院1906a闫兵上海全栈开发学院1906a闫兵上海全栈开发学院1906a闫兵'},
          {content:'上海全栈开发学院1906a闫兵上海全栈开发学院1906a闫兵上海全栈开发学院1906a闫兵上海全栈开发学院1906a闫兵'},
          {content:'上海全栈开发学院1906a闫兵上海全栈开发学院1906a闫兵上海全栈开发学院1906a闫兵上海全栈开发学院1906a闫兵'}        ]    },

wxml：代码

<!-- 引入tools.wxs -->
<wxs src="../w/tools.wxs" module="tools" /><block wx:for="{{title}}" wx:key="index">
  <view>
{{tools.mysub(item.content,0,20)}}
</view>
</block>

效果图：