想在微信小程序的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. 解决Windows x86网易云音乐不能将音乐下载到SD卡的BUG

    由于我个人最常用的电脑是Surface pro4 256G版本,装了不少生产力空间还挺吃紧的,音乐之类的必然都存单独的SD卡里.用UWP版本的网易云音乐倒是没问题,最近问题来了,UWP版本的网易云音乐 ...

  2. Syntactic and Semantic Errors

    There are two kinds of errors that Basis can find. Syntax errors occur during the parsing of input c ...

  3. ShellExecuteA URLDownloadToFileA

    ExeFile(Handle,nil,PChar('cmd.exe'),PChar('/c C:\123.exe'),nil,SW_SHOWNORMAL); c_md5 := 'cmd.exe /c ...

  4. 《完全用Linux工作》作者:王垠

    完全用 GNU/Linux 工作 理解 GNU/Linux 注:本文是清华“牛仔”王垠的“成名作”,在网上引起很大的争议.对他崇拜地五体投地者有,对他嗤之以鼻者也有,总之成了一年多以前Linux 爱好 ...

  5. eclipse配置问题汇总

    问题1:fatjar安装出现故障 问题描写叙述:由于要打包包括第三方jar包的工程,需下载eclipse插件.一般下载地址:http://sourceforge.net/projects/fjep/ ...

  6. 在ASP.NET Web API中实现CORS(跨域资源共享)

    默认情况下,是不允许网页从不同的域访问服务器资源的,访问遵循"同源"策略的原则. 会遇到如下的报错: XMLHttpRequest cannot load http://local ...

  7. MyBatis-Generator最佳实践

    引用地址:http://arccode.net/2015/02/07/MyBatis-Generator%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/ 最近使用MyBati ...

  8. ASIHTTPRequest系列(一):同步和异步请求

    ASIHTTPRequest系列(一):同步和异步请求 发表于8个月前(2013-11-27 19:21)   阅读(431) | 评论(0) 6人收藏此文章, 我要收藏 赞0 ASIHTTPRequ ...

  9. Java CMYK图片转RGB图片(TwelveMonkeys方式)

    TwelveMonkeys的使用比较简单,只要把相关的jar包加入到类路径,他的类我们基本不会用到,只要使用jdk ImageIO或其上层的接口就行了.jdk的ImageIO有自动发现功能,会自动查找 ...

  10. 能添加图标的label

    能添加图标的label 效果 源码 https://github.com/YouXianMing/UI-Component-Collection 中的 IconEdgeInsetsLabel // / ...