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()