想在微信小程序的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. Codeforces Round #370 (Div. 2) C. Memory and De-Evolution 水题

    C. Memory and De-Evolution 题目连接: http://codeforces.com/contest/712/problem/C Description Memory is n ...

  2. Activator 动态构造对象

    Activator  意义: 用于动态构造对象 语法1: 根据指定的泛型类型构造对象 Activator.CreateInstance<类型>() 语法2: 根据程序集和类型名构造对象 S ...

  3. Mac下彻底清除.DS_Store文件夹

    1.先删除整个目录的 sudo find / -name ".DS_Store" -depth -exec rm {} \; 如果你信不过我这句话,那么可以在shell下手动进行r ...

  4. 何时调用C++复制构造函数和拷贝构造函数(转)

    1. 何时调用复制构造函数 复制构造函数用于将一个对象复制到新创建的对象中.也就是说,它用于初始化过程中,而不是常规的赋值过程中.类的复制构造函数原型通常如下: class_name(const cl ...

  5. WICED SDK 3.3.1

    7/20/2015 UPDATE: After installing the IDE you may not see all the APPs.  Press F5 in Eclipse to ref ...

  6. TCP套接字端口复用SO_REUSEADDR

    下面建立的套接字都是tcp套接字 1.进程创建监听套接字socket1,邦定一个指定端口,并接受了若干连接.那么进程创建另外一个套接口socket2,并试图邦定同一个端口时候,bind错误返回“Add ...

  7. 体验h5离线缓存

    摘要 Application Cache是浏览器自己的一种机制,随着移动互联网时代的到来,如果我们已经将需要的文件缓存下下来,一旦网络无法访问,也能继续访问.不仅能提高用户体验,而且在有网络时,也能直 ...

  8. JavaScript进阶系列06,事件委托

    在"JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数"中已经有了一个跨浏览器的事件处理机制.现在需要使用这个 ...

  9. 利用Ffmpeg获得flv视频缩略图和视频时间的代码

    问题描述:获得flv视频的缩略图和视频时间长度 谷歌了半天发现可以使用Ffmpeg获得视频的一些信息,先介绍一下FFMEPG 这里简单说一下:FFmpeg是用于录制.转换和流化音频和视频的完整解决方案 ...

  10. 奇怪的问题,疑惑?不用的 User agent 居然gzip不一样?

    问题描述: 使用同一款浏览器(Chrome Version 41.0.2272.118 (64-bit)),访问同一个地址:http://www.skhktown.com/hkcity/resourc ...