2023年尚硅谷大前端学习笔记

巩尊淑 · 发表于 2023-10-8 12:12:01

6.WXS 脚本语言 6.1 什么是 wxs1、概念

2、wxs 和 JavaScript 的区别

wxs 有自己的数据类型
/ f0 d# M2 @0 [* d9 P+ w$ y. x) d
wxs 支持 CommonJS 模块化规范，可以将代码拆分为多个模块，提高代码的可读性和维护性3 ^0 y% H2 W5 n% s/ ^' X
wxs 支持基本的 JavaScript 语法和一些特有的语法，例如模板字符串、var 等wxs 不支持 ES6 及以上的语法形式，例如：let 、const、解构等等等都不能使用
2 M Y" @1 \- H5 a% L

3、wxs 的使用场景

数据处理：实现类似于过滤器一样的功能，例如格式化日期、格式化数据等等
( V; B' l, ]6 J5 L: _8 W: f1 c- O& u1 r
逻辑控制：例如条件判断、循环、函数调用等等，也可以放在 wxs 中处理用以简化模板其他....
6 ^ k- ? f( R l$ N! o

6.2 wxs 中的基础使用1、说明

2、定义模块

每一个 .wxs 文件和标签都是一个单独的模块，每个模块都有自己独立的作用域
% p0 N9 J/ W' ~9 ~% ^, h/ C2 _
即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现
% w7 F. G4 b+ b* v! p

// /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 中使用模块

引用的 .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 文件，用于编写封装函数
+ Y$ q9 o* s( v9 y: @; n" g
在 phone.wxs 文件中，编写一个名为 formatPhone 的函数，用于格式化手机号在小程序的页面中，引入 phone.wxs 文件，并调用 formatPhone 函数
- \- A8 o+ t) Z+ v) l1 w* J

3、落地代码

// 格式化手机
function formatPhone(phone) {
// 如果手机长度不等于 11，直接将手机号返回
if (phone.length != 11) {
return mobile;
}

return phone.slice(0, 3) + '****' + phone.slice(7);
}

// 导出模块
module.exports = {
formatPhone: formatPhone
}


格式化后的号码：{{phone.formatPhone(phoneNum)}}

资源下载地址和密码（百度云盘）：

游客，如果您要查看本帖隐藏内容请回复

[/hide] 百度网盘信息回帖可见

本资源由Java自学网收集整理【www.javazx.com】

申哥 · 发表于 2023-10-8 11:25:28

2023年尚硅谷大前端学习笔记

迈开脚才能走 · 发表于 2023-10-8 11:38:38

2023年尚硅谷大前端学习笔记

爱智客 · 发表于 2023-10-8 11:56:21

强烈支持楼主ing……

聚散随缘 · 发表于 2023-10-8 12:04:59

强烈支持楼主ing……

锋完美至极 · 发表于 2023-10-8 12:12:15

真是难得给力的帖子啊。

interkenny · 发表于 2023-10-25 07:43:51

学习学习啦

quentin0076 · 发表于 2023-11-20 16:05:32

66666，很棒

鱼仔 · 发表于 2023-12-15 09:38:45

这么优秀的么

葭云 · 发表于 2024-1-3 08:23:30

好，很好，非常好！

		自动登录	找回密码
密码			立即注册