2023年尚硅谷大前端学习笔记
6.WXS 脚本语言 6.1 什么是 wxs1、概念WXS 是微信小程序中的一种脚本语言，结合 WXML，可以构建出页面的结构。类似于JavaScript，但与 JavaScript 不同，WXS 有自己的语法
2、wxs 和 JavaScript 的区别
[*]wxs 有自己的数据类型
[*]wxs 支持 CommonJS 模块化规范，可以将代码拆分为多个模块，提高代码的可读性和维护性
[*]wxs 支持基本的 JavaScript 语法和一些特有的语法，例如 模板字符串、var 等wxs 不支持 ES6 及以上的语法形式，例如：let 、const、解构等等等都不能使用
3、wxs 的使用场景
[*]数据处理：实现类似于过滤器一样的功能，例如格式化日期、格式化数据等等
[*]逻辑控制：例如条件判断、循环、函数调用等等，也可以放在 wxs 中处理用以简化模板其他....
6.2 wxs 中的基础使用1、说明
WXS 代码可以编写在 wxml 文件中的标签内，或以 .wxs 为后缀名的文件内
2、定义模块
[*]每一个 .wxs 文件和标签都是一个单独的模块，每个模块都有自己独立的作用域
[*]即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现
// /wxs/tools.wxs
var name = "Hello WXS"
var handler = function(val) {
return val.toUppercase()
}
// module : 每个 wxs 模块均有一个内置的 module 对象，
// exports: 通过该属性，可以对外共享本模块的私有变量与函数
module.exports = {
name: name,
handler: handler
}3、.wxml 中使用模块
在 .wxml 中引用 wxs 文件模块，需要使用 wxs 标签，引用的 .wxs 文件必须是相对路径可以通过 module 属性指定当前标签的模块名可以通过 src 属性可以用来引用其他的 wxs 文件模块
{{ tools.name }}
{{ tools.handler('wxs')}}
在 .wxs 模块中使用 require 函数可以引用其他 wxs 文件模块：
var tools = require("../wxs/tools.wxs");
console.log(tools.name);
console.log(tools.bar("wxs"))4、示例
var name = 'Tom'
function handle() {
return name
}
module.exports = {
name: name,
handle: handle
}
{{ module.name }}
{{ module.handle() }}
{{ module1.formatPhone('18361261111') }}
6.3 wxs 过滤器案例1、需求
实现对手机号的格式化，将手机的 第四位 到 第七位 使用 * 号代码
file://F:/32.%E6%88%91%E7%9A%84%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/2022%E5%B9%B4%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/14-%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%B0%9A%E7%A1%85%E8%B0%B7/01-%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%9F%BA%E7%A1%80.assets/%E6%A0%BC%E5%BC%8F%E5%8C%96%E6%89%8B%E6%9C%BA%E5%8F%B7.jpg?lastModify=16967234372、实现步骤
[*]在小程序项目中创建一个名为 /wxs/phone.wxs 的 WXS 文件，用于编写封装函数
[*]在 phone.wxs 文件中，编写一个名为 formatPhone 的函数，用于格式化手机号在小程序的页面中，引入 phone.wxs 文件，并调用 formatPhone 函数
3、落地代码
pages/index/index.wxs 中的代码：
// 格式化手机
function formatPhone(phone) {
// 如果手机长度不等于 11，直接将手机号返回
if (phone.length != 11) {
return mobile;
}
return phone.slice(0, 3) + '****' + phone.slice(7);
}
// 导出模块
module.exports = {
formatPhone: formatPhone
}
pages/index/index.wxml 中的代码：
格式化后的号码：{{phone.formatPhone(phoneNum)}}
资源下载地址和密码（百度云盘）：**** Hidden Message ***** 百度网盘信息回帖可见
本资源由Java自学网收集整理【www.javazx.com】 2023年尚硅谷大前端学习笔记 2023年尚硅谷大前端学习笔记 强烈支持楼主ing…… 强烈支持楼主ing…… 真是难得给力的帖子啊。 学习学习啦 66666，很棒 这么优秀的么 好，很好，非常好！