微信小程序——wxs脚本

小程序 0

WXS目录

  • 一、WXS的概述
    • 1、什么是wxs
    • 2、应用场景:
    • 3. wxs 与JavaScript
      • (1)wxs 支持的数据类型:
      • (2)wxs 不支持类似于 ES6 及以上的语法形式
      • (3)wxs 遵循 CommonJS 规范
  • 二 、WXS基础语法
    • 1、 内嵌 wxs 脚本
    • 2、外联的 wxs 脚本
  • 三、WXS的特点
    • 1. 与 JavaScript 不同
    • 2. 不能作为组件的事件回调
    • 3. 隔离性
    • 4. 性能好

一、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更多语法

也许您对下面的内容还感兴趣: