2023年尚硅谷大前端学习笔记
本帖最后由 zhuxianxiaofan 于 2023-10-8 08:04 编辑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> 标签内，或以 .wxs 为后缀名的文件内
2、定义模块
[*]每一个 .wxs 文件和 <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 属性指定当前 <wxs> 标签的模块名可以通过 src 属性可以用来引用其他的 wxs 文件模块
<!-- module 属性是当前 <wxs> 标签的模块名 -->
<!-- src 属性可以用来引用其他的 wxs 文件模块 -->
<wxs src="../wxs/tools.wxs" module="tools" />
<view> {{ tools.name }} </view>
<view> {{ tools.handler('wxs')}} </view>
[*]在 .wxs 模块中使用 require 函数可以引用其他 wxs 文件模块：
var tools = require("../wxs/tools.wxs");
console.log(tools.name);
console.log(tools.bar("wxs"))4、示例 <!--pages/index5/index5.wxml-->
<view class="container">
<!--
1、wxs 有两种使用方式：
第一种：直接在 wxml 中使用
第二种：单独拆分成 .wxs 文件
-->
<!--
2、如果在 wxml 中使用，需要将脚本放到 wxs 标签中
3、wxs 是单独模块，具有模块作用域，外部放到不了里面的数据和方法
如果想 wxml 中使用数据和方法，wxs 中需要进行暴露出来：module.exports = {...}
并且需要给 wxs 添加一个属性 module，属性值是指该模块的名字
-->
<wxs module="module">
var name = 'Tom'
function handle() {
return name
}
module.exports = {
name: name,
handle: handle
}
</wxs>
<!-- 4、访问模块中的成员： 模块名.xx -->
<view>{{ module.name }}</view>
<view>{{ module.handle() }}</view>
<!--
5、如果想使用拆分的 .wxs 文件
需要给 wxs 标签的 src 属性引入 wxs 文件
需要给 wxs 标签指定 module 属性，指定当前模块的名字
-->
<wxs src="./index5.wxs" module="module1"></wxs>
<view>{{ module1.formatPhone('18361261111') }}</view>
</view>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 中的代码：
<wxs module="phone" src="./index.wxs"></wxs>
<view>格式化后的号码：{{phone.formatPhone(phoneNum)}}</view>
2023年尚硅谷大前端学习笔记 2023年尚硅谷大前端学习笔记
强烈支持楼主ing…… 强烈支持楼主ing…… 真是难得给力的帖子啊。 强烈支持楼主ing…… 强烈支持楼主ing…… 我只是路过打酱油的。 强烈支持楼主ing……