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>

效果图:

小程序WXS 模块的更多相关文章

  1. 安装odoo小程序商城模块报错 KeyError: u'oejia_weshop'

    错误截图如下 检查模块目录名是否不是 oejia_weshop,比如 oejia_weshop-master,注意odoo的模块名不能随便更改,odoo小程序商城模块目录名必须是oejia_wesho ...

  2. Odoo 开源微信小程序商城模块

    详见:http://oejia.net/blog/2018/09/13/oejia_weshop_about.html oejia_weshop Odoo 微信小程序商城模块 oejia_weshop ...

  3. 微信小程序蓝牙模块

    蓝牙部分知识 关于Service: 每个设备包含有多个Service,每个Service对应一个uuid 关于Characteristic 每个Service包含多个Characteristic,每个 ...

  4. 微信小程序 wxs的简单应用

    Demo地址:微信小程序wxs的简单应用 案例分析 张三.李四.王五,各自分别都有数量不等的车,现在需要列表显示名字及他们拥有车的数量, list数据结构如下,当我们使用wx:for进行显示时,发现个 ...

  5. 微信小程序 WXS实现json数据需要做过滤转义(filter)

    前言 最近有在做小程序开发,在开发的过程中碰到一点小问题,描述一下先. 本人在职的公司对于后台获取的 json 数据需要做过滤转义的很多,不同的状态码会对应不同的文字,但是在微信小程序中又没有类似 v ...

  6. 微信小程序のwxs语言

    一.wxs介绍 wxs是微信小程序自身的脚本语言,用来过滤和计算.wxs可以通过文件可模块标签来定义 文件需要.wxs后缀文件 二.实例 <wxs module="test1" ...

  7. .NET开发微信小程序-Template模块开发

    1.添加一个文件目录,里面放模板信息 例:我在根目录添加一个文件夹:template 然后在这个文件夹下面添加相应的页面.比如我添加一个promodel.wxml文件.主要是放商品相关的模块信息(注: ...

  8. 微信小程序地图模块

    微信小程序的地图模块官方提供的API比较少,详情请见   官方文档 以下为一个示例                               <!--pages/location/locati ...

  9. 微信小程序-wxs

    你想在页面上使用JavaScript代码吗? 对不起,小程序不支持! 最近,一个项目就有这样的需求,我也就用上了wxs 使用方法很简单: 项目中用的是取小数点2位以及5位 具体请看官方API:WXS

随机推荐

  1. [HNOI2009]双递增序列

    不难发现本题贪心是不好做的,可以考虑 \(dp\). 首先的一个想法就是令 \(dp_{i, j, k, l}\) 表示当前选到第 \(i\) 个位置,当前第一个序列选了 \(j\) 个数,当前第一个 ...

  2. UIView与核心动画对比?

    1.UIView和核心动画区别?        核心动画只能添加到CALayer        核心动画一切都是假象,并不会改变真实的值.             2.什么时候使用UIView的动画? ...

  3. element-ui 使用 Select 组件给 value 属性绑定对象类型

    qq_36437172 2020-06-28 22:38:49  778  收藏 分类专栏: element-ui 文章标签: element-ui Select 组件 value 属性 绑定 对象类 ...

  4. php函数(parse_str()

    parse_str()函数 把查询字符串解析到变量中 parse_str(string, array); string 规定要解析的字符串 array 存储变量的数组名称 例子: <?php p ...

  5. Java多线程之读写锁机制

    Java多线程中有很多的锁机制,他们都有各自的应用场景,例如今天我说的这种锁机制:读写锁 读写锁,见名知意,主要可以进行两种操作,读和写操作,他们之间结合使用起来又是各不相同的.比如多个线程之间可以同 ...

  6. Solution -「UNR #5」「UOJ #671」诡异操作

    \(\mathcal{Desciprtion}\)   Link.   给定序列 \(\{a_n\}\),支持 \(q\) 次操作: 给定 \(l,r,v\),\(\forall i\in[l,r], ...

  7. Solution -「LOCAL」充电

    \(\mathcal{Description}\)   给定 \(n,m,p\),求序列 \(\{a_n\}\) 的数量,满足 \((\forall i\in[1,n])(a_i\in[1,m])\l ...

  8. 怎么说服领导,能让我用DDD架构肝项目?

    作者:小傅哥 博客:https://bugstack.cn 原文:https://mp.weixin.qq.com/s/ezd-6xkRiNfPH1lGwhLd8Q 沉淀.分享.成长,让自己和他人都能 ...

  9. JAVA8学习——深入浅出方法引用(学习过程)

    方法引用:method reference 先简单的看一下哪里用到了方法引用: public class MethodReferenceTest { public static void main(S ...

  10. 使用Redis完成定时任务

    应用场景:在订单业务中,有时候需要对订单设置有效期,有效期到了后如果还未支付,就需要修改订单状态; 与设备进行长链接,如果一段时间内没有收到设备发送的心跳,则修改状态 1.引入依赖 <depen ...