1

#yyds干货盘点#【愚公系列】2022年11月 微信小程序-WXS模块的使用

 1 year ago
source link: https://blog.51cto.com/u_15437432/5819425
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内，或以 .wxs 为后缀名的文件内。每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块。每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。

一、WXS模块的使用

1.间接使用

//tools.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="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>

2.直接使用

<wxs module="foo">
var some_msg = "hello world";
module.exports = {
  msg : some_msg,
}
</wxs>
<view> {{foo.msg}} </view>

二、WXS模块的引用

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

引用的时候，要注意如下几点：

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

1.模块定义

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

//logic.wxs
var tools = require("./tools.wxs");

console.log(tools.FOO);
console.log(tools.bar("logic.wxs"));
console.log(tools.msg);

2.模块使用

//<wxs src="./../logic.wxs" module="tools" />
<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>

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

  • wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
  • wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
  • wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript文件中定义的函数，也不能调用小程序提供的API。
  • wxs 函数不能作为组件的事件回调。
  • 由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android设备上二者运行效率无差异。

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK