微信小程序学习记录（一）：简单使用WXS

最新推荐文章于 2024-04-19 04:18:29 发布

FaerieDragon1

最新推荐文章于 2024-04-19 04:18:29 发布

阅读量912

点赞数

分类专栏：学习记录文章标签：小程序

本文链接：https://blog.csdn.net/FaerieDragon1/article/details/112885671

版权

学习记录专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

一、WXS是什么？
二、简介
总结

一、WXS是什么？

WXS(WeiXin Script) 是小程序的一套专属的脚本语言,结合 WXML,可以构建出页面的结构。

为减低学习语言的成本，WXS语法上与JavaScript类似，且wxml 中可以调用 wxs 中定义的函数。因此，小程序中 wxs 的典型应用场景就是“过滤器”，也可以做计算处理。

二、简介

1.模块

WXS 代码可以编写在 wxml 文件中的标签内，或以 .wxs 为后缀名的文件内。
每一个 .wxs 文件和标签都是一个单独的模块。

每个模块都有自己独立的作用域 。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。

一个模块要想对外暴露其内部的私有变量与函数，只能通过module.exports 实现。

module

每个 wxs 模块均有一个内置的 module 对象。

module 属性是当前标签的模块名。在单个 wxml 文件内，建议其值唯一。有重复模块名则按照先后顺序覆盖（后者覆盖前者）。不同文件之间的 wxs 模块名不会相互覆盖。

exports

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

require

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

引用的时候，要注意如下几点：

只能引用 .wxs 文件模块，且必须使用相对路径。
wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。

示例代码：
在这里插入图片描述

两个例子中的输出结果均为“hello world！”。

2.运算符

在这里插入图片描述

一元运算符

var a = 10, b = 20;

// 自增运算
console.log(10 === a++);
console.log(12 === ++a);
// 自减运算
console.log(12 === a--);
console.log(10 === --a);
// 正值运算
console.log(10 === +a);
// 负值运算
console.log(0-10 === -a);
// 否运算
console.log(-11 === ~a);
// 取反运算
console.log(false === !a);
// delete 运算
console.log(true === delete a.fake);
// void 运算
console.log(undefined === void a);
// typeof 运算
console.log("number" === typeof a);

特别注意a++, ++a的算法计算先后差别。此处使用的console.log是基础类库中的方法。

3.数据类型

在这里插入图片描述

function

语法
function 支持以下的定义方式：

//方法 1
function a (x) {
  return x;
}

//方法 2
var b = function (x) {
  return x;
}

arguments

function 里面可以使用 arguments 关键词。该关键词目前只支持以下的属性：

length: 传递给函数的参数个数。
[index]: 通过 index 下标可以遍历传递给函数的每个参数。

示例代码：

var a = function(){
  console.log(3 === arguments.length);
  console.log(100 === arguments[0]);
  console.log(200 === arguments[1]);
  console.log(300 === arguments[2]);
};
a(100,200,300);