微信小程序 笔记8 WXS语法

WXS的作用

在传统的网页开发中，HTML中是可以写JavaScript代码的，而在小程序中，是不允许在WXML文件中写JavaScript的，但是有些时候，我们需要在wxml中实现一些逻辑的处理。

例子，我们渲染一个数字到wxml中，在wxml文件中根据这个数字来渲染具体星期几。这时候通过wxml文件中就做不了了，或者只能在JavaScript先计算好再渲染。

如下：

<!--my.wxml-->
<view>
  星期{{daycc}}
</view>

//me.js部分
data: {
    day:3
  },
  onLoad:function(options){
    var daycc=""
    switch(this.data.day){
      case 1:
      daycc="一";
      break;
     case 2:
       daycc = "二";
       break;
     case 3:
       daycc = "三";
       break;
      case 4:
        daycc = "四";
        break;
      case 5:
        daycc = "五";
        break;
      case 6:
        daycc = "六";
        break;
      case 7:
        daycc = "七";
        break;
      default:
        daycc="错误";
        break;
    } 
    this.setData({
      daycc:daycc
    })
  },
  

效果是将数字星期几转成文字星期几

那么使用wxs可以这样：

<!--me.wxml-->
<wxs module="m">
  var getday=function(day)
  { 
    var daycc=""
    switch(day){
      case 1:
      daycc="一";
      break;
     case 2:
       daycc = "二";
       break;
     case 3:
       daycc = "三";
       break;
      case 4:
        daycc = "四";
        break;
      case 5:
        daycc = "五";
        break;
      case 6:
        daycc = "六";
        break;
      case 7:
        daycc = "七";
        break;
      default:
        daycc="错误";
        break;
    } 
    return daycc;
  }
  var demo="演示文字"
  module.exports.getday=getday
  module.exports.demo=demo
</wxs>

<view>
  星期{{m.getday(5)}}
    {{m.demo}}
</view>

其中，最后一行module.exports.getday=getday的意思是将模块里的东西暴露出去，供别人调用。

语法为module.exports.函数名=暴露出去的函数名

那么出现一个问题，当需要很多东西的时候，一个个暴露出去就很麻烦，那么可以选择暴露一个对象，用法如下

module.exports={
getday:getday,
demo:demo
}

也可以在外部使用wxs文件，wxs可以理解为一个简化的js，再引用到wxml里面。

例如：

//me.wxs
var getday=function(day)
  { 
    var daycc=""
    switch(day){
      case 1:
      daycc="一";
      break;
     case 2:
       daycc = "二";
       break;
     case 3:
       daycc = "三";
       break;
      case 4:
        daycc = "四";
        break;
      case 5:
        daycc = "五";
        break;
      case 6:
        daycc = "六";
        break;
      case 7:
        daycc = "七";
        break;
      default:
        daycc="错误";
        break;
    } 

    return daycc;
  }
  var demo="演示文字1"
  module.exports.getday=getday
  module.exports.demo=demo

在wxml中

<!--me.wxml-->
<wxs src="me.wxs" module="m"></wxs>
<view>
  星期{{m.getday(5)}}
  {{m.demo}}
</view>

这种效果和上面的相同

require函数

如果在一个 wxs 文件中，想引用另外一个 wxs 文件，那么可以使用 require 函数引用。示例代码如下：

// tools.wxs
var weekday = [
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
    "星期日"
]
module.exports.person = person;

在另外一个 wxs 文件中可以进行引用。

//test2.wxs
var tools = require("tools.wxs");
var getday=function(day)
{
    var weekday=tools.weekdays
    if(day < 1 || day > 7)
    {
        return "数字有误"
    }
    else
    {
        return weekdays[day-1]
    }
}

优点：当很多地方都需要这个数据时，可以采用这种方式，就不需要在每个js里面都写一遍这些数据了。在以后数据更新的时候更加方便。

注释

注释使用 /*注释*/ 以及 //注释 的方式

另外/* xxx 的方式，这种方式会把 /* 后的所有代码全部都注释了，在小程序中也比较常用

内置类库

wxs 提供了一些内置的类库，方便开发者调用。

官方文档

wxs案例

根据时间，来显示距离现在的时间间隔。

1. 如果时间间隔小于1分钟以内，那么就显示“刚刚”
2. 如果是大于1分钟小于1小时，那么就显示“xx分钟前”
3. 如果是大于1小时小于24小时，那么就显示“xx小时前”
4. 如果是大于24小时小于30天以内，那么就显示“xx天前”
5. 否则就是显示具体的时间2017/10/20 16:15。

注意：在微信小程序wxs里面不能使用Date()，会报错

---

留个空