小程序WXS 模块

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.js

Page({

    /**
     * 页面的初始数据
     */
    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>

效果图:

 

posted @   王越666  阅读(219)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示