Page({

  /**
   * 页面的初始数据
   */
  data: {
    day:1,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var day = this.data.day;
    var weekday = "";
    switch(day){
      case 1:
        weekday = "星期一";
        break;
      case 2:
        weekday = "星期二";
        break;
      case 3:
        weekday = "星期三";
        break;
      case 4:
        weekday = "星期四";
        break;
      case 5:
        weekday = "星期五";
        break;
      case 6:
        weekday = "星期六";
        break;
      case 7:
        weekday = "星期日";
        break;
      default:
        weekday = "错误的日期";
        break;
    }
    //传递参数，前面讲过两种前台后端传参的方式，又不懂的可以看 第五节内容
    this.setData({
      weekday:weekday
    })
  },

})

前台

<view>{{weekday}}</view>

运行结果

重头戏来了，wxs 语法实现

后台
保留 data 信息，其他的可以全都删除

Page({

  /**
   * 页面的初始数据
   */
  data: {
    day:4,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

})

前台

<wxs module="m">
    var getWeekDay = function(day){
    var weekday = "";
    switch(day){
      case 1:
        weekday = "星期一";
        break;
      case 2:
        weekday = "星期二";
        break;
      case 3:
        weekday = "星期三";
        break;
      case 4:
        weekday = "星期四";
        break;
      case 5:
        weekday = "星期五";
        break;
      case 6:
        weekday = "星期六";
        break;
      case 7:
        weekday = "星期日";
        break;
      default:
        weekday = "错误的日期";
        break;
    }
    return weekday;
  }
  module.exports.getWeekDay = getWeekDay;
</wxs>
 <view>{{m.getWeekDay(day)}}</view>

运行效果

二、wxs 语法之外部引用（放到 wxs 进行引用）

2.1 wxs 框架分析

首先分析 wxs语法的框架结构

<wxs module='xx'>
  //写方法体
</wxs>

wxs 特别的标签<wxs module='xx> 写方法体</wxs>
属性为 module，对应的值为 xx
在 wxs 中写的函数通过 export 绑定，也就是 module.exports.函数名 = 函数名
外部直接通过 module 的值进行调用函数体

分割线

2.2 wxs外部引用

然后创建一个 wxs 文件，把 wxs 中的代码全部加进去

index.wxs

var getWeekDay = function (day) {
  var weekday = "";
  switch (day) {
    case 1:
      weekday = "星期一";
      break;
    case 2:
      weekday = "星期二";
      break;
    case 3:
      weekday = "星期三";
      break;
    case 4:
      weekday = "星期四";
      break;
    case 5:
      weekday = "星期五";
      break;
    case 6:
      weekday = "星期六";
      break;
    case 7:
      weekday = "星期日";
      break;
    default:
      weekday = "错误的日期";
      break;
  }
  return weekday;
}

module.exports.getWeekDay = getWeekDay;

通过主页进行渲染

<wxs src='index.wxs' module="m" />
 <view>{{m.getWeekDay(day)}}</view>

手把手带你学习微信小程序 —— 六（wxs 语法学习专题）_页面加载_04

三、wxs —— require 引用

我们可以将部分 wxs 代码存放到一个 wxs 文件当中，通过 require 将 wxs 代码导入执行

还是上面的例子，我们将星期日期全部存进一个数组当中，再来渲染数据进行实时显示

wxml文件不变
创建一个tool.wxs 文件

var weekdays=[
  "星期一",
  "星期二",
  "星期三",
  "星期四",
  "星期五",
  "星期六",
  "星期日",
]
//始终 记住，使用了wxs，就用通过 exports 把数据进行导出
module.exports.weekdays = weekdays;

index.wxs 文件
这里将 tool.wxs 文件通过 require 将数据导入进行展示

var tools = require("tools.wxs");
var getWeekDay = function (day) {
  var weekdays=tools.weekdays;
  if(weekdays <1 || weekdays >7){
    return "错误的日期";
  }else{
    return weekdays[day-1];
  }

  return weekday;
}

// 使用 exports 将数据导出
module.exports.getWeekDay = getWeekDay;

运行结果同上

看到这里你以为就学完了吗，不，还有很多内容，wxs 语法还有很多内容