微信小程序的wxs模块

wxs模块

wxs模块可以写在wxml的<wxs>标签里，也可以放在.wxs文件里。
每个.wxs文件和<wxs>标签都是一个单独的模块。每个模块都有自己独立的作用域。
一个模块向要对外暴露其内部的变量和函数，只能通过module.exports实现。

简单示例

看个例子吧。

// index.js
Page({
  data:{
    videoList:[
      {
        title:"告白气球",
        // time:"2021-6-29 10:00",
        time:1624932000000,
        src:"http://localhost:8080/videos/告白气球.mp4"
      },
      {
        title:"敢不敢爱",
        // time:"2021-6-29 11:00",
        time:1624935600000,
        src:"http://localhost:8080/videos/敢不敢爱.mp4"
      },
      {
        title:"她的眼睛会下雨",
        // time:"2021-6-29 12:00",
        time:1624939200000,
        src:"http://localhost:8080/videos/她的眼睛会下雨.mp4"
      }    
    ]
  }
})

/**index.wxss**/

.video-list{
  box-shadow: 0 8rpx 17rpx 0 rgba(7,17,27,.1);
  margin: 10rpx 25rpx;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
}
.video-list video{
  width: 100%;
  margin-top: 20rpx;
}
.video-title{
  font-size: 35rpx;
  color: #333;
}
.video-time{
  font-size:13px;
  color: #979797;
}

• 第一种：wxs模块直接写在wxml文件的<wxs>标签里

<!-- index.html -->
<wxs module="formatTime">
  module.exports = function(timestamp){
    var date = getDate(timestamp);
    var y = date.getFullYear();
    var m = date.getMonth()+1;
    var d = date.getDate();
    var h = date.getHours();
    var min = date.getMinutes();
    var s = date.getSeconds();
    return y+"-"+m+"-"+d+" "+h+":"+min+":"+s;
  }
</wxs>
<view class="video-list" wx:for="{{videoList}}" wx:key="title">
  <view class="video-title">标题：{{item.title}}</view>
  <view class="video-time">时间 :{{formatTime(item.time)}}</view>
  <video src="{{item.src}}" object-fit="fill"></video>
</view>

• 第二种：wxs模块写在.wxs文件里

  //util.wxs
  module.exports = function(timestamp){
    var date = getDate(timestamp);
    var y = date.getFullYear();
    var m = date.getMonth()+1;
    var d = date.getDate();
    var h = date.getHours();
    var min = date.getMinutes();
    var s = date.getSeconds();
    return y+"-"+m+"-"+d+" "+h+":"+min+":"+s;
  }

<!-- index.html -->
<wxs src="./util.wxs" module="formatTime"></wxs>
<view class="video-list" wx:for="{{videoList}}" wx:key="title">
  <view class="video-title">标题：{{item.title}}</view>
  <view class="video-time">时间 :{{formatTime(item.time)}}</view>
  <video src="{{item.src}}" object-fit="fill"></video>
</view>

WXS语法

详细的WXS语法可以到微信开放文档看看。
上例中，生成date对象使用getDate()，而不是js中的new Date()