小程序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>
效果图:

小程序WXS 模块的更多相关文章
- 安装odoo小程序商城模块报错 KeyError: u'oejia_weshop'
错误截图如下 检查模块目录名是否不是 oejia_weshop,比如 oejia_weshop-master,注意odoo的模块名不能随便更改,odoo小程序商城模块目录名必须是oejia_wesho ...
- Odoo 开源微信小程序商城模块
详见:http://oejia.net/blog/2018/09/13/oejia_weshop_about.html oejia_weshop Odoo 微信小程序商城模块 oejia_weshop ...
- 微信小程序蓝牙模块
蓝牙部分知识 关于Service: 每个设备包含有多个Service,每个Service对应一个uuid 关于Characteristic 每个Service包含多个Characteristic,每个 ...
- 微信小程序 wxs的简单应用
Demo地址:微信小程序wxs的简单应用 案例分析 张三.李四.王五,各自分别都有数量不等的车,现在需要列表显示名字及他们拥有车的数量, list数据结构如下,当我们使用wx:for进行显示时,发现个 ...
- 微信小程序 WXS实现json数据需要做过滤转义(filter)
前言 最近有在做小程序开发,在开发的过程中碰到一点小问题,描述一下先. 本人在职的公司对于后台获取的 json 数据需要做过滤转义的很多,不同的状态码会对应不同的文字,但是在微信小程序中又没有类似 v ...
- 微信小程序のwxs语言
一.wxs介绍 wxs是微信小程序自身的脚本语言,用来过滤和计算.wxs可以通过文件可模块标签来定义 文件需要.wxs后缀文件 二.实例 <wxs module="test1" ...
- .NET开发微信小程序-Template模块开发
1.添加一个文件目录,里面放模板信息 例:我在根目录添加一个文件夹:template 然后在这个文件夹下面添加相应的页面.比如我添加一个promodel.wxml文件.主要是放商品相关的模块信息(注: ...
- 微信小程序地图模块
微信小程序的地图模块官方提供的API比较少,详情请见 官方文档 以下为一个示例 <!--pages/location/locati ...
- 微信小程序-wxs
你想在页面上使用JavaScript代码吗? 对不起,小程序不支持! 最近,一个项目就有这样的需求,我也就用上了wxs 使用方法很简单: 项目中用的是取小数点2位以及5位 具体请看官方API:WXS
随机推荐
- file类和fileinfo类的简单对比
File类:提供用于操作文件的静态方法. FileInfo类:提供操作文件的属性和实例方法. Directory类:提供用于操作目录的静态方法. DirectoryInfo类:提供用于操作目录的实例方 ...
- Nginx 根据不同的域名来代理转发内部主机-HTTP和HTTPS
一.需求 由于公司只有一个公网,很多 web 项目都想通过 80 或 443 端口来访问,所以需要 Nginx 充当公司网关. 把唯一的公网 IP 80 端口和 443 端口跟 Nginx 网关主机 ...
- 洛谷P4859 已经没有什么好害怕的了
因为不存在任意两个数相同,那么设糖果比药片大的组有 \(x\) 个,药片比糖果大的组有 \(y\) 个,那么我们有: \[x + y = n, x - y = k \] 即: \[x = \frac{ ...
- 抓包神器 tcpdump 使用介绍 (转)
tcpdump 命令使用简介 简单介绍 tcpdump 是一款强大的网络抓包工具,运行在 linux 平台上.熟悉 tcpdump 的使用能够帮助你分析.调试网络数据. 要想使用很好地掌握 tcpdu ...
- 4、网络并发编程--僵尸进程、孤儿进程、守护进程、互斥锁、消息队列、IPC机制、生产者消费者模型、线程理论与实操
昨日内容回顾 操作系统发展史 1.穿孔卡片 CPU利用率极低 2.联机批处理系统 CPU效率有所提升 3.脱机批处理系统 CPU效率极大提升(现代计算机雏形) 多道技术(单核CPU) 串行:多个任务依 ...
- Solution -「CF 487E」Tourists
\(\mathcal{Description}\) Link. 维护一个 \(n\) 个点 \(m\) 条边的简单无向连通图,点有点权.\(q\) 次操作: 修改单点点权. 询问两点所有可能路 ...
- 1、Oauth概念与模式
参考 OAuth 2.0 的一个简单解释
- 菜鸟到大神之多图预警——从 RAID 到分布式系统中的副本分布
我们知道,在面对大规模数据的计算和存储时,有两种处理思路: 垂直扩展(scale up):通过升级单机的硬件,如 CPU.内存.磁盘等,提高计算机的处理能力. 水平扩展(scale out):通过添加 ...
- 命令行下Git调用IDEA的diff功能
命令行下git diff, 有人欢喜有人厌, 本文以IDEA diff为例, 介绍如何更换Git的diff工具. IDEA diff IDEA作为一个图形化工具, 其实也提供了极少一部分命令行接口, ...
- 主流的商业智能BI工具推荐,学会数据分析没难度
伴随着大数据概念的深入企业越来越重视大数据,商业智能BI工具已经成为许多企业数据分析的首选.也许有些小伙伴对商业智能BI工具还是有些陌生,在了解商业智能BI工具之前,先来了解一下什么是商业智能. 百度 ...
