文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

微信小程序WXS模块怎么用

2023-06-26 08:49

关注

这篇“微信小程序WXS模块怎么用”除了程序员外大部分人都不太理解,今天小编为了让大家更加理解“微信小程序WXS模块怎么用”,给大家总结了以下内容,具有一定借鉴价值,内容详细步骤清晰,细节处理妥当,希望大家通过这篇文章有所收获,下面让我们一起来看看具体内容吧。

WXS 模块

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

模块

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

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

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

.wxs 文件

在微信开发者工具里面,右键可以直接创建 .wxs 文件,在其中直接编写 WXS 脚本。

示例代码:

// /pages/comm.wxs

var foo = "'hello world' from comm.wxs";

var bar = function(d) {

  return d;

}

module.exports = {

  foo: foo,

  bar: bar

};

上述例子在 /pages/comm.wxs 的文件里面编写了 WXS 代码。该 .wxs 文件可以被其他的 .wxs 文件 或 WXML 中的 <wxs> 标签引用。

module 对象

每个 wxs 模块均有一个内置的 module 对象。

属性

exports: 通过该属性,可以对外共享本模块的私有变量与函数。

示例代码:

// /pages/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>

页面输出:

some msg

'hello world' from tools.wxs

require 函数

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

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

只能引用 .wxs 文件模块,且必须使用相对路径。

wxs 模块均为单例,wxs 模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个 wxs 模块对象。

如果一个 wxs 模块在定义之后,一直没有被引用,则该模块不会被解析与运行。

示例代码:

// /pages/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";

// /pages/logic.wxs

var 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" />

控制台输出:

'hello world' from tools.wxs

logic.wxs

some msg

<wxs> 标签

属性名类型默认值说明
moduleString 当前<wxs>标签的模块名。必填字段。
srcString 引用 .wxs 文件的相对路径。仅当本标签为单闭合标签或标签的内容为空时有效。

module 属性

module 属性是当前 <wxs> 标签的模块名。在单个 wxml 文件内,建议其值唯一。有重复模块名则按照先后顺序覆盖(后者覆盖前者)。不同文件之间的 wxs 模块名不会相互覆盖。

module 属性值的命名必须符合下面两个规则:

首字符必须是:字母(a-zA-Z),下划线(_)

剩余字符可以是:字母(a-zA-Z),下划线(_), 数字(0-9)

示例代码:

<!--wxml-->

<wxs module="foo">

var some_msg = "hello world";

module.exports = {

    msg : some_msg,

}

</wxs>

<view> {{foo.msg}} </view>

页面输出:

hello world

上面例子声明了一个名字为 foo 的模块,将 some_msg 变量暴露出来,供当前页面使用。

src 属性

src 属性可以用来引用其他的 wxs 文件模块。

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

只能引用 .wxs 文件模块,且必须使用相对路径。

wxs 模块均为单例,wxs 模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个 wxs 模块对象。

如果一个 wxs 模块在定义之后,一直没有被引用,则该模块不会被解析与运行。

示例代码:

// /pages/index/index.js

Page({

  data: {

    msg: "'hello wrold' from js",

  }

})

<!-- /pages/index/index.wxml -->

<wxs src="./../comm.wxs" module="some_comms"></wxs>

<!-- 也可以直接使用单标签闭合的写法

<wxs src="./../comm.wxs" module="some_comms" />

-->

<!-- 调用 some_comms 模块里面的 bar 函数,且参数为 some_comms 模块里面的 foo -->

<view> {{some_comms.bar(some_comms.foo)}} </view>

<!-- 调用 some_comms 模块里面的 bar 函数,且参数为 page/index/index.js 里面的 msg -->

<view> {{some_comms.bar(msg)}} </view>

页面输出:

'hello world' from comm.wxs

'hello wrold' from js

上述例子在文件 /page/index/index.wxml 中通过 <wxs> 标签引用了 /page/comm.wxs 模块。

注意

<wxs> 模块只能在定义模块的 WXML 文件中被访问到。使用 <include> 或 <import> 时,<wxs> 模块不会被引入到对应的 WXML 文件中。

<template> 标签中,只能使用定义该 <template> 的 WXML 文件中定义的 <wxs> 模块。

小程序是什么意思

小程序是一种不需要下载安装即可使用的应用,通过扫描二维码或是搜一搜立即使用,操作简单,便于传播,能够实现消息通知、线下扫码、公众号关联等七大功能。它基于微信运行的,类似于APP,想用就用,用完即走,不会占用内存。

感谢您的阅读,希望您对“微信小程序WXS模块怎么用”这一关键问题有了一定的理解,具体使用情况还需要大家自己动手实验使用过才能领会,快去试试吧,如果想阅读更多相关知识点的文章,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯