微信小程序——wxs脚本

一、WXS的概述

1、什么是wxs

WXS(WeiXin Script)是小程序独有的一套脚本语言,结合 WXML,可以构 建出页面的结构。
模块
每一个 .wxs 文件和 标签都是一个单独的模块。每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见。一个模块要想对外暴露其内部的私有变量与函数,只能通过 module.exports 实现。
module 对象
每个 wxs 模块均有一个内置的 module 对象。
属性
exports: 通过该属性,可以对外共享本模块的私有变量与函数。
。。。。。。

2、应用场景:

WXML 中无法调用在页面的 .js 中定义的函数,但是,wxml 中可以调用 wxs 中定义的函数。因此,小程序中 wxs 的典型应用场景就是“过滤器”。

3. wxs 与JavaScript

wxs 的语法类似于 JavaScript,但是 wxs 和 JavaScript 是完全不同的两种语言:

(1)wxs 支持的数据类型:

number 数值类型
string 字符串类型
boolean 布尔类型
object 对象类型、
function 函数类型
array 数组类型
date 日期类型
regexp 正则

(2)wxs 不支持类似于 ES6 及以上的语法形式

不支持:let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc…
支持:var 定义变量、普通 function 函数等类似于 ES5 的语法

(3)wxs 遵循 CommonJS 规范

module 对象
require() 函数
module.exports 对象

二 、WXS基础语法

1、 内嵌 wxs 脚本

第一步:在app.json创建text文件,并保存在这里插入图片描述

在这里插入图片描述

第二步:在text.js文件:data中定义两个变量number1和number2
在这里插入图片描述

第三步:使用内联的方式导入模块(模块的创建和导入都在wxml文件中)

在这里插入图片描述

2、外联的 wxs 脚本

第一步:创建外联的wxs脚本
在这里插入图片描述第二步:在wxml文件下引入模块
在这里插入图片描述
在这里插入图片描述

三、WXS的特点

1. 与 JavaScript 不同

为了降低 wxs(WeiXin Script)的学习成本, wxs 语言在设计时借鉴了大量 JavaScript 的语法。但是本质上,wxs 和 JavaScript 是完全不同的两种语言!

2. 不能作为组件的事件回调

wxs 典型的应用场景就是“过滤器”,经常配合 Mustache 语法进行使用。
在这里插入图片描述

但是,在 wxs 中定义的函数不能作为组件的事件回调函数。

3. 隔离性

隔离性指的是 wxs 的运行环境和其他 JavaScript 代码是隔离的。体现在如下两方面:
wxs 不能调用 js 中定义的函数
wxs 不能调用小程序提供的 API

4. 性能好

在 iOS 设备上,小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍
在 android 设备上,二者的运行效率无差异 ;

wxs更多语法

### VSCode Vue3 开发常用插件推荐 #### 编辑增强类插件 为了提高编辑效率,一些插件提供了诸如自动补全、语法高亮等功能。例如 `Auto Rename Tag` 插件能够在修改HTML/XML标签时同步更新其闭合标签[^2]。 #### 主题与界面优化 对于视觉体验有需求的开发者来说,可以选择像 `Atom One Light Theme` 或者 `Cobalt2 Theme Official` 这样的主题来美化工作环境[^1]。另外还有 `VSCode Great Icons` 提供更美观的图标支持[^1]。 #### 中文语言包 为了让国内用户更好地理解和操作VSCode,安装 `Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code` 是很有必要的,它能够使整个IDE界面汉化。 #### 代码片段加速开发 `Vue VSCode Snippets` 和 `Vue 3 Snippets` 都是非常实用的选择,前者通过预设好的模板让开发者可以迅速构建起基本结构;后者则专注于为最新版本框架定制专属片段集合[^3]。 #### 导航辅助工具 当项目规模逐渐增大之后,利用 `Vue Peek` 实现快速定位组件定义位置变得尤为重要。该功能允许使用者仅需简单点击就能直达目标源码所在之处。 #### 路径处理解决方案 针对模块间相互引用频繁的情况,`Path Intellisense` 的存在无疑大大简化了这一过程——无论是相对还是绝对路径都能得到智能提示。而 `file-jump` 功能同样实现了别名路径下的便捷跳转[^4]。 #### 类型感知能力加强 考虑到TypeScript日益普及的趋势,在编写基于TSX/JSX语法糖封装后的单文件组件(SFCs)时,借助于 `TypeScript Vue Plugin (Volar)` 及 `Vue Language Features (Volar)` 来获得更好的类型推断效果显得尤为关键。 #### 图片资源管理 如果涉及到大量图像素材,则不可错过 `Image preview` ,它可以即时显示图片内容而不必离开当前窗口去寻找原图。 #### 版本控制集成 最后但并非最不重要的是,保持良好的Git实践习惯始终是软件工程领域内不可或缺的一环。因此建议加入 `SVN` 或其他形式的SCM客户端以便随时追踪变更记录并协同作业。 ```json { "editor.codeActionsOnSave": { "source.fixAll.eslint": true, "source.organizeImports": true }, "[vue]": { "editor.defaultFormatter": "Vue.vscode-vue-languageservice" } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值