zoukankan      html  css  js  c++  java
  • 微信小程序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 / (60 * 1000)
      if (_min < 1) {
        return '刚刚'
      } else if (_min >= 1 && _min < 10) {
        return '1分钟前'
      } else if (_min >= 10 && _min < 30) {
        return '10分钟前'
      } else if (_min >= 30 && _min < 60) {
        return '半小时前'
      } else if (_min >= 60 && _min < 60 * 24) {
        return Math.floor(_min / 60) + '小时前'
      } else if (_min >= 60 * 24 && _min < 60 * 24 * 7) {
        return Math.floor(_min / (60 * 24)) + '天前'
      } 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声明就可以了)

  • 相关阅读:
    UNIX网络编程总结三
    UNIX网络编程总结二
    UNIX网络编程总结一
    KVM
    nginx+flask+gevent+uwsgi实现websocket
    Hypervisor
    JBPM4入门——4.封装流程管理的工具类(JbpmUtil)
    JBPM4入门——3.JBPM4开发环境的搭建
    JBPM4入门——2.在eclipse中安装绘制jbpm流程图的插件
    JBPM4入门——1.jbpm简要介绍
  • 原文地址:https://www.cnblogs.com/goloving/p/10513490.html
Copyright © 2011-2022 走看看