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

zhuxianxiaofan · 发表于 2023-10-8 08:02

本帖最后由 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 文件模块

<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、示例 

<view class="container">


<wxs module="module">
   var name = 'Tom'

   function handle() {
   return name
   }

   module.exports = {
   name: name,
   handle: handle
   }
</wxs>


<view>{{ module.name }}</view>
<view>{{ module.handle() }}</view>


<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=1696723437

2、实现步骤

在小程序项目中创建一个名为 /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
}