微信小程序开发之——WXS模块

发表于 分类于 ， ， 阅读时长 ≈ 3 分钟

一 概述

WXS(WeiXin Script)：是小程序的一套脚本语言，结合WXML，可以构建出页面的结构
WXS与JavaScript是不同的语言，有自己的语法，并不和JavaScript一致

  • 变量
  • 运算符
  • 数据类型
  • 语句
  • 基础类库
  • 模块

二 变量

2.1 概念

  • 声明变量用var
  • 变量只声明，不赋值，会被定义为undefine
  • 没有声明直接赋值使用，会被定义为全局变量

2.2 变量的命名规则

  • 首字符必须是：字母（a-zA-Z），下划线（_）
  • 剩余字符可以是：字母（a-zA-Z），下划线（_）， 数字（0-9）

2.3 示例

1
2
3
var foo = 1;
var bar = "hello world";
var i; // i === undefined

三 运算符

3.1 运算符列表

编号 运算符分类 运算符号 示例
1 基本运算符 加法(+)/减法(-)/乘法(*)/除法(/)/取余(%) var a=1+2;
2 一元运算符 自增(++)/自减(--)/正值(+)/负值(-)/否(~)/取反(!)等 a++
3 位运算符 左移(<<)/右移(>>)/无符号右移(>>>)/与运算(&)/异或运算(^)/或运算(` `)
4 比较运算符 小于(<)/大于(>)/小于等于(<=)/大于等于(>=) a < b
5 等值运算符 等号(==)/非等号(!=)/全等于(===)/非全等号(!==) a == b
6 赋值运算符 加等(+=)/减等(-=)/乘等(*=)/除等(/=)/左移等(<<=)等 a <<= 10
7 二元逻辑运算符 逻辑与(&&)/逻辑或(||) a && b
8 其他运算符 条件运算符/逗号运算符 20 === (a >= 10 ? a + 10 : b + 10)

3.2 运算符优先级

运算符的优先级别从0到20

四 [数据类型][]

编号 数据类型 示例
1 number ： 数值(整数和小数) var a = 10;
2 string ：字符串(单引号和双引号) 'hello world';
3 boolean：布尔值 var a=true;
4 object：对象(键值对) {k:"1",v:"2"}
5 function：函数 function a (x) { return x; }
6 array : 数组 var a = [];
7 date：日期 var date = getDate();
8 regexp：正则 var a = getRegExp("x", "img")

五 语句

编号 语句
1 if语句
2 switch语句
3 for语句
4 while语句

六 基础类库

编号 基础类库 类库说明
1 console 输出信息
2 Math 数学工具
3 Json Json字符串转换工具
4 Number 数字
5 Date 日期
6 Global 自带的属性(NAN)或方法(parseInt)等

七 模块

7.1 WXS模块创建的两种方式

WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内，或以 .wxs 为后缀名的文件内

wxs标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>

<wxs module="tools">
  var foo = "'hello world' from tools.wxs";
  var bar = function (d) {
    return d;
  }
  module.exports = {
    FOO: foo,
    bar: bar,
  };
  module.exports.msg = "some msg";
</wxs>

.wxs文件

tools.wxs
1
2
3
4
5
6
7
8
9
var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";
调用wxs的布局文件
1
2
3
<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>

页面效果图

7.2 WXS中的module对象和exports属性

module对象

  • 在wxml内的wxs标签中使用时<wxs module="tools">
  • wxml通过src引用外部wxs文件时<wxs src="./../tools.wxs" module="tools" />

exports属性

  • exports: 通过该属性，可以对外共享本模块的私有变量与函数

7.3 require函数

说明

  • 在.wxs模块中引用其他 wxs 文件模块，可以使用 require 函数

示例

被引用wxs文件(tool.wxs)
1
2
3
4
5
6
7
8
9
10
11
// /pages/tools.wxs

var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";
引用wxs文件的wxs文件(logic.wxs)
1
2
3
4
5
6
7
// /pages/logic.wxs

var tools = require("./tools.wxs");

console.log(tools.FOO);
console.log(tools.bar("logic.wxs"));
console.log(tools.msg);

7.4 <wxs>标签

属性名 类型 说明
src String 引用.wxs文件的相对路径
module String 当前<wxs>标签的模块名。必填字段

八 参考

  • 小程序官方文档-WXS 语法参考