微信小程序——WXS脚本

介绍

WXS（WeiXin Script）是小程序的一套脚本语言，结合WXML，可以构建出页面的结构。

WXS语言设计时，为了降低WXS的学习成本，设计人员大量借鉴了javascript的语法，但是本质上WXS与JavaScript时完全不同的两种语言！ 

实际举例

 初学小白可能会有些晕😵，接下来举一个实际应用中的例子：

功能需求：做一个日期显示，要求格式：****年**月**日，后台已返回时间戳。

JS示例：

不使用WXS，用JS函数，看看微信小程序是否能实现功能。

JS页面内容：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    curTime:1731042039003
  },

  /**
  * 时间戳格式化处理
  * 此处先做一个简单的验证示例，验证一下JS函数是否可以在WXML中正常运行
  */
  handleDate() {
    console.log(1111)
    return "111111" 
  }
})

WXML页面内容

<!-- 显示格式化后的日期 -->
<view >时间戳：{
  {curTime}}</view>
<view >格式化后的时间：{
  {handleDate()}}</view>

运行结果：

结果没有显示，JS函数没有执行，也就是这种方法是不可用的。JS函数在WXML中需要绑定事件才可以运行。如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

JS页面内容：

// pages/demo/demo.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    username:"wx",
    num:"wsxc",
    curTime:1731042039003,
    curDate:""
  },

/* 时间戳格式化处理 */
handleDate(e) {
  console.log(e);
  var strTime=e.currentTarget.dataset.time
  var date=new Date(strTime)
  console.log(date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日")
  this.setData({
    curDate:date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"
  })
}
)}

 WXML页面内容：

<view bind:tap="handleDate" data-time="{
  {curTime}}">格式化后的时间：{
  {curDate}}</view>