微信小程序——wxs脚本

这篇具有很好参考价值的文章主要介绍了微信小程序——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文件,并保存小程序wxs,微信小程序,微信小程序

小程序wxs,微信小程序,微信小程序

第二步:在text.js文件:data中定义两个变量number1和number2
小程序wxs,微信小程序,微信小程序

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

小程序wxs,微信小程序,微信小程序

2、外联的 wxs 脚本

第一步:创建外联的wxs脚本
小程序wxs,微信小程序,微信小程序第二步:在wxml文件下引入模块
小程序wxs,微信小程序,微信小程序
小程序wxs,微信小程序,微信小程序

三、WXS的特点

1. 与 JavaScript 不同

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

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

wxs 典型的应用场景就是“过滤器”,经常配合 Mustache 语法进行使用。
小程序wxs,微信小程序,微信小程序

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

3. 隔离性

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

4. 性能好

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

wxs更多语法文章来源地址https://www.toymoban.com/news/detail-587770.html

到了这里,关于微信小程序——wxs脚本的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • “编辑微信小程序与后台数据交互与微信小程序wxs的使用“

    在现代移动应用开发中,微信小程序已经成为了一个非常流行和广泛使用的平台。为了使小程序能够展示丰富的内容和实现复杂的功能,与后台数据的交互是至关重要的。同时,微信小程序还提供了一种特殊的脚本语言——wxs,用于增强小程序的业务逻辑处理能力。本篇博客

    2024年02月08日
    浏览(46)
  • 原生微信小程序使用 wxs;微信小程序使用 vant-weapp组件

    在这里插入图片描述 操作顺序 :文档地址 如果使用 typescript 需要操作步骤3,否则不需要操作 2.1 在根目录下 操作 2.2 安装版本 2.3 构建包 - 详情-勾选使用 npm 2.4 使用 vant 组件

    2024年02月11日
    浏览(66)
  • 微信小程序 | 小程序WXSS-WXML-WXS

    🖥️ 微信小程序 专栏:小程序WXSS-WXML-WXS 🧑‍💼 个人简介:一个不甘平庸的平凡人🍬 ✨ 个人主页:CoderHing的个人主页 🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️ 👉 你的一键三连是我更新的最大动力❤️ 目录 一、WXSS编写程序样式 小程序的样式写法 WXSS支持的

    2024年01月23日
    浏览(69)
  • 微信小程序 - 导航 、wxs及生命周期函数

    导航 声明式导航 使用 navigator/navigator 标签 属性 类型 默认值 必填 说明 target string self 否 在哪个目标上发生跳转,默认当前小程序 url string 否 当前小程序内的跳转链接 open-type string navigate 否 跳转方式 target参数 属性值 说明 self 当前小程序 miniProgram 其它小程序 open-type参数 属

    2024年01月17日
    浏览(44)
  • 微信小程序前后端交互与WXS的应用

    目录 前言 一、后台数据交互 1.数据表 2.后端代码的实现 3.前后端交互 3.1.后端接口URL管理 3.2.发送后端请求 3.3.请求方式的封装 4.前端代码的编写 二、WXS的使用 1、.wxs 文件 2.综合运用 当今社交媒体的普及使得微信小程序成为了一种流行的应用开发形式。微信小程序不仅可以

    2024年02月08日
    浏览(54)
  • 微信小程序之首页-后台交互及WXS的使用

    目录 前言  一. 前后台数据交互及封装request 1.准备后台 1.1 配置数据源  1.2 部分后台获取数据方法编写 2.准备前端 2.1封装Request 2.2 前端JS方法编写 2.3 前端页面展示index.wxml 二.WXS的使用 1.简介 2.WXS优化OA系统  2.1 使用及定义 2.2 导入要使用的项目 2.3 优化会议状态 2.4 优化人

    2024年02月08日
    浏览(50)
  • 微信小程序连接数据库与WXS的使用

      🎉🎉欢迎来到我的CSDN主页!🎉🎉 🏅我是Java方文山,一个在CSDN分享笔记的博主。📚📚 🌟推荐给大家我的专栏《 微信小程序开发实战 》。🎯🎯 👉点击这里,就可以查看我的主页啦!👇👇 Java方文山的个人主页 🎁如果感觉还不错的话请给我点赞吧!🎁🎁 💖期待

    2024年02月08日
    浏览(46)
  • 微信小程序:如何在{{}}中使用函数?WXML+WXS

    在原生小程序的项目中或有这种需求,就是在wxml页面中调用方法 但是微信原生小程序 无法直接使用像vue里面的计算属性,监听啦啥的这种,也不能调用js中的方法。  既然{{}}中无法调用js中的函数,那该怎么办呢? 微信提出了一种新的概念,WXS(WeiXin Script) ,小程序的一套脚

    2024年02月16日
    浏览(47)
  • 微信小程序基本使用2:wxs,组件的使用以及弹窗、滚动条

    WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML ,可以构建出页面的结构。 可以在模版中内联少量处理脚本,丰富模板的数据预处理能力。 wsx 在IOS设备上性能是JavaScript的2-20倍 内嵌式 module=“属性值” 关联式 在utils下创建文件tools.wxs 在wxs文件中直接写方法,最后通过

    2024年02月02日
    浏览(61)
  • 微信小程序关于wxs语法、以及能否引入js中的方法(不能调用)

    页面中使用wxs 或者  参考:WXS | 微信开放文档 wxs能引入外部js文件吗 | 微信开放社区 微信小程序中的WXS语法 1、WXS 中不支持let和const,不支持箭头函数。 2、变量命名必须符合下面两个规则: 首字符必须是:字母(a-zA-Z),下划线(_) 剩余字符可以是:字母(a-zA-Z),下划

    2024年02月06日
    浏览(64)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包