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

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

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

2、wxs 和 JavaScript 的区别

wxs 有自己的数据类型; l/ T+ d' X( K. n) r* }- X
wxs 支持 CommonJS 模块化规范，可以将代码拆分为多个模块，提高代码的可读性和维护性6 n2 I) q! d( m% a5 r& R* z
wxs 支持基本的 JavaScript 语法和一些特有的语法，例如模板字符串、var 等wxs 不支持 ES6 及以上的语法形式，例如：let 、const、解构等等等都不能使用
. D0 C6 H* `1 J2 [

3、wxs 的使用场景

数据处理：实现类似于过滤器一样的功能，例如格式化日期、格式化数据等等& Q1 M" n# M6 S) ]
逻辑控制：例如条件判断、循环、函数调用等等，也可以放在 wxs 中处理用以简化模板其他....* c- x" b7 g5 n/ z H7 L

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

2、定义模块

每一个 .wxs 文件和标签都是一个单独的模块，每个模块都有自己独立的作用域0 n! H) f& j2 f
即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现
& {- T& a' ~& z

// /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 文件，用于编写封装函数: x. t& x7 _7 f! f% ^2 g, y' Q
在 phone.wxs 文件中，编写一个名为 formatPhone 的函数，用于格式化手机号在小程序的页面中，引入 phone.wxs 文件，并调用 formatPhone 函数: x* f/ K) x8 U3 i5 x4 b! G

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

好，很好，非常好！

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