手把手带你学习微信小程序 —— 六（wxs 语法学习专题）

WXS 语法学习

• 一、wxs初体验
• 二、wxs 语法 之外部引用（放到 wxs 进行引用）
• 三、wxs —— require 引用

一、wxs初体验

具体内容以官方介绍为主，这里只是浅显的介绍

• wxs 的官方介绍 —— 传送门
• wxs 的语法学习 —— 传送门

简单来说，wxs就是微信小程序自己的一套脚本语言，你可以理解为在 wxml 文件中写 JavaScript 代码，接下来我们就用 code 来带大家体验一下 wxs 语言

1.1 场景描述

很多同学肯定写过这样的题目，输入一个数字[1~7] ，输出与之对应的星期日期，这里我们也用小程序实现一下。

1.2 code 实现

普通方法实现

1. 后台
   .js文件

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
    })
  },

})

2. 前台

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

3. 运行结果
   

重头戏来了，wxs 语法实现

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

Page({

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

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

})

2. 前台

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

3. 运行效果
   

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

2.1 wxs 框架分析

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

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

1. wxs 特别的标签<wxs module='xx> 写方法体</wxs>
2. 属性为 module，对应的值为 xx
3. 在 wxs 中写的函数通过 export 绑定，也就是 module.exports.函数名 = 函数名
4. 外部直接通过 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 —— require 引用

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

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

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

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

3. 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 语法还有很多内容

1. 数据类型
2. 注释方式
3. 运算符
4. 一些基本的类库
5. bulabulabula

这里有非常详细的介绍

• wxs 的语法学习 —— 传送门