微信小程序 Wxs篇

news/2024/10/30 23:23:32/

WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。

【注意】

  1. WXS 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。
  2. WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致。
  3. WXS 的运行环境和其他 JavaScript 代码是隔离的,WXS 中不能调用其他 JavaScript 文件中定义的函数,也不能调用小程序提供的API。
  4. WXS 函数不能作为组件的事件回调。

1.WXS 模块

WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内,或以 .wxs 为后缀名的文件内。

模块

每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块。

每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见。

一个模块要想对外暴露其内部的私有变量与函数,只能通过 module.exports 实现。

示例代码:

文件名:xxx.wxs

var foo = "'hello world' from tools.wxs";
var bar = function (d) {return d;
}
module.exports = {FOO: foo,bar: bar,
};
module.exports.msg = "some msg";

使用处引用

<!-- page/index/index.wxml -->
<wxs src="./../xxx.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>

页面输出:

some msg
'hello world' from tools.wxs
require函数

.wxs模块中引用其他 wxs 文件模块,可以使用 require 函数。

引用的时候,要注意如下几点:

  • 只能引用 .wxs 文件模块,且必须使用相对路径。
  • wxs 模块均为单例,wxs 模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个 wxs 模块对象。
  • 如果一个 wxs 模块在定义之后,一直没有被引用,则该模块不会被解析与运行。

示例代码:

// /pages/tools.wxsvar foo = "'hello world' from tools.wxs";
var bar = function (d) {return d;
}
module.exports = {FOO: foo,bar: bar,
};
module.exports.msg = "some msg";
// /pages/logic.wxsvar tools = require("./tools.wxs");console.log(tools.FOO);
console.log(tools.bar("logic.wxs"));
console.log(tools.msg);
<!-- /page/index/index.wxml --><wxs src="./../logic.wxs" module="logic" />
<wxs> 标签
属性名类型说明
moduleString当前 <wxs> 标签的模块名。必填字段。
srcString引用 .wxs 文件的相对路径。仅当本标签为单闭合标签标签的内容为空时有效。

WXS语法参考

2.Wxs页面模块

<!--wxml-->
<wxs module="m1">
var msg = "hello world";module.exports.message = msg;
</wxs><view> {{m1.message}} </view>// 页面输出
hello world
数据处理
// page.js
Page({data: {array: [1, 2, 3, 4, 5, 1, 2, 3, 4]}
})<!--wxml-->
<!-- 下面的 getMax 函数,接受一个数组,且返回数组中最大的元素的值 -->
<wxs module="m1">
var getMax = function(array) {var max = undefined;for (var i = 0; i < array.length; ++i) {max = max === undefined ?array[i] :(max >= array[i] ? max : array[i]);}return max;
}module.exports.getMax = getMax;
</wxs><!-- 调用 wxs 里面的 getMax 函数,参数为 page.js 里面的 array -->
<view> {{m1.getMax(array)}} </view>// 页面输出:
5

其它

1.正则表达式使用方式

// 	匹配标题(1.正则判断字符串是否包含数字;2.获取字符串中的数字内容;)
function shortName(obj) {var isNumReg = getRegExp('\d', 'g');if(isNumReg.test(obj)){var reg = getRegExp('[^0-9]', 'g');return obj.replace(reg, '');} else{return "会议室";}
}module.exports = {shortName: shortName,
}

http://www.ppmy.cn/news/305211.html

相关文章

入门微信小程序开发(二)wxml与wxss

一.初识WXML 对于每一位前端开发者而言&#xff0c;熟练的编写静态页面是入门的开始&#xff0c;在小程序中这一点也无法避免。在介绍微信小程序功能交互之前&#xff0c;我们先了解在小程序中如何实现页面布局与页面样式&#xff0c;这里先来介绍WXML。 WXML全称WeiXin Mark…

【微信小程序WXS 模块】

WXS 模块WXS 代码可以编写在 wxml 文件中的 标签内&#xff0c;或以 .wxs 为后缀名的文件内。模块每一个 .wxs 文件和 标签都是一个单独的模块。每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数&#xff0c;默认为私有的&#xff0c;对其他模块不可见。一个模…

小程序wxs使用教程

1、什么是wxs wxs是小程序的一种脚本语言&#xff0c;它类似JavaScript&#xff0c;但是与JavaScript有所不同。wxs是一种数据绑定和逻辑处理的语言&#xff0c;它可以在wxml中使用&#xff0c;并且可以在wxml中直接调用。使用wxs可以实现更高效、更灵活的数据处理和渲染。 2…

robots.txt的作用是什么,看完了我默默加在了自己网站上

文章目录 背景robots.txt的主要作用使用示范User-agentDisallowAllowSitemap 总结 背景 最近在研究网站SEO相关的东西&#xff0c;第一次接触到robots.txt&#xff0c;才发现实际上很多网站都用到了它&#xff0c;尤其是对搜索引擎依赖特别高的C端系统或者网站&#xff0c;是一…

微信小程序实战 (WXSS:小程序版CSS、WXS:小程序版JavaScript)

上一篇讲了WXML:小程序版HTML&#xff0c;这一篇介绍WXSS:小程序版CSS。 1. WXSS:小程序版CSS。 WXSS是一套样式语言&#xff0c;为了便于前端开发的上手&#xff0c;WXSS同HTML的CSS样式文件大部分特性一样。它用来决定WXML的样式&#xff0c;同时在CSS基础上进行了修改扩充…

【微信小程序】WXML WXSS JS

目录 &#x1f353;小程序代码的构成 - WXML 模板 1. 什么是 WXML 2. WXML 和 HTML 的区别 &#x1f347;小程序代码的构成 - WXSS 样式 1. 什么是 WXSS 2. WXSS 和 CSS 的区别 &#x1f352;小程序代码的构成 - JS 逻辑交互 1. 小程序中的 .js 文件 2. 小程序中 .js 文…

【小程序】中WXS的语法详解

文章目录 WXS基本使用&#x1f370;WXS的介绍&#x1f370;WXS的写法&#x1f370;WXS的练习(一)&#x1f370;WXS的练习(二) WXS基本使用 &#x1f370;WXS的介绍 WXS&#xff08;WeiXin Script&#xff09;是小程序的一套脚本语言&#xff0c;结合 WXML&#xff0c;可以构建…

微信小程序 | 小程序WXSS-WXML-WXS

&#x1f5a5;️ 微信小程序 专栏&#xff1a;小程序WXSS-WXML-WXS &#x1f9d1;‍&#x1f4bc; 个人简介&#xff1a;一个不甘平庸的平凡人&#x1f36c; ✨ 个人主页&#xff1a;CoderHing的个人主页 &#x1f340; 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️ &#x1…