微信小程序wxml文件中调用自定义函数
想在微信小程序的wxml文件里自如的像vue那样调用自定义的方法,发现并不成功,得利用WXS脚本语言。
WXS脚本语言是 WeiXin Script 脚本语言的简称,是JavaScript、JSON、WXML、WXSS之后又一大小程序内部文件类型。截至到目前小程序已经提供了5种文件类型。
WXS的使用,有两种方式。
一种是直接在WXML中编写。
<!--wxml-->
<wxs module="foo">
var some_msg = "hello world";
module.exports = { msg : some_msg, }
</wxs>
<view> {{foo.msg}} </view>
另外一种是使用单独的WXS文件,然后在WXML中引入即可:

<wxs src="../../wxs/issue.wxs" module="tools" />
wxs文件内容如下:
var timeChn = function (val) {
if (!val) {
return false
}
var reg = getRegExp("-", "g");
var _time = val.replace(reg, "/")
var realTime = getDate(val).getTime()
var nowTime = getDate().getTime()
var diffValue = nowTime - realTime
var _min = diffValue / ( * )
if (_min < ) {
return '刚刚'
} else if (_min >= && _min < ) {
return '1分钟前'
} else if (_min >= && _min < ) {
return '10分钟前'
} else if (_min >= && _min < ) {
return '半小时前'
} else if (_min >= && _min < * ) {
return Math.floor(_min / ) + '小时前'
} else if (_min >= * && _min < * * ) {
return Math.floor(_min / ( * )) + '天前'
} else {
return val
}
}
module.exports = {
timeChn: timeChn
}
在wxml文件里使用如下:
<view>{{tools.timeChn(item.createdTime)}}</view>
WXS是小程序的一套脚本语言,wxs 与 javascript 是不同的语言,有自己的语法,并不和 javascript 一致。其中包括了很多日常使用的javascript函数,在wxs中都是不能同样使用的。最近在做这个小程序的时候,涉及到时间格式化操作。就遇到了这个问题,以前写好了的格式化工具函数直接拷贝到小程序项目的wxs文件中,函数不能正常执行。其中包括了下面的几个错误:
1、正则表达式在字符串的replace函数中的使用方法不一样,不能直接使用var a = /[0-9]/这种方式声明使用。正确的方式为var reg = getRegExp("-", "g");
2、获取当前时间不能通过new Date()获取,而是通过getDate方法获取。
3、使用let声明好像有问题(此未验证,反正let改成var声明就可以了)
微信小程序wxml文件中调用自定义函数的更多相关文章
- 微信小程序 wxml 文件中如何让多余文本省略号显示?
废话不多说,之前写小程序碰到了一个问题,如何在 wxml 页面中截取数据? 1.wxs 取数据想必大家都会,不就是 substring 吗?但是这种方法在 wxml 页面中是无效的. 那还有 cs ...
- 小程序:如何在wxml页面中调用JavaScript函数
早上过来遇到一个这样的bug: 在计算百分比的时候没有保留小数点后2位,从而导致一些无法整除的结果显示太长 一开始,我以为这是一个很普通的bug,既然wxml在页面{{}}内支持简单的运算,我想也应该 ...
- 微信小程序app.js中设置公有变量
初始化GlobalData 在App.js的最上方可以设置GlobalData的初始值. App({ globalData:{ appid: '1wqas2342dasaqwe232342xxxxxx ...
- 微信小程序分享转发用法大全——自定义分享、全局分享、组合分享
官方提供的自定义分享 使用隐式页面配置函数实现的全局分享-推荐 使用隐式路由实现的全局分享-不推荐,仅供了解隐式路由 前言: 目前微信小程序只开放了页面自定义分享的API,为了能够更灵活的进行分享配置 ...
- 微信小程序在开发中遇到的问题与解决方法
1. √ 这种错误多半是该js文件中没有Page这个方法,就算是空的js也必须要把Page({ })写上去 2. √ 这种错误多半是该json文件没有内容,所以必须要加上{ },就算是空内容也要加 ...
- 微信小程序组件封装及调用-原生
封装一个弹窗组件 1.新建component文件夹存放我们的组件,里边存放的就是我们所用的组件,我们今天要做的事弹出框,新建文件夹popup存放我们的组件模板,点击右键选择新建component,就会 ...
- 微信小程序日常开发中常遇到的错误代码
在开发过程中,会遇到很多微信返回的状态码,鬼知道代表什么意思,现在好了,整理总结了一份状态码,方便大家. 微信小程序错误码参考 状态码(场景值) 说明 -1 系统繁忙 0 请求成功 40001 ...
- 【转发】【小程序】微信小程序日常开发中常遇到的错误代码
还在为看不懂小程序错误状态码纠结吗?这里推荐一篇文章 重要的事情说三遍:原文链接 https://www.cnblogs.com/webonline/p/7528778.html 作者:玩世不恭. ...
- 微信小程序WXML页面常用语法(讲解+示例)
(一) WXML 是什么 官方说明:WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构 在前面我们就已经提过,WXML,就可 ...
随机推荐
- Cdq分治整体二分学习记录
这点东西前前后后拖了好几个星期才学会……还是自己太菜啊. Cdq分治的思想是:把问题序列分割成左右两个,先单独处理左边,再处理左边对右边的影响,再单独处理右边.这样可以消去数据结构上的一个log,降低 ...
- BZOJ.1028.[JSOI2007]麻将(贪心)
题目链接 枚举对子,枚举每张牌,先出完它的刻子,剩下的出顺子.\(O(n^3)\). 不是这样 -> 出完所有刻子,最后出顺子.(日常zz) 优先仨相同的,然后顺子,有一次且一定要用一次机会补顺 ...
- 两个或多个线程执行完成之后继续执行之后的步骤,CountDownLatch与CyclicBarrier
开发过程中或多或少会遇到一个方法需要等待两个及以上线程执行结果,如此我们如何处理,这里java提供两个方法CountDownLatch 和CyclicBarrier 方法,以下依次举例说明: Coun ...
- maven执行update命令时报org/apache/maven/shared/filtering/MavenFilteringException错误
原 maven执行update命令时报org/apache/maven/shared/filtering/MavenFilteringException错误 在eclipse中对准项目执行maven- ...
- Calculate CRC32 as in STM32 hardware (EWARM v.5.50 and later)
http://supp.iar.com/Support/?note=64424&from=note+11927 BackgroundThe STM32 devices from ST Micr ...
- btrace-dtrace-for-java-ish
http://dtrace.org/blogs/ahl/2012/04/24/btrace-dtrace-for-java-ish/
- 大不列颠百科全书Encyclopaedia Britannica Ultimate 2014光盘镜像
大不列颠百科全书又名大英百科全书,是目前最古老的百科全书之一.大英百科全书每10余年出一个版本,如今已经推出到Encyclopaedia Britannica Ultimate 2014.此次推荐的是 ...
- ASP.NET MVC中使用Session来保持表单的状态
本篇实践在ASP.NET MVC 4下使用Session来保持表单的状态. 本篇的源码在这里: https://github.com/darrenji/KeepFormStateUsingSessio ...
- java根据模板HTML动态生成PDF
原文:https://segmentfault.com/a/1190000009160184 一.需求说明:根据业务需要,需要在服务器端生成可动态配置的PDF文档,方便数据可视化查看. 二.解决方案: ...
- url提交参数类
url提交参数类 type /// <summary> /// 准备url /// </summary> TynUrl = class private FUrl, FComma ...