想在微信小程序的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文件中调用自定义函数的更多相关文章

  1. 微信小程序 wxml 文件中如何让多余文本省略号显示?

    废话不多说,之前写小程序碰到了一个问题,如何在 wxml 页面中截取数据? 1.wxs   取数据想必大家都会,不就是 substring 吗?但是这种方法在 wxml 页面中是无效的. 那还有 cs ...

  2. 小程序:如何在wxml页面中调用JavaScript函数

    早上过来遇到一个这样的bug: 在计算百分比的时候没有保留小数点后2位,从而导致一些无法整除的结果显示太长 一开始,我以为这是一个很普通的bug,既然wxml在页面{{}}内支持简单的运算,我想也应该 ...

  3. 微信小程序app.js中设置公有变量

    初始化GlobalData 在App.js的最上方可以设置GlobalData的初始值. App({ globalData:{ appid: '1wqas2342dasaqwe232342xxxxxx ...

  4. 微信小程序分享转发用法大全——自定义分享、全局分享、组合分享

    官方提供的自定义分享 使用隐式页面配置函数实现的全局分享-推荐 使用隐式路由实现的全局分享-不推荐,仅供了解隐式路由 前言: 目前微信小程序只开放了页面自定义分享的API,为了能够更灵活的进行分享配置 ...

  5. 微信小程序在开发中遇到的问题与解决方法

    1.  √ 这种错误多半是该js文件中没有Page这个方法,就算是空的js也必须要把Page({ })写上去 2.  √ 这种错误多半是该json文件没有内容,所以必须要加上{ },就算是空内容也要加 ...

  6. 微信小程序组件封装及调用-原生

    封装一个弹窗组件 1.新建component文件夹存放我们的组件,里边存放的就是我们所用的组件,我们今天要做的事弹出框,新建文件夹popup存放我们的组件模板,点击右键选择新建component,就会 ...

  7. 微信小程序日常开发中常遇到的错误代码

    在开发过程中,会遇到很多微信返回的状态码,鬼知道代表什么意思,现在好了,整理总结了一份状态码,方便大家. 微信小程序错误码参考 状态码(场景值) 说明  -1 系统繁忙  0 请求成功  40001 ...

  8. 【转发】【小程序】微信小程序日常开发中常遇到的错误代码

    还在为看不懂小程序错误状态码纠结吗?这里推荐一篇文章 重要的事情说三遍:原文链接  https://www.cnblogs.com/webonline/p/7528778.html 作者:玩世不恭. ...

  9. 微信小程序WXML页面常用语法(讲解+示例)

    (一) WXML 是什么 官方说明:WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构 在前面我们就已经提过,WXML,就可 ...

随机推荐

  1. C语言结构体及typedef关键字定义结构体别名和函数指针的应用

    结构体(struct)的初始化 struct autonlist { char *symbol; struct nlist nl[2]; struct autonlist *left, *right; ...

  2. hdu 4452 37届金华赛区 K题

    题意:给一个n*n的格子,1在左上角,2在右下角,每个人有一个初始速度和方向,若遇到边缘,则朝相反方向前进,若两个人相遇则交换方向(注意方向改变后,人仍然需要移动),同时,每个人每过t1,t2时间就会 ...

  3. java之ibatis数据缓存

    使用IBatis作数据缓存 1.SqlMapConfig.xml中<settingscacheModelsEnabled="true" //设置为trueenhancemen ...

  4. TC SRM601

    250 水题,上来想一下就可以搞了. 500,比赛时候没有想出来,结束后补了下,感觉很简单. 只要枚举两个集合异或结果哪一位二进制位不同,因为大小由最高位不同决定. 然后进行DP就可以了,比较好的题目 ...

  5. 这里包含几乎所有的xcode正式版本

    https://developer.apple.com/downloads/

  6. C#各种泛型集合体验

    本篇体验除Queue<T>和Stack<T>之外的其它泛型集合. SortedList<TKey, TValue> SortedList<TKey, TVal ...

  7. ASP.NET MVC异步验证是如何工作的02,异步验证表单元素的创建

    在上一篇"ASP.NET MVC异步验证是如何工作的01,jQuery的验证方式.错误信息提示.validate方法的背后"中,了解了jQuery如何验证,如何显示错误信息,本篇要 ...

  8. 电子书下载:Delphi XE 5 移动开发入门手册(完整版)

    更多电子书请到: http://maxwoods.400gb.com 下载:Delphi XE5移动开发入门手册(完整版)

  9. XCODE调试时不显示变量值/指针地址的解决方案

    转:http://blog.csdn.net/samuelltk/article/details/41250151

  10. C#编程(二十三)----------实现继承

    原文链接:http://blog.csdn.net/shanyongxu/article/details/46593809 如果要声明派生自另一个类的一个类,可以使用下面的语法: class Deri ...