提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  APP

当前栏目

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

微信 学习 程序
2023-04-18 14:49:28 时间

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

})
  1. 前台
<view>{{weekday}}view>
  1. 运行结果

重头戏来了，wxs 语法实现

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

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

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

})
  1. 前台
<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>
  1. 运行效果

二、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 的语法学习 —— 传送门

相关文章