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. AGC008 部分简要题解

    F 不妨前考虑 \(70 \%\) 的部分分,\(s\) 全部为 \(1\). 首先可以发现这个问题之所以困难是因为同一个联通子树可能可以被多个中心节点导出. 因此,我们考虑对于一个合法的联通子树,在 ...

  2. 趁着同事玩游戏偷偷认识k8s一家子补补课

    趁着同事玩偷偷认识k8s一家子补补课 Kubernetes集群这个大家庭在容器化时代能够新军崛起,要感谢其众多可靠稳定,工作认真负责的优质成员. 这些兄弟姐妹们为集群提供故障转移和高可用性,保证k8s ...

  3. eclipse的web项目导入IDE报错

    问题:eclipse的web项目导入IDE报错 第一个问题: 解决:点击enable即可 第二个问题: 解决: 解决方法: 切换文件的编码 : from UTF-8 to GBK to UTF-8 参 ...

  4. ubuntu关机重启命令介绍

    转载请注明来源:https://www.cnblogs.com/hookjc/ 重启命令: 1.reboot    2.shutdown -r now 立刻重启(root用户使用)    3.shut ...

  5. axios取消接口请求

    axios取消请求 这里就是分析一下接口请求需要被取消时的一些操作 因为我是用vue写的项目,所以标配用的是axios,怎么在axios中取消已经发送的请求呢? 1.在这之前我们还是先介绍一下原生js ...

  6. @synthesize基本概念

    1.什么是@synthesize @synthesize是编译器的指令 什么是编译器的指令 ? 编译器指令就是用来告诉编译器要做什么! @synthesize会让编译器做什么呢? @synthesiz ...

  7. LVS负载均衡群集部署——DR模式

    LVS负载均衡群集部署--DR模式 1.LVS-DR概述 2.部署实验 1.LVS-DR概述: LVS-DR(Linux Virtual Server Director Server)工作模式,是生产 ...

  8. 在公司内部网络如何搭建Python+selenium自动化测试环境

    在公司内部安装Python+selenium测试环境,由于不能连外网所以不能使用pip命令进行安装,经过多次尝试终于安装成功,现总结如下分享给大家,也希望跟大家一起学习和交流自动化网页测试时遇到的问题 ...

  9. [源码解析] NVIDIA HugeCTR,GPU版本参数服务器---(3)

    [源码解析] NVIDIA HugeCTR,GPU版本参数服务器---(3) 目录 [源码解析] NVIDIA HugeCTR,GPU版本参数服务器---(3) 0x00 摘要 0x01 回顾 0x0 ...

  10. c++ 拷贝构造函数、拷贝运算符、析构函数

    拷贝构造函数.拷贝运算符.析构函数 拷贝构造函数.拷贝运算符.析构函数 定义行为像值的类 class HasPtr{ public: HasPtr(const string &s = stri ...