微信小程序 wxs介绍和使用

最新推荐文章于 2025-10-06 12:40:36 发布

原创最新推荐文章于 2025-10-06 12:40:36 发布 · 6.2k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #wxs

微信小程序专栏收录该内容

20 篇文章

订阅专栏

本文介绍了微信小程序中WXS的相关知识。WXS不依赖基础库版本，可在各版本小程序运行，有自己语法，与JavaScript不同且运行环境隔离。还提到其函数不能作组件事件回调，在iOS设备上比JavaScript快2 - 20倍，最后介绍了简单页面渲染和返回指定时间日期的应用。

对于没有使用过的请到官网先了解下

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/index.html?search-key=wxs

也可以去 https://www.w3cschool.cn/weixinapp/weixinapp-nvg32czm.html

wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
wxs 函数不能作为组件的事件回调。
由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

一、简单的页面渲染

.wxml

<wxs module="filter">

var joinArray= function (array) {

return array.join(' ')

}

module.exports = {

joinArray: joinArray

}

</wxs>

<view> {{filter.joinArray(names)}} </view>

二、通过wxs返回指定的时间日期

.wxs

var localData= function (value) {
  var date = getDate(value * 1000);
  var Month = date.getMonth() + 1;
  var Day = date.getDate();
  var hours = date.getHours(); //计算剩余的小时
  var minutes = date.getMinutes(); //计算剩余的分钟
  var Y = date.getFullYear() + '年';
  var M = Month < 10 ? '0' + Month + '月' : Month + '月';
  var D = Day + 1 < 10 ? '0' + Day + '日' : Day + '日';
  var H = hours < 10 ? '0' + hours + ':' : hours + ':'
  var m = minutes < 10 ? '0' + minutes : minutes;
  return M + D + "   " + H + m;
}
module.exports={
  localData:localData
}

.wxml

<wxs module='filter' src='./index.wxs' />

<view>{{filter.localData(item.endtime)}}</view>

写时间date时注意小程序语法